Pubblicato il

maps

api

google

webapp


come usare api di google maps per aggiungere una mappa al proprio sito
Ciao a tutti e benvenuti in questa nuova guida su come creare e aggiungere una mappa di Google Maps al vostro sito tramite l'uso della Google Maps API. In questa guida andremo a vedere il metodo più facile e semplice per integrare Google maps ad un sito internet.

La guida sarà divisa in due passi principali:

  1. Creare la mappa
  2. Creare la API key

Come creare una mappa Google maps per il proprio sito

Prima di tutto dovete scegliere la pagina HTML in cui volete inserire la mappa. Una volta scelta, potete continuare con la guida. (Nel nostro caso utilizzeremo una semplice pagina base HTML)

<!DOCTYPE html>
<html>
<head>    
<style>      
    #map {        
        width: 100%;        
        height: 400px;        
        background-color: grey;      
    }    
</style>  
</head>  
<body>    
    <h3>My Google Maps Demo</h3>    
    <div id="map"></div>  
</body>
</html>


Oltre ai tag base di una pagina HTML, con questo codice andiamo a specificare alcuni particolari come: Aggiungiamo delle regole CSS per: Specificare altezza e larghezza della mappa, e dare un colore di background che sarà visibile prime del caricamento della mappa. Inoltre abbiamo anche aggiunto un div con un id “map”. Questo div verrà utilizzato nel prossimo passo per inizializzare la mappa.

Ora vediamo il codice JavaScript per inizializzare una mappa.

Dato che questo codice è molto semplice vi posto il codice intero e poi seguirà una spiegazione:


<!DOCTYPE html>
<html>
<head>
<style>
    #map {
        width: 100%;
        height: 400px;
        background-color: grey;
    }
</style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
     <div id="map"></div>
    <script>
    function initMap() {
        var pos = {lat: -25.363, lng: 131.044};
         var map = new google.maps.Map(document.getElementById('map'),
            { zoom: 4, center: pos }); }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>
</html>


Come vedete abbiamo aggiunto due script tag. Il primo script tag serve per trovare un div con id="map" ed inizializzare la mappa di Google Maps al suo interno con la funzione initMap(). All’interno di initMap creiamo un oggetto con valori di latitudine e longitudine, che usiamo per specificare il centro della mappa. Con il codice new google.maps.Map(...) andiamo a creare una nuova mappa con proprietà di zoom: 4 (livello dello zoom) e center: pos (lat e long).

Con il secondo scrip tag invece facciamo un import della API di Google, passando la nostra API key. Come vedete l’url del import è: 
https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap
Dove andremo a sostituire API_KEY con la KEY che andremo a creare nel prossimo passo della guida.

Come creare una API KEY per Google maps.

Il processo per creare la API key è molto semplice, infatti basta:

  1. Effettuare il login nella console di Google.
  2. Creare un nuovo progetto o selezionare un progetto esistente.
  3. Nella pagina successiva selezionare la tab delle Credenziali, e selezionare l’opzione per creare una nuova KEY JavaScript per Google maps. Se state utilizzando la vostra KEY in un sito pubblico è consigliato proteggere la Key. (potete vedere come in questa guida)
  4. Una volta ricevuta la API KEY possiamo ritornare alla pagina HTML e sostituire la Nostra alla parola API_KEY nel url dello script tag.


Se salvate il tutto e aprite la pagina HTML in un browser dovreste vedere una mappa di Google maps senza alcun errore. Se avete riscontrato qualche errore durante questo processo, commentate in basso e cercherò di rispondere il prima possibile. Grazie per aver seguito la guida, spero vi sia stata di aiuto, ci vediamo alla prossima :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)