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:

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 = "";
        for (var i = 0; i < results.length; i++) {
          htmlStr += "";
        }
        htmlStr += "
" + results[i].formatted_address + "
" + results[i].place_id + "
";
        infowindow.setContent(infowindow.getContent() + "
" + 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 = "";
          for (var i = 0; i < results.length; i++) {
            htmlStr += "";
          }
          htmlStr += "
" + results[i].formatted_address + "
" + results[i].place_id + "
";
          infowindow.setContent(infowindow.getContent() + "
" + 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
}