Google Maps Api: come ottenere la API key per poter utilizzare le mappe sul nostro sito web

Google Maps Api: come ottenere la API key per poter utilizzare le mappe sul nostro sito web

In questo post vedremo come ottenere una API key per poter utilizzare le API di Google Maps, la quale serve anche per poter utilizzare le API di accesso per tutti i servizi resi disponibili dal colosso di Mountain View (ad esempio Google Analytics). Le API sono disponibili nella versione 3 che si differenzia dalla precedente versione 2 per aver adottato una nuova architettura di tipo MVC (Model-View-Controller) e per l'abbandono delle variabili globali in favore di un nuovo namespace denominato google.maps. Le dimensioni delle API sono state ridotte di dimensioni (circa 35 KB) ciò comporta una maggiore velocità nel caricamento delle mappe sul proprio sito web. Infine le nuove API sono compatibili con tutti i dispositivi mobile inclusi i Sistemi Operativi iOS e Android.

Json-lib: una libreria Java per elaborare dati in formato JSON
Creaimo un server di mappe geospaziali con Node.js e Mapbox
JQuery: una libreria JavaScript semplice e sintetica

In questo post vedremo come ottenere una API key per poter utilizzare le API Javascript di Google Maps, la quale serve anche per poter utilizzare le API di accesso per tutti i servizi resi disponibili dal colosso di Mountain View (ad esempio Google Geocoding, Street View, Analytics, etc.).

Le API sono disponibili nella versione 3 che si differenzia dalla precedente versione 2 per aver adottato una nuova architettura di tipo MVC (Model-View-Controller) e per l’abbandono delle variabili globali in favore di un nuovo namespace denominato google.maps.

Le API sono state ridotte di dimensioni (circa 35 KB), ciò comporta una maggiore velocità nel caricamento delle mappe sul proprio sito. Inoltre le nuove API sono compatibili con tutti i dispositivi mobile, inclusi i Sistemi Operativi iOS e Android.

Per poter inglobare una mappa nel proprio sito abbiamo bisogno di ottenere una chiave (Google maps api key) attraverso quella che viene definita da Google la API Console.

Per poter accedere alla API Console dobbiamo disporre di un Google Account: se utilizziamo uno dei tanti servizi di Google come Gmail o Google Calendar dovremmo già averne a disposizione uno (tipicamente la username è l’indirizzo email terminante con il suffisso @gmail.com), altrimenti dovremo crearne uno ad hoc.

Le Google Maps sono integrabili nel nostro sito senza pagare alcunchè a Google se non superiamo un determinato limite di utilizzo impostato dalla stessa Google. Il limite è fissato a 25.000 query (richieste di accesso) al giorno. Questo limite però può essere anche superato a patto che non lo si faccia per più di 90 giorni consecutivi, a questo punto bisogna chiedere una licenza commerciale, il cui costo è stabilito direttamente contattando Google.

La API Console raggiungibile a questo indirizzo:

http://code.google.com/apis/console

ci verranno richieste per entrare le credenziali del nostro Google Account.

Nel menù a sinistra cerchiamo la voce Services:

Nel menù a sinistra selezioniamo la voce Services

Cliccando sulla voce Services otteniamo la lista di tutte le API Google disponibili per il nostro Google Account con l’indicazione se sia attiva (ON) o meno (OFF), cerchiamo la voce Google Maps API v3 e  clicchiamo su ON:

Attiviamo il servizio Google Maps v3

ora per ottenere la Google Maps API key, clicchiamo nel menu a sinistra sulla voce Access:

Recuperiamo la API key generata

la chiave così generata è utilizzabile su qualsiasi sito, poiché è visibile in chiaro, quindi teoricamente anche altre persone visionando il nostro codice potremmo riutilizzarla. Riutilizzando la nostra chiave sul loro sito comprometterebbero sia le statistiche dei report generati sia il limite di utilizzo a noi assegnato.

Per evitare questa sorta di “pericolo” possiamo restringere il campo di utilizzo della nostra chiave. Ad esempio possiamo limitarne l’utilizzo per determinati siti o domini, andando nel tab Api Access e cliccando sulla voce a destra Edit allowed referers…:

Restringiamo l utilizzo della chiave per un solo dominio ed i suoi sottodomini

abbiamo ristretto l’utilizzo della chiave per il solo dominio e per tutti i sottodomini di appuntisoftware.it.

Se proviamo ad utilizzare la API key in altri contesti otteniamo questo messaggio di errore:

