Get place_id of a specific address component

Question

var autocomplete;

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')), {
            types: ['address']
        });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();
    /* need to get the neighborhood place_id here */
}

My place object is a full address and what I need is the place_id for a specific component of this address: the neighborhood.

I tried to make a reverse-geocoding using the latlng of my place object and filtering by neighborhood (https://maps.googleapis.com/maps/api/geocode/json?latlng=xxx,yyy&result_type=neighborhood), but it returns multiple results and eventually multiple (and incorrect) neighborhoods.

Is there anyway to get the place_id of the neighborhood?

Answer 1

This may be what you're trying to accomplish: this returns the Full Autocomplete Search Result, Place ID, Lat, Lng, and Formatted address but you can modify it to return any Address Components (or remove any unneeded ones) into form inputs.

var placeSearch;
var componentForm = {
    street_number: 'long_name',
    place_id: 'long_name'
};

var mapOptions = {
    center: new google.maps.LatLng(41.877461, -87.638085),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDefaultUI: true,
    streetViewControl: false,
    panControl: false
};

var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var input = /** @type {HTMLInputElement} */
(
document.getElementById('field_autocomplete'));

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    infowindow.close();
    marker.setVisible(false);

    var place = autocomplete.getPlace();

    if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(12); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(25, 34),
        scaledSize: new google.maps.Size(50, 50)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
        address = [
        (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')].join(' ');
    }

    infowindow.setContent('<div id="infowindow"><strong>' + place.name + '</strong><br>' + 'Place ID: ' + place.place_id + '<br>' +
    place.formatted_address);
    infowindow.open(map, marker);
});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    fillInAddress();
});

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    document.getElementById('place_id').value = place.place_id;
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();

    var formatted_address = place.formatted_address;
    document.getElementById("formatted_address").value = formatted_address;

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);

            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            document.getElementById('latitude').value = latitude;
            document.getElementById('longitude').value = longitude;

            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
        });
    }
}