CODEWITHSUNDEEP
javascriptasync-await
Don Giulio
Don Giulio

Reputation: 3284

async function for geocoding address before drawing map

I'm trying to show a google api map of a place which I have the address for.

so I'm trying to geocode that address for the map, but I'm having troubles with the async/promise

here's my code: 

function geocode(address) {
            geocoder = new google.maps.Geocoder()
            if (geocoder) {
                 return geocoder.geocode( { 'address': address }, 
                    (results, status) => {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                console.log("geocode : "+ results[0].geometry.location)
                                return(results[0].geometry.location);
                            } else {
                                console.log("GEOCODER: No results found");
                            }
                        } else {
                            console.log("GEOCODER: Geocode was not successful for the following reason: " + status);
                        }
                    }
                ).then( function(result) {return result})
            }
            }   


         const el = $('#map');
            const address = el.data('address');
            const title = el.data('title');
            const geocoded = geocode(address).then( function(result) {return result});
            console.log("map: " + geocoded);
            const position = {lat: geocoded.lat(), lng: geocoded.lng()}

            const map = new google.maps.Map(el[0], {
                center: position,
                zoom: 15,
                zoomControl: true,
                mapTypeControl: false,
                scaleControl: true,
                streetViewControl: true,
                rotateControl: true,
                fullscreenControl: true
            });

            const marker = new google.maps.Marker({
                map: map,
                position: position,
                title: title,
                icon: {
                    url: Images.marker,
                    scaledSize: new google.maps.Size(40, 48),
                }
            });

Upvotes: 1

Views: 576

Answers (1)

Hemant Parashar
Hemant Parashar

Reputation: 3774

You just have to do all the stuff inside then. geocoded will be a promise instead of your desired result as it is async and has not been resolved.

function geocode(address) {
  geocoder = new google.maps.Geocoder()
  return new Promise((res, rej) => {
    if (geocoder) {
      geocoder.geocode({ 'address': address },
        (results, status) => {
          if (status == google.maps.GeocoderStatus.OK) {
            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
              console.log("geocode : " + results[0].geometry.location)
              res(results[0].geometry.location);
            } else {
              console.log("GEOCODER: No results found");
              rej(null);
            }
          } else {
            console.log("GEOCODER: Geocode was not successful for the following reason: " + status);
            rej(null);
          }
        }
      )
    } else {
      rej(null)
    }
  }
  )
}


const el = $("#map");
const address = el.data("address");
const title = el.data("title");

//Do other stuff inside then
geocode(address).then(function (geocoded) {
  console.log("map: " + geocoded);
  const position = { lat: geocoded.lat(), lng: geocoded.lng() };

  const map = new google.maps.Map(el[0], {
    center: position,
    zoom: 15,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: true,
    streetViewControl: true,
    rotateControl: true,
    fullscreenControl: true,
  });

  const marker = new google.maps.Marker({
    map: map,
    position: position,
    title: title,
    icon: {
      url: Images.marker,
      scaledSize: new google.maps.Size(40, 48),
    },
  });
}).catch(e => {
  console.log(e)
})

Hope this helps !

Upvotes: 2

Related Questions