Il messaggio ci dice che la chiave utilizzata non è valida
Il messaggio ci dice che la chiave utilizzata non è valida

Aver ottenuto una chiave, ci permette di poter monitorare l’utilizzo della nostra mappa andando a cliccare sulla voce Report, sempre dal menù a sinistra:

In questo tab possiamo monitorare il numero di accessi alla nostra mappa

Il report ci indica il numero di accessi effettuati (view per day) insieme ad altre statistiche utili, quali ad esempio i paesi di provenienza dei visitatori della nostra mappa.

Adesso proviamo ad incorporare una mappa nel nostro sito; la prima cosa da fare è includere il codice Javascript delle API tramite il tag script:

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=LaTuaChiave&sensor=false">
</script>

come è possibile notare abbiamo incluso la nostra chiave come valore del parametro key; invece il parametro sensor specifica se debba essere utilizzato il dispositivo GPS dell’utente per poterne determinare la posizione, (utile se l’applicazione sviluppata deve essere utilizzata tramite dispositivi mobile), e va obbligatoriamente specificato a true o false, se lo settiamo a false indichiamo di non utilizzarlo.

Dobbiamo poi dichiarare un div all’interno del nostro codice html dove andremo a posizionare la mappa:

<div id="canvas_mappa" style="width:100%; height:100%"></div>

infine creiamo una funzione Javascript che viene richiamata appena viene renderizzata la pagina, possiamo farlo associandola all’evento onload dell’elemento HTML body:

function initializza() {
var latLngRoma = new google.maps.LatLng(41.8905198, 12.4942486);
var opzioni = {
center: latLngRoma,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("canvas_mappa"), opzioni);
var marker = new google.maps.Marker({position: latLngRoma, map: map, title: "Roma" });
}

la funzione inizializza crea una variabile dal nome latLngRoma che contiene la latitudine e longitudine di Roma e poi crea un vettore di opzioni da passare alla Mappa.

La variabile map è un oggetto di tipo Map che riceve come input il div dove posizionare la mappa ed il vettore di opzioni precedentemente creato. Abbiamo inoltre inserito un Marker per evidenziare la posizione cercata.

Ecco il codice completo dell’esempio:

<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 type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=LATuaChiave&sensor=false">
    </script>
    <script type="text/javascript">
      function initializza() {
        var latLngRoma = new google.maps.LatLng(41.8905198, 12.4942486);
        var opzioni = {
          center: latLngRoma,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("canvas_mappa"), opzioni);
        var marker = new google.maps.Marker({position: latLngRoma, map: map, title: "Roma" });
      }
    </script>
  </head>
  <body onload="initializza()">
    <div id="canvas_mappa" style="width:100%; height:100%"></div>
  </body>
</html>


possiamo visualizzare l’esempio al seguente link:

Esempio Google Maps

Consigliamo la lettura di questo articolo più recente perché vi sono stati dei cambiamenti nella procedura a partire da Giugno 2016. 

COMMENTS

