Otteniamo la nuova Google Maps API Key per le nostre mappe

Otteniamo la API Key utilizzando la Google Cloud Platform Console

Otteniamo la nuova Google Maps API Key per le nostre mappe

Questo articolo vuole essere un aggiornamento di un vecchio articolo del blog che descriveva come ottenere una API key per Google Maps in quanto la procedura è stata modificata e resa obbligatoria a partire dal 22 Giugno 2016. Anche se il servizio è gratuito (sono offerti 200$ al mese di utilizzo gratuito, che corrispondono a circa 25.000 richieste di utilizzo), è necessario un account di fatturazione a cui dover associare una carta di credito.

Json-lib: una libreria Java per elaborare dati in formato JSON
Sviluppare con il Google Web Toolkit (GWT)
Google Maps Api: come ottenere la API key per poter utilizzare le mappe sul nostro sito web

Questo articolo vuole essere un aggiornamento di un vecchio articolo del blog che descriveva come ottenere una API key per utilizzare le Google Maps API, in quanto la procedura è stata modificata e resa obbligatoria a partire dal 22 Giugno 2016. Anche se il servizio è gratuito (sono offerti 200$ al mese di utilizzo gratuito, che corrispondono a circa 25.000 richieste di utilizzo), è necessario un account di fatturazione a cui dover associare una carta di credito.

Ricordiamo che l’API Key è necessaria non solo per poter utilizzare le API Javascript di Google Maps ma anche per tutta una serie di servizi offerti da Google (ad esempio le API per il Geocoding, Geolocation, Street View, Places, etc.). Per ottenere una Google Maps API Key, per prima cosa bisogna collegarsi alla Google Cloud Platform Console con un account Google:

https://console.cloud.google.com/home/

La console della Google Cloud Platform

Dobbiamo creare delle credenziali per ottenere le API Key, lo facciamo cliccando sul menù in alto a sinistra e scegliendo API e servizi > Credenziali:

Clicchiamo sul menù di navigazione e poi su API e servizi > Credenziali

Prima di poter creare delle credenziali ci viene richiesto a quale progetto faranno riferimento, se non ne abbiamo nessuno dobbiamo crearlo cliccando su Crea Progetto:

Creiamo un nuovo progetto

Inseriamo un nome e clicchiamo su crea:

Indichiamo il nome del nostro progetto

Una volta creato il progetto si aprirà una nuova schermata attraverso la quale possiamo creare finalmente le credenziali:

La console che mostra le credenziali create

Clicchiamo in alto su Crea Credenziali > Chiave API:

Creiamo le credenziali

Così facendo viene creata la chiave API:

La API Key creata

Ora dobbiamo limitare l’utilizzo della chiave, altrimenti potrebbe essere utilizzata su qualunque sito, lo facciamo cliccando su Limita Chiave. Nella schermata proposta successivamente, andiamo alla voce Restrizioni delle applicazioni e spuntiamo il valore Referrer HTTP (siti web): ci verrà chiesto un valore per l’elemento (l’url del nostro sito ed eventuali sottodomini. Per poter usare la Key in più pagine del nostro sito o sottodomini possiamo utilizzare dei caratteri jolly:

Di seguito sono riportati alcuni esempi di URL a cui possiamo consentire l’accesso:

  • Un URL specifico con un percorso esatto: www.example.com/path
  • Qualsiasi URL in un singolo sottodominio, utilizzando asterischi come caratteri jolly (*): sub.example.com/*
  • Qualsiasi URL di sottodominio o percorso in un singolo dominio, utilizzando gli asterischi come caratteri jolly (*): *.example.com/*
  • URL con porta non standard: www.example.com:8000/*
Limitiamo l’uso della chiave ad un particolare sito o dominio

Come ulteriore step dobbiamo abilitare l’api Maps JAvascript andando al seguente indirizzo:

https://console.cloud.google.com/google/maps-apis/api-list

Dalla lista di api clicchiamo su Maps JavaScript API e poi nella successiva schermata su Abilita:

Abilitiamo le API Maps Javascript

Purtroppo Google questa volta richiede anche un account di fatturazione mostrandoci un errore se non lo attiviamo:

You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started

Lo possiamo creare andando all’indirizzo:

https://console.cloud.google.com/billing/

Con questo account di fatturazione è possibile accedere a tutti i prodotti della Google Cloud Platform: ad esempio per creare e gestire applicazioni, siti web e servizi, tra cui Firebase e la stessa API di Google Maps. Ci viene anche assegnato un credito gratuito di 300$ da spendere su Google Cloud Platform nel corso dei prossimi 12 mesi.

Per utilizzare le mappe ci viene assegnato un credito mensile di 200 dollari che corrisponde all’incirca a 25.000 richieste di servizio Google Maps (ogni richiesta costa sui 0,007 dollari). Nessun addebito automatico ci sarà alla fine della prova gratuita ma vengono comunque chiesti i dati della carta di credito per essere certi che non siamo un robot. Da notare che purtroppo le carte di debito prepagate non sono accettate!

Prezzi dei servizi Maps, Routes e Places

Abilitata la fatturazione possiamo creare una mappa utilizzando le Google Maps Javascript API utilizzando il seguente codice:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #canvas_mappa { height: 100% }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEnRCb-8htCYCEckJi2Cn4r6zJM67wNo4"></script>
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: {lat: 41.8905198, lng: 12.4942486}
        };
        map = new google.maps.Map(document.getElementById('canvas_mappa'),
            mapOptions);
        var marker = new google.maps.Marker({
          // The below line is equivalent to writing:
          // position: new google.maps.LatLng(41.8905198, 12.4942486)
          position: {lat: 41.8905198, lng: 12.4942486},
          map: map
        });
        var infowindow = new google.maps.InfoWindow({
          content: '<p>Marker Location:' + marker.getPosition() + '</p>'
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="canvas_mappa" style="width:100%; height:100%"></div>
  </body>
</html>

L’esempio di codice precedente è testabile al seguente indirizzo:

https://www.devnode.it/examples/gmaps-apikey.html

COMMENTS

WORDPRESS: 2
  • comment-avatar

    Ottimo consiglio e procedura spiegata bene, grazie

  • comment-avatar

    Molto interessante e spiegato veramente bene