JavaScript: gestire le API delle Google Maps con le Promise ed il modello async/await

JavaScript: gestire le API delle Google Maps con le Promise ed il modello async/await

In JavaScript possiamo gestire le API delle Google Maps usando le Promise e il modello async/await.

L'esempio che segue mostra la creazione di una Google Map tramite la geolocalizzazione di un indirizzo. La Promise restituirà le coordinate dell'indirizzo se la richiesta ha successo ed il relativo messaggio di errore in caso contrario.

Con il modello async/await mostreremo la mappa dinamica in caso di successo ed una mappa statica in caso di errore. Come si può notare, la gestione delle API di Google resta inalterata. Quello che cambia è l'organizzazione e la logica del codice.


'use strict';

const getAddress = address => {
    return new Promise((resolve, reject) => {
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({address: address}, (results, status) => {
            if (status === 'OK') {
                resolve(results[0].geometry.location);
            } else {
                reject(status);
            }    
        });    
    });
};

const createMap = async () => {
    let element = document.querySelector('#map');
    try {
        
        let map = new google.maps.Map(element, { zoom: 16 });
        let location = await getAddress('Via San Michele 162, Vasto');

         map.setCenter(location);

         let marker = new google.maps.Marker({
                    map: element,
                    position: location
          });
    } catch(err) {
        console.warn(err);

        element.innerHTML = '<img src="/images/static-map.jpg" alt="">';
    }
};

Esempio d'uso:


'use strict';

document.addEventListener('DOMContentLoaded', () => {
    createMap();
});

Torna su