How to access google maps API response data

Question

First time trying to hack together some Javascript here so any resources that will help me understand my problem case is appreciated.

I'm trying to extract the lat and long from the following request to use in another request:

var placeSearch, autocomplete;
var x = document.getElementById("location");

function initAutocomplete() {
    // Create the autocomplete object, restricting the search predictions to
    // geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'), { types: ['geocode'] });

    // Avoid paying for data that you don't need by restricting the set of
    // place fields that are returned to just the address components.
    autocomplete.setFields(['geometry']);


}

function showPosition() {
    x.innerHTML = "Latitude: " + autocomplete.result.geometry.lat +
        "<br>Longitude: " + autocomplete.result.geometry.lng;
}
/*
    "result" : {
       "geometry" : {
          "location" : {
             "lat" : 51.46588129999999,
             "lng" : -0.1413263
        }
}
*/


// 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 = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle(
                { center: geolocation, radius: position.coords.accuracy });
            autocomplete.setBounds(circle.getBounds());
        });
    }
}

When a user selects the autocompleted location the google api makes a request to: https://maps.googleapis.com/maps/api/place/js/PlaceService.GetPlaceDetails on the selected location. I can see this returns my desired data here:

Obviously autocomplete.result.geometry.lat returns a location_search.js:18 Uncaught TypeError: Cannot read property 'geometry' of undefined error so I'm missing some knowledge here.

Thank you for your help.

Are you really using the deprecated since 2010 and to be shut down permanently in 2021, v2 of the Google Maps Javascript API (as the tags imply)? — geocodezip, Jun 09 '20 at 02:45
No I'm using v3, I was careless when adding the 2 tag. Apologies — James Downing, Jun 09 '20 at 16:12

Viggar · Answer 1 · 2020-06-07T14:18:50.593

0

I've implemented something very similar to your needs in my project recently. It's quite easy but it took me a while to realise how to do it.

Basically, you can simply use the .getPlace() method on the Autocomplete object and go from there. Here's how I got the latitude and longitude:

let locationInfo = autocomplete.getPlace().geometry.location;
let latitude = locationInfo.lat();
let longitude = locationInfo.lng();

In your specific case you should change your showPositions function to

function showPosition() {
x.innerHTML = "Latitude: " + autocomplete.getPlace().geometry.location.lat +
    "<br>Longitude: " + autocomplete.getPlace().geometry.location.lng;

}

Does this do the trick?

edited Jun 07 '20 at 14:18

answered Jun 07 '20 at 14:13

Viggar

140
1
8

Interesting thanks, is this not triggering another API call that could be avoided? I tried the snippet you left in my showPosition() function and receive Latitude `function(){return a}` Longitude `function(){return b}` – James Downing Jun 07 '20 at 17:29
@JamesDowning, I can't say for sure but since you've already received the Information in the Autocomplete object, I'd say that getPlace() only retreives this information instead of performing another API call. I don't understand the second part of your comment, did it work or did you achieve an unexpected outcome? – Viggar Jun 08 '20 at 14:11
Yes it seems you're right, so as you suggested I have called `var place = autocomplete.getPlace();` . I can only seem to return both the long and lat via `place.geometry.location;` however. `place.geometry.location.lat;` just returns `function(){return a}` which I'm not sure I understand why... – James Downing Jun 08 '20 at 18:34
The only difference in our code I can see is that you specified the "geocodes" type. I'd try removing that, do a test run and see if it works now. – Viggar Jun 09 '20 at 15:19
@JamesDowning, did this help you? Because I could really use those rep points :D – Viggar Jun 11 '20 at 18:59

How to access google maps API response data

1 Answers1