Get the place_id of a specific component of an address

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 object place

- a complete address, and I need place_id

to specific component of this address: neighborhood

.

I tried to do reverse geocoding with latlng

my entity place

and filtering neighborhood

( https://maps.googleapis.com/maps/api/geocode/json?latlng=xxx,yyy&result_type=neighborhood ) but it returns multiple results and eventually several (and incorrect) neighborhoods.

Anyway to get place_id

around?

+3


source to share


1 answer


This might be what you are 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 unnecessary ones) in 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 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 geographical location,
// as supplied by the browser '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));
        });
    }
}

      

0


source







All Articles