Google geocode function returning undefined

Question

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 15,
  center: {lat: 24.149950, lng: 120.638610},
  mapId: '63d22d3ae6cf15ff'
  });

  console.log(getCoordinates("Bouverie Street"));
}

// geocoder
function getCoordinates(address) {
    const geocoder = new google.maps.Geocoder();
  geocoder.geocode({address: address}, (results, status) => {
    if (status === 'OK') {
        return results[0].geometry.location;
    } else {
        alert("Geocode error: " + status);
        console.log(("Geocode error: " + status));
    }
  });
}

On line 9 I'm trying to log the return object from getCoordinates(). However it shows up as undefined for some reason. I think the function works as intended as, if I added "console.log(results);" above the return statement, it logs the result object as intended.

if (status === 'OK') {
        return results[0].geometry.location;
    }

What am I doing wrong? Thanks in advance.

Answer 1

There has occurred an asynchronous issue. To get rid of that(in this case, you're printing latitude and longitude) you can pass a callback parameter when you're calling getCoordinates function.

Here I'm going to use below script for the example:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap" defer></script>

So replace this with your own which will be like this:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>

So here I'm going to pass a callback parameter to getCoordinates function which will print coordinates passed from getCoordinates in this way:

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: { lat: 24.149950, lng: 120.638610 },
        mapId: '63d22d3ae6cf15ff'
    });

    getCoordinates("Bouverie Street", printLocation);

}

function printLocation(location) {
    console.log("location");
    console.log(location.lat());
    console.log(location.lng());
}

// geocoder
function getCoordinates(address, myCallback) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: address }, (results, status) => {
        if (status === 'OK') {
            myCallback(results[0].geometry.location);
        } else {
            console.warn = () => {}; // stop printing warnings
            console.log(("Geocode error: " + status));
        }
    });
}

#map {
    height: 400px;
    width: 100%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap" defer></script>
<div id="map"></div>