JavaScript - Google API lat/lng from country name

Question

I wonder why this does not work, it perfectly logs Object {lat: 52.132633, lng: 5.291265999999999}. But only the console.log() inside the done() function works. To other one does not work, while I return that exact variable...

function getLatLng() {
    var LatLng;
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        LatLng = data.results[0];
        console.log(LatLng);
    })
    return LatLng;
}

console.log(getLatLng());

I need some workaround so that I can make the initMap() function work with my lattitude and longitude variables:

function getLatLng() {
    var LatLng;
    $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
        LatLng = data.results[0];
        console.log(LatLng);
    })
    return LatLng;
}

console.log(getLatLng()); // undefined

  function initMap() {

    var styledMapType = new google.maps.StyledMapType(
        [],
        {name: 'Styled Map'});

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: latVal, lng: lngVal}, // error >>> undefined
      zoom: 11,
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                'styled_map']
      }
    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');
  }

Already tried `function findItem() { var item; while(item_not_found) { // search } return item; } var item = findItem();` — Derk Jan Speelman, Jul 07 '17 at 12:01
This is because the `ajax.done()` Is executed after the return. — Gianfrancesco Aurecchia, Jul 07 '17 at 12:14
It doesn't matter whether I put the return out or inside the done function — Derk Jan Speelman, Jul 07 '17 at 12:15

score 1 · Accepted Answer · edited Jul 07 '17 at 14:51

1

This is because the call to the google api is asynchronous. This means the outer console log is executed while the response from google is still pending.

You could write it like this:

function getLatLng() {
    return $.ajax({
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
        type: 'GET',
        dataType: 'json',
    });
}

getLatLng().done(function(data) {
    var latlng = data.results[0];
    console.log(latlng);
    //...further processing
});

If you need access to latlng outside the done function you could rewrite as so:

function getLatLngPromise() {
    return new Promise(function(resolve) { 
        $.ajax({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address=germany&sensor=false',
            type: 'GET',
            dataType: 'json',
        }).done(function(data) {
            resolve(data);
        });
    });
}

async function getLatLng() {
    var data = await getLatLngPromise();
    return data[0];
}

var latlng = getLatLng();
console.log(latlng);

Or you could parametrize the initMap with a latlng parameter and move the initMap call to the done function of my first example. (pastebin.com/VpSUma9R)

edited Jul 07 '17 at 14:51

Derk Jan Speelman

11,291
4
29
45

answered Jul 07 '17 at 11:59

Cornelius Fillmore

123
8

I need access to it outside the done function – Derk Jan Speelman Jul 07 '17 at 12:00
I updated my question – Derk Jan Speelman Jul 07 '17 at 12:05
added an async example – Cornelius Fillmore Jul 07 '17 at 12:13
Like so: https://pastebin.com/MvP2je9e ? – Derk Jan Speelman Jul 07 '17 at 12:21
more like https://pastebin.com/VpSUma9R – Cornelius Fillmore Jul 07 '17 at 12:23
I'm sorry I didn't understand the synchronisation order of JavaScript functions. Combined with an ajax call, it was quite confusing for me. Thank you anyways! – Derk Jan Speelman Jul 07 '17 at 13:26
I now get this error very often: `Uncaught ReferenceError: google is not defined`. Not all the time, but more than regularly – Derk Jan Speelman Jul 07 '17 at 13:45
It would be great if you could provide the full code as this error could be caused everywhere – Cornelius Fillmore Jul 07 '17 at 14:55
Yes, never mind! I still got errors because I was still loading the maps api script `https://maps.googleapis.com/maps/api/js` with the callback parameter `initMap()` I had to remove this, because now, I initialize `initMap()` manually! So everything works fine, big thanks to you. – Derk Jan Speelman Jul 07 '17 at 14:59

JavaScript - Google API lat/lng from country name

1 Answers1