WORDPRESS: 48
  • comment-avatar

    Buongiorno,

    Una semplice domanda, ho realizzato un dispositivo hw che invia un SMS contenente la posizione tramite querystring a gmaps, non capisco perchè su smartphone android se visualizzo tramite browser vedo il puntatore alla posizione, mentre nella app. gmaps centra solo la zona ma non compare il puntatore..

    Grazie mille per una indicazione

    Mario

    • comment-avatar

      ciao e grazie per aver letto l’articolo, non credo di aver capito bene il problema, ma quello che sicuro l’esempio non fa è proprio quello di visualizzare il Marker della posizione. Per farlo devi istanziare l’oggetto Marker, ad esempio:

      var marker = new google.maps.Marker({
      position: new google.maps.LatLng(41.8905198, 12.4942486),
      map: map, title: “Roma” });

      dove map è l’oggetto map definito nel codice dell’esempio.

  • comment-avatar

    Facendo i passaggi definiti (o aprendo la sua pagina di esempio) mi appare solo la mappa (a tutto schermo) ma senza punteruolo di indicazione posizione.
    Per tutti i browser (ovviamente)
    Il vecchio sistema invece permetteva di visualizzare e gestire il punteruolo. Cosa c’è che non va questa volta?

    • comment-avatar

      Ciao e grazie per aver letto l’articolo,
      l’esempio riportato centra la mappa sulla latitudine e longitudine di Roma ma non visualizza il Marker. Per poter visualizzare il Marker devi creare l’oggetto utilizzando questo codice:

      var marker = new google.maps.Marker({
      position: new google.maps.LatLng(41.8905198, 12.4942486),
      map: map, title: “Roma” });

      A questo indirizzo trovi l’elenco dei parametri che puoi passare al costrutture della classe Marker:
      https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
      sicuramente scriverò altri articoli su Google Maps quindi continua a seguirci 🙂

  • comment-avatar
    diaspillo 11 anni ago

    salve,
    dovrei realizzare un search form che visualizzi locali nella città inserita dall’utente nel campo input ma con la possibilità di specificare anche un raggio in termini di km che visualizzerà quindi locali nel raggio d’azione inserito.
    La risultante va visualizzata in semplici div di una pagina html, senza mappe.
    Sapreste dirmi se si può fare qualcosa con le api di google o altri sistemi?

    Nel mio db ho la tabella con i locali e la loro posizione geografica divisa in campi sia dei nomi che dei codici delle regioni, province, città e cap
    grazue

  • comment-avatar

    Salve,

    Ho provato a caricare il file html di esempio e mi da questo messaggio:

    Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key

    ho anche provato con una key personalizzata ma il messaggio e’ sempre uguale.

    che cosa sto sbagliando?

    j

    • comment-avatar

      Ciao,
      sicuramente devi ottenere una api key specifica per il tuo dominio e quindi devi seguire la guida che ho scritto, se ancora non funzionasse ricorda che il parametro sensor (quello che trovi subito dopo la chiave) deve essere settato obbligatoriamente o a true o false.
      Nella guida non è specificato, la aggiorno 🙂

      • comment-avatar

        Ciao Angelo,

        Perche’ dici che devo ottenere la key per il mio dominio, io credevo che una volta generata la key la potevo usare in qualunque dominio. Ho dimenticato qualcosa?
        Ho seguito alla lettera le tue indicazioni, ho creato la key e non ho
        ristretto l’utilizzo della chiave a nessun dominio.

        Ho usato le api v2 negli ultimi 4 anni, quelle volevano l’url collegato con la key mentre queste pare che non abbiano questa ristrizione, per cui ho semplicemente creato una key e poi ho sostituito nelle mie pagine, il vecchio riferimento delle v2

        con

        si tratta di un template kid dove la variabile gmap_key viene sostituita con il valore della chiave.
        Ho verificato il sorgente della pagina e vedo che gmap_key viene sostituita correttamente con la chiave che ho generato eppure continua a darmi il messaggio che ti ho riportato.

        • comment-avatar

          mi sono accorto serviva la configurazione dei referer ed ora la mia configuraziona appare cosi:

          Key for browser apps (with referers)
          API key:
          AIzaSyCj******************************
          Referers:
          alfa.myserver.com
          beta.myserver.com
          Activated on: Dec 7, 2012 7:45 AM
          Activated by: my@email.it – you

          ma continua a darmi lo stesso messaggio quando provo ad accedere ai miei referer.

          j

          • comment-avatar

            Sono riuscito a fare andare via il messaggio ma ancora non vedo le mappa perche’ ora devo convertire gli script da v2 a v3.

            j

  • comment-avatar

    Salve,
    Visto che Lei e copetente su i prodotti Google maps potete dirmi se e consentito usare AP v3 o altre API in una pagina e-comercio gratuitamente
    Vorrei sapere che condizioni legali esistono per usare Api di Google maps perche anche la lingua inglese non capisco e sopra di tutto interpretazione.Grazie

    • comment-avatar

      Ciao,
      come scritto nell’articolo esiste un limite di 25.000 richieste di accesso al giorno al sito che ospita la mappa. Questo limite però può essere anche superato a patto che non lo si faccia per più di 90 giorni consecutivi.
      Quindi a meno di avere un sito molto visitato dovresti essere ok.

  • comment-avatar

    Salve,
    Chiedo scusa se ti disturbo di nuovo,visto che non sono informato bene e chiedo aiuto:
    Se io decido di usare API V3 nella mia web-page che può essere un e-comercio devo stipulare un contrato con Google?
    (Come Google sara pagato dopo 25000 richieste..? )
    E se e obligatorio un contrato in che modo si fa?
    On line…?
    Grazie

  • comment-avatar
    Raffaele 11 anni ago

    Salve, avrei bisogno di una info. Utilizzo le Api ed è tutto okay, ma quando faccio creare il percorso, logicamente lo elabora e lo genera in italiano.
    Volevo sapere se è possibile avere la risposta in altre lingue ed eventualmente come.
    Grazie

  • comment-avatar

    Ciao A tutti, volevo sapere se qualcuno di voi sa come capire se due percorsi hanno dei punti in comune con le API V3.
    Ve ne sarei grato
    Grazie
    Paolo

  • comment-avatar

    ciao a tutti, io ho una mappa creata con fusion table, l’ho resa privata e ho cercato di attivare la protezione della mappa con “Maps API Client ID” inserendo l’API key per fare in modo che la mappa possa essere visibile solo sul mio sito

    il problema è che per alcuni caricamenti funziona ma poi la mappa diventa indisponibile

    quale può essere il problema ?

    grazie in anticipo

  • comment-avatar

    Ciao, ho un problema, e questo è l’unico articolo che ho trovato riguardante il generare una chiave v3 per le mappe. Ho un dispositivo che registra i miei percorsi trekking, utilizzo il software geonaute per visualizzare i dati della seduta e anche la mappa google. Nonostante abbia generato una nuova chiave v3 le mappe non vengono visualizzate e il programma continua a richiedermi una nuova chiave d’accesso. Dove devo inserire la nuova chiave? Nelle impostazioni del software dell’apparecchio? Non avviana automaticamente l’aggiornamento?
    Se qualcuno ha dei suggerimenti ve ne sarò grata.
    Grazie comunque per questi articoli interessanti.
    Sara

    • comment-avatar

      anche io stesso problema !!! non riesco. non trovo dove inserire la key.

      • comment-avatar

        Ciao a tutti,
        grazie per aver letto questo articolo,
        la chiave ottenuta tramite Google Apis va inserita come valore del parametro key della url inserita nel tag javascript (per intenderci la url che serve per includere il codice javascript nella pagina html), riporto sotto il codice relativo:

        < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD30_f2Wuyl6ttOqPeo43vcZ3JPg2gXLoU&sensor=false" < / script>

        alla prossima 🙂

  • comment-avatar

    Ciao ho letto l’articolo. Veramente utile.
    Ho una domanda però: bisogna acquistare una licenza commerciale delle api di google solo se si supera quel limite o anche se si utilizza la mappa in un sito con una finalità commerciale?
    Lo chiedo perchè vorrei creare un portale commerciale ed integrarlo con una mappa google. Vorrei sapere se posso andare tranquillo con l’Api gratis.
    Spero che riuscite a darmi una risposta.
    Grazie
    luca

    • comment-avatar

      Ciao e grazie per aver letto l’articolo, la licenza commerciale serve solo se superi quel limite, non ha importanza la natura del sito.

  • comment-avatar

    Ciao. Ho letto il tuo articolo e ho creato la mia key per google maps.
    Non ho capito molto bene però il funzionamento perchè io vorrei utilizzare questa key per creare una mappa in cui i valori dei markers come latitudine ecc non siano visibili agli utenti.
    Come posso far questo?
    Perchè nell’api console di Google non riesco a trovare qualche voce di menu per modificare il codice.

    grazie
    Luca

  • comment-avatar

    Salve , complimenti per l’articolo.
    Io avrei nececcità di realizzare nel mio sito Drupal , la possibilità di calcolare automaticamente i km calcolati ,tramite google maps (senza avere un link esterno , quindi direttamente nel sito ).. Ho già ottenuto la Api Key .
    Come posso fare per realizzare quanto scritto sopra?
    Grazie

  • comment-avatar
    Giorgio 10 anni ago

    Salve, ho creato una API Key per inserire una mappa in un sito. Tutto ok.
    So benissimo che non posso utilizzare una stessa API Key in più domini.
    Volevo sapere se con lo stesso account (nome@gmail.com)posso creare più API Key da poter utilizzare in domini diversi per diversi siti web. Se si come?

    Grazie
    Giorgio

    • comment-avatar

      Ciao,
      più che creare nuove API Key basta che aggiungi una riga per ogni url del sito o dominio che vuoi autorizzare nella lista che trovi cliccando sulla voce “Edit allowed referers…” nel tab “Api Access”.

  • comment-avatar

    Ciao,
    la mia mappa era perfettamente funzionante, ma quando ho copiato il codice in un altra pagina ed ho provato a modificarlo, di colpo la mappa è diventata interamente grigia e non utilizzabile.

    Non funziona nemmeno quella nella pagina col codice corretto.

    Il mio refer era impostato: *.miositoweb.com/*
    Le pagine si richiamano da miositoweb.com/pagina1 .. /pagina2 (per intenderci).

    Ho rigenerato la chiave e l’ho inserita aggiornata, ma ancora non funziona. Utilizzo API V3.

    Non mi appare nemmeno un messaggio.. niente.

    Grazie

    • comment-avatar

      Ho risolto.

      La Key non serve più… Probabilmente inserendo la mappa in una nuova pagina mi ha aggiornato tutto e quindi non funzionava più niente.

      Magica riga di codice!!

      Grazie comunque

  • comment-avatar

    La mia APi key visualizza l’indirizzo corretto, ma lo posiziona male sulla mappa, cosa posso fare?

  • comment-avatar

    If the keyword is not used enough, it may cause your business
    writing to become missed. Anything we want to find in the World
    Wide Web, many of the people are typing the keyword in the search box and finding the relevant and appropriate information they want.
    Moreover, a keyword should be distributed in the whole body of an article but in a natural way.

  • comment-avatar

    I’ve been exploring for a little for any high quality articles or blog posts
    in this sort of house . Exploring in Yahoo I eventually
    stumbled upon this web site. Studying this info
    So i’m satisfied to exhibit that I’ve an incredibly just right uncanny feeling I discovered just
    what I needed. I most unquestionably will make certain to don?t forget
    this website and provides it a glance on a
    constant basis.

  • comment-avatar
    Roberto 10 anni ago

    Complimenti per l’articolo; è veramente molto utile e chiaro.
    Navigando la mappa interattiva avrei bisogno di sapere dove mi trovo.
    Cioè volevo sapere se qualcuno può spiegarmi come ritornare i valori attuali di latitudine e longitudine che ovviamente cambiano durante la navigazione.

    Grazie mille

  • comment-avatar

    Thank you for another informative website. Where else may just I get that type of information written in such an ideal approach?
    I have a challenge that I am simply now working on,
    and I have been on the look out for such info.

    Have a look at my web-site Seo company india

  • comment-avatar

    I used to be suggested this blog by my cousin. I am no longer positive whether this publish is written by
    means of him as nobody else understand such specified about my difficulty.
    You are wonderful! Thank you!

  • comment-avatar

    wikipilipinas.org…

    Google Maps Api: otteniamo la API key per poter utilizzare le mappe sul nostro sito web | AppuntiSoftware.it…

  • comment-avatar
    jurij 9 anni ago

    Ciao, sto cercando di utilizzare google maps tramite netbeans in java su una interfaccia che sto costruendo.
    E’ possibile implementare la mappa direttamente sull’interfaccia o devo passare via web come hai illustrato?

    Grazie

  • comment-avatar

    Salve, vorrei sapere se è possibile fare la stessa cosa su una mappa basata su fusion tables

    new google.maps.FusionTablesLayer

    grazie in anticipo

    saluti

  • comment-avatar
    Daniele 8 anni ago

    Ciao,
    ho letto il tuo articolo anzitutto complimenti!
    Facendo dei test mi trovo un po in difficoltà perché, dopo aver richiesto correttamente la api key facendo una pagina di esempio mi viene restituito questo errore da Google:
    “Non è stato possibile visualizzare un elemento di Google Maps nella pagina. ”
    L’esempio l’ho copiato da https://developers.google.com/maps/documentation/javascript/examples/marker-remove.
    Hai idea di quale può essere il problema?
    Grazie 1000 e complimenti!
    Daniele

  • comment-avatar

    Buongiorno

    Da qualche tempo il plugin di wordpress “MapPress” mi chiede questa famigerata API Key.
    Ho letto con interesse il suo articolo, ma ad oggi Google ha cambiato completamente l’interfaccia e quindi risulta impossibile seguire le sue preziose indicazioni. Ad esempio non vi è traccia, tra le infinite API proposte di quella denominata “Maps API v3”.
    Le sarei quindi infinitamente grato se potesse riuscisse a darmi una mano.

    • comment-avatar

      Ciao,
      grazie per aver letto l’articolo, spero nei prossimi giorni di poter scriverne uno che descriva la nuova interfaccia e le nuove funzionalità implementate da Google.

      A presto

  • comment-avatar
    Antonio 6 anni ago

    Ciao,
    come faccio ad ottenere un report ogni x minuti in automatico da (per esempio) Google Maps?

    Grazie

  • comment-avatar

    Bell’articolo, grzie. Ne prendo atto.

  • comment-avatar

    Devo rileggerlo bene ed attentamente; spero di riuscire a capire ogni cosa. Grazie

  • comment-avatar
  • comment-avatar

    Guida pratica. Interessante, congratulazioni a chi lo ha scritto.