Lezione 2 - Iniziare con le API di Google Maps

Abbiamo visto nell'articolo precedente come ricevere la api key di Google.

Ora che abbiamo tutti gli strumenti pronti cominciamo a conoscere queste utilissime api.

La prima cosa che andiamo a vedere è come inviare una richiesta di una semplice mappa data la longitudine e la latitudine.

Prendiamo come esempio Roma. Il processo sarà quello di inviare una richiesta a Google contenente la longitudine e la latitudine e google ci restituirà la mappa centrata sul punto richiesto.

Creiamo innanzitutto la funzione contenente la nostra richiesta:

function Map_Request() {
          map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 41.87155, lng: 12.49712},
          zoom: 12
        });
      }

Analizzando il codice vediamo che per prima cosa abbiamo creato un nuovo oggetto avente valori center: {lat: 41.87155, lng: 12.49712} ( che è la latitudine e la longitudine del colosseo), e zoom:12 che come possiamo capire dal nome è il valore che indica l'ampiezza dello zoom.

Ora dobbiamo richiamare la funzione e creare il div contenitore della mappa (alla quale dovremmo dare id="map"):

 <div id="map"> </div>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Map_Request">

Come potete vedere lo carichiamo in maniera asincrona in modo che non vada ad influire con il restante caricamento della pagina.

Ora se tutto è corretto e inseriamo il codice nella nostra pagina il risultato dovrebbe risultare il seguente: