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 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 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 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 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 API key, clicchiamo nel menu a sinistra sulla voce Access:

Recuperiamo la API key generata

la chiave generata automaticamente è utilizzabile su qualsiasi sito, poichè è visibile in chiaro, quindi anche altre persone che individuano la nostra chiave sul nostro sito potrebbero utilizzarla per i loro scopi, compromettendo sia le statistiche dei report generati sia il limite di utilizzo a noi assegnato. Per evitare questo “pericolo” possiamo restringere il campo di utilizzo della nostra chiave per determinati siti o domini, lo possiamo fare sempre nel tab Api Access 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

1 Stella2 Stelle3 Stelle4 Stelle5 Stelle (4 voti, media: 4,00 di 5)
Loading...
You can leave a response, or trackback from your own site.

47 Responses to “Google Maps Api: come ottenere la API key per poter utilizzare le mappe sul nostro sito web”

  1. mario ha detto:

    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

    • angeloonline ha detto:

      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.

  2. Anto ha detto:

    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?

    • angeloonline ha detto:

      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 🙂

  3. diaspillo ha detto:

    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

  4. jo ha detto:

    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

    • angeloonline ha detto:

      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 🙂

      • jo ha detto:

        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.

        • jo ha detto:

          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

          • jo ha detto:

            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

  5. Marjo ha detto:

    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

    • angeloonline ha detto:

      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.

  6. Marjo ha detto:

    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

  7. Raffaele ha detto:

    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

  8. Paolo ha detto:

    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

  9. andrea g ha detto:

    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

  10. sara ha detto:

    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

    • luca ha detto:

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

      • angeloonline ha detto:

        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 🙂

  11. luca ha detto:

    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

    • angeloonline ha detto:

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

  12. 散熱風扇 ha detto:

    I have an excited synthetic vision pertaining
    to detail and can anticipate issues prior to they will take place.

  13. Right now customers will get $7 off and free shipping on any $200 purchase on Overstock.
    Enjoy saving with home depot promo code plus free shipping.
    New York & Company has released their 2012 Black Friday ad
    and it may not be one of the longest, but it has some of the biggest announcements.

  14. luca ha detto:

    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

  15. Sara ha detto:

    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

  16. Giorgio ha detto:

    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

    • angeloonline ha detto:

      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”.

  17. eli ha detto:

    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

    • eli ha detto:

      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

  18. Legalshield ha detto:

    I’m not sure where you’re getting your info, but good topic.

    I needs to spend some time learning much more or understanding more.
    Thanks for great info I was looking for this information for
    my mission.

    Also visit my webpage; Legalshield

  19. Antonio ha detto:

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

  20. 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.

  21. 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.

  22. coupons 2014 ha detto:

    If some one wants to be updated with holttest technologies after that hhe must
    be go tto seee this web page and be up to date every day.

    Feel free to visit my web site: coupons 2014

  23. Roberto ha detto:

    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

  24. Seo company india ha detto:

    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

  25. Reginald ha detto:

    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!

  26. wikipilipinas.org ha detto:

    wikipilipinas.org…

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

  27. jurij ha detto:

    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

  28. andrea ha detto:

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

    new google.maps.FusionTablesLayer

    grazie in anticipo

    saluti

  29. Daniele ha detto:

    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

  30. Mamilio ha detto:

    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.

    • angeloonline ha detto:

      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

Leave a Reply

*