javascript - Get place_id of address_components

Question

I am using Google place autocomplete. And I don't know how to get place_id of address_components. In JSON there are only long_name, short_name, types. My code is here:

var object_location = document.getElementById('object_location'),
    autoComplete = new google.maps.places.Autocomplete(object_location);

autoComplete.addListener('place_changed', function() {
   var place = autoComplete.getPlace();
   console.log('place = ', place);
});

Here is my JSON (picture)

I don't need place_id of my place. I need especially place_ids of address_components

Answer 1

If you reverse geocode the result, it will return results (which include a place_id) for each of the address components that contain that location.

autoComplete.addListener('place_changed', function() {
  var place = autoComplete.getPlace();
  map.setZoom(11);
  var marker = new google.maps.Marker({
    position: place.geometry.location,
    map: map
  });
  infowindow.setContent(place.formatted_address);
  infowindow.open(map, marker);
  geocoder.geocode({
      latLng: place.geometry.location
    },
    function(results, status) {
      if (status === 'OK') {
        console.log("revGeo result=" + JSON.stringify(results));
        var htmlStr = "<table border='1'>";
        for (var i = 0; i < results.length; i++) {
          htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
        }
        htmlStr += "</table>";
        infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var infowindow;

function initialize() {
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var object_location = document.getElementById('object_location'),
    autoComplete = new google.maps.places.Autocomplete(object_location);

  autoComplete.addListener('place_changed', function() {
    var place = autoComplete.getPlace();
    map.setZoom(11);
    var marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    infowindow.setContent(place.formatted_address);
    infowindow.open(map, marker);
    geocoder.geocode({
        latLng: place.geometry.location
      },
      function(results, status) {
        if (status === 'OK') {
          var htmlStr = "<table border='1'>";
          for (var i = 0; i < results.length; i++) {
            htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
          }
          htmlStr += "</table>";
          infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
        } else {
          window.alert('Geocoder failed due to: ' + status);
        }
      });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="object_location" />
<div id="map_canvas"></div>