![Google Maps API error: MissingKeyMapError [RISOLTO]](https://www.latecnosfera.com/wp-content/uploads/2016/06/Google-Maps-Errore.jpg)
Google Maps API error: MissingKeyMapError [RISOLTO]
Stai impazzendo a causa dell’errore Google Maps API error: MissingKeyMapError, apparso improvvisamente nella console del tuo browser?
In questo articolo troverai tutto quello che devi sapere per sbarazzartene una volta per tutte.
Contenuti
- Da cosa è causato l’errore?
- Come correggere l’errore: guida passo-passo
- Non sono un programmatore, cosa posso fare?
- Come gestire le tue chiavi API
- Risoluzione dei problemi
Da cosa è causato l’errore
La risposta ce l’ha fornita direttamente un dipendente Google:
Abbiamo appena annunciato alcuni cambiamenti relativi ad autenticazione e limitazioni dell’utilizzo delle API di Google Maps: http://googlegeodevelopers.blogspot.it/2016/06/building-for-scale-updates-to-google.html
L’utilizzo delle nuove API di Google Maps richiede ora una chiave.
Se state utilizzando Google Maps API su localhost, oppure il vostro dominio non era ancora attivo prima del 22 Giugno 2016, vi servirà una chiave per proseguire. Per risolvere il problema, per favore seguite le istruzioni delle API di Google Maps per ottenere una chiave ed aggiungerla alla vostra applicazione: https://developers.google.com/maps/documentation/javascript/get-api-key
Se il dominio che state già utilizzando era attivo da prima del 22 Giugno 2016, potrete ancora utilizzare le API di Google Maps senza dover inserire alcuna chiave (in tal caso, l’errore MissingKeyMapError potrebbe essere dovuto ad un bug).
Riassumendo, se non stavi già utilizzando Google Maps sul tuo dominio prima del 22 Giugno 2016, sarai costretto a procurarti una chiave API per sbarazzarti di questo fastidioso errore, che impedisce il corretto funzionamento di Google Maps.
Ricordati che ogni chiave viene concessa con un limite di 25000 visualizzazioni di mappa giornaliere per progetto. Se il tuo sito ha un traffico superiore, potresti dover considerare l’acquisto di un piano premium.
Ovviamente, tutte queste considerazioni valgono per qualsiasi ambiente di sviluppo, a prescindere dalla piattaforma (WordPress, Joomla, etc.) o dai plugin utilizzati.
Come correggere l’errore: guida passo-passo
Non aver paura, ottenere una chiave e integrarla è davvero semplicissimo, e non richiede che pochi secondi:
1. Fai clic su questo collegamento, quindi su Get a key:
Google Maps APIs – Ottenere una chiave
2. Seleziona un progetto esistente, oppure creane uno nuovo, accetta i Termini d’utilizzo del servizio e fai clic su Enable API:
Google Maps API – Abilita le API javascript
3. Copia la chiave appena generata e, opzionalmente, restringi il suo utilizzo soltanto ai siti autorizzati tramite la API Console (se è la prima volta, ti consiglio di non apportare alcuna restrizione):
Google Maps API – Copia la chiave generata
4. Individua sul tuo sito il file in cui viene incorporato lo script per il caricamento di Google Maps, quindi aggiungi la nuova chiave come parametro:
<script src="//maps.googleapis.com/maps/api/js?key=LA_TUA_API_KEY" async="" defer="defer" type="text/javascript"></script>
Se non sono presenti altri parametri, aggiungi ?key=LA_TUA_API_KEY alla fine del percorso nel campo src; in caso contrario, aggiungi invece &key=LA_TUA_API_KEY, in questo modo:
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=LA_TUA_API_KEY" async="" defer="defer" type="text/javascript"></script>
Ovviamente, in entrambi i casi devi sostituire LA_TUA_API_KEY con il codice effettivo della tua chiave.
5. La tua chiave API sarà attiva e funzionante entro massimo cinque minuti!
Non sono un programmatore, cosa posso fare?
Non preoccuparti! Devi soltanto segnalare questo problema (e soluzione) allo sviluppatore della piattaforma, plugin o tema che stai utilizzando, il quale auspicabilmente si occuperà di apportare al codice le modifiche richieste, fornendoti una comoda interfaccia grafica in cui inserire la tua chiave API (ottenuta seguendo le istruzioni fornite nella sezione precedente).
Se lo sviluppatore in questione non parla italiano, puoi indirizzarlo direttamente alla traduzione in inglese di questo articolo.
AGGIORNAMENTO: Se stai utilizzando WordPress, mentre attendi una correzione ufficiale da parte degli sviluppatori del tuo tema/plugin, potresti provare ad utilizzare questo plugin come workaround temporaneo. Installalo, vai in Impostazioni > Google API KEY ed inserisci la tua chiave API (segui il tutorial qui sopra per ottenerne una).
Come gestire le tue chiavi API
Puoi gestire tutte le tue chiavi API attraverso la Google Developer Console.
Effettua il login, seleziona il tuo progetto nella barra di navigazione, quindi clicca su Credentials e modifica/elimina le tue chiavi API utilizzando gli appositi bottoni sulla destra:
Google Maps API – Gestione API keys
Ad esempio, potresti restringere l’utilizzo delle tue API keys ad alcuni siti specifici, proteggendo così la tua quota giornaliera da qualsiasi utilizzo non autorizzato:
Google Maps API – Restringere l’utilizzo delle chiavi
Risoluzione dei problemi
Ecco alcuni errori comuni che potresti incontrare nella console del tuo browser durante l’integrazione di Google Maps.
Google Maps API error: RefererNotAllowedMapError
Questo errore appare quando l’URL del dominio in cui è presente il codice di Google Maps non è stato elencato tra i siti web consentiti per la chiave API in uso. Modifica la tua chiave API e aggiungi il dominio alla lista dei siti consentiti. Se vuoi consentire l’utilizzo della chiave API su qualsiasi sito, inserisci invece un * all’interno del campo, o lascialo vuoto (qualora l’asterisco dovessi riscontrare problemi).
Ulteriori informazioni nell’articolo dedicato.
Google Maps API error: ApiNotActivatedMapError
Questo errore compare se non hai abilitato la Google Maps JavaScript API nel tuo progetto. Abilitala dalla Google API Console.
Uncaught ReferenceError: google is not defined
Ricordati che non puoi accedere all’oggetto “google” se non hai caricato prima il tuo script di Google Maps. Ci sono diversi modi per farlo:
- Carica il tuo script di Google Maps prima di accedere all’oggetto “google”, assicurandoti che nella linea di incorporamento del file javascript non siano presenti gli attributi async e defer.
- Accedi all’oggetto “google” da una funzione che verrà invocata soltanto dopo che lo script di Google Maps è stato scaricato, aggiungendo il parametro &callback=nomeDellaTuaFunzione alla fine di esso, in questo modo:
<script src="//maps.googleapis.com/maps/api/js?key=LA_TUA_API_KEY&callback=nomeDellaTuaFunzione" async="" defer="defer" type="text/javascript"></script>
Failed to load resource: net::ERR_FILE_NOT_FOUND – file://maps.googleapis.com/maps/api/js…
Se stai testando il tuo sito su localhost, devi creare un server locale, oppure aggiungere https: all’inizio dell’URL dello script di Google Maps, così:
<script src="https://maps.googleapis.com/maps/api/js?key=LA_TUA_API_KEY" async="" defer="defer" type="text/javascript"></script>
Se non lo fai, il tuo browser cercherà il file javascript sul tuo computer, anziché utilizzare i protocolli http/https.
You don’t have permission to create an API key
Questo messaggio appare durante la creazione di una nuova chiave API, e indica generalmente la necessità di creare nuove credenziali prima di procedere. Ecco come fare:
- Fai clic sul link Credentials nella barra a sinistra
- Clicca sul bottone Create credentials
- Seleziona l’opzione API Key
- Fai clic sul bottone Browser key nel popup che si aprirà.
A questo punto sarai riportato alla creazione della chiave API e potrai procedere senza errori.
Google Maps API error: UrlAuthenticationCommonError
Consulta l’articolo dedicato.
Al posto della mappa c’è solo uno spazio bianco, ma la console del browser non mostra alcun errore
Prova a disattivare eventuali plugin di caching/minificazione, se presenti.
Guarda, intanto voglio nuovamente ringraziarti per la tua disponibilità. Provo a mettere in pratica i tuoi suggerimenti e ti aggiorno al più presto.
Comunque vada, grazie!
RISOLTO!
Il tuo supporto è stato davvero FONDAMENTALE per riuscire a uscire da questo intoppo (che avevo anche già segnalato allo sviluppatore, inutilmente!).
Ancora GRAZIE 1000!!!
Fantastico! 🙂
Ciao e complimenti per l'articolo,
io ho un problema simile su un sito in Joomla 3 dove è installato un componente per agenzie immobiliari (JEA):
lo stesso sito è caricato su due server differenti, in uno mi fa visualizzare le mappe delle proprietà senza problemi, nell'altro (acquistato recentemente) no e quest'ultimo hosting ha verificato che non dipende dal loro server.
Succede questo:
Le mappe compaiono per un istante e subito dopo lasciano il posto alla solita scritta "MissingKeyMapError" (che poi è lo stesso errore che mi viene indicato nella console di google).
Una API KEY io l'avevo già attivata a marzo 2015 (e mi pareva di non aver impostato limiti riguardo i siti).
Ora mi sembra di non poter fare altro che creare un nuovo progetto o eliminarne uno esistente. Io ho creato un nuovo progetto indicando il sito (dove non funziona) ma il problema citato all'inizio è rimasto.
Hai qualche suggerimento?
Un grazie anticipato.
Buongiorno Enrico,
probabilmente il sito 'più vecchio' funziona senza problemi per il motivo sopra elencato, ovvero, essendo attivo da prima del 22 Giugno 2016, non necessita di alcuna API key correttamente configurata.
Per quanto riguarda invece il nuovo dominio, dovrai generare una nuova chiave seguendo la procedura qui indicata, per poi aggiungerla al codice (oppure via interfaccia grafica. Così facendo, l'errore dovrebbe sparire!
Ciao Emanuele, ti ringrazio intanto per la veloce risposta,
il fatto è che, invece di creare una nuova API KEY, mi chiede solo se voglio creare un nuovo progetto o aprirne uno già esistente. Ho provato a fare entrambe le cose, senza successo.
Caspita, ho notato ora che hanno appena cambiato tutta l'interfaccia grafica!
Dovrò aggiornare tutta la procedura…
Nel frattempo, prova a fare così. Vai al seguente indirizzo:
https://console.developers.google.com
Seleziona il progetto che hai creato poco fa nella barra in alto, quindi "Credenziali" nella sidebar a sinistra.
Nella tab Credenziali, verifica la presenza della chiave, e copiane il valore riportato sotto alla colonna 'Chiave'.
Se invece non è presente alcuna chiave, clicca su "Crea credenziali" e quindi fai clic su "Chiave API" per crearne una.
Ora non ti resta che inserirla sul tuo sito!
P.S. Entro qualche ora dovrei riuscire ad aggiornare l'articolo con la procedura relativa alla nuova interfaccia.
Ti ringrazio per i consigli che mi stai dando, il mio problema con questa benedetta chiave non è come ottenerla, ma come utilizzarla: il componente di cui ti parlavo non ha un posto dove inserirla e nel sito non ho trovato dove metterla! Avevo già provato ad inserire lo script nell'index.php del template, ma oltre a non funzionare, mi aggiungeva un altro errore!
Ah scusami, non avevo capito che fosse questo il problema!
Attenzione, allora: non devi inserire un altro script nel template, bensì modificare la riga di codice dov'è contenuto quello di prima, altrimenti (come hai detto tu) non farai che aggiungere un altro errore al precedente!
Dando una rapida occhiata al codice del plugin in questione (JEA), sembra che ti basti sostituire questa stringa:
http://maps.google.com/maps/api/js?sensor=false&language=
con:
http://maps.google.com/maps/api/js?sensor=false&key=LA_TUA_CHIAVE&language=
nel file:
admin/models/fields/geolocalization.php
E sostituire questo codice:
http://maps.google.com/maps/api/js?sensor=false& amp;language=
con questo:
http://maps.google.com/maps/api/js?sensor=false& amp;key=LA_TUA_CHIAVE& amp;language=
(scusa ho dovuto mettere uno spazio tra i vari & e amp; poichè i commenti sono in html interpretato, se non l'avessi fatto mi avrebbe cancellato parti… fai finta che quello spazio non ci sia!)
in questi due file:
site/views/properties/tmpl/searchmap.php
site/views/property/tmpl/default_googlemap.php
Ricordati di inserire ovviamente la tua chiave effettiva al posto della stringa LA_TUA_CHIAVE, e che ad ogni aggiornamento del plugin dovrai ripetere il procedimento o il codice tornerà come prima.
Il consiglio è comunque quello di scrivere allo sviluppatore e segnalargli il problema (il link alla versione in inglese di questo articolo lo trovi più sopra, nella sezione 'non sono un programmatore'), cosicché possa inserire un campo via interfaccia grafica.
Segui le istruzioni attentamente e fammi sapere se funziona!
Ciao, a me da errore "Google Maps API error: RefererNotAllowedMapError" il fatto è che al momento il sito web è in una cartalla del dominio www.dominio.com/cartella/
ho provato sia ad aggiungere "www.dominio.com" che "www-dominio.com/cartella/" come domini autorizzati, ma continua a darmi lo stesso errore…
Hai qualche consiglio?
Prova a mettere dominio.com soltanto (senza www)
Sono riuscito a risolvere, ho dovuto mettere sia il dominio con il www.dominio.com, dominio.com (senza dominio) e dominio con http://www.dominio.com
non capisco ma va bene così, grazie!
In realtà penso sia stato solo il dominio senza www a fare la differenza (dominio.com e basta)… se ti va di fare esperimento, potresti provare a lasciare solo quello!
Anche io pensavo fosse così, infatti inizialmente non capivo perché non funzionasse dato che ero certo fosse necessario inserire il dominio senza il www. iniziale…
Ho capito… un'ultima cosa, nel caso in cui ti dovesse servire: quando modifichi le chiavi API, ricordati di aspettare sempre almeno 5 minuti per essere certo che le modifiche siano state applicate!
Ho trovato alcune spiegazioni interessanti nella documentazione ufficiale di Google, e scritto un articolo interamente dedicato all'argomento:
https://www.latecnosfera.com/2016/08/google-maps-api-error-referernotallowedmaperror-risolto.html
Complimenti per l'articolo! Chiaro, semplice, preciso, completo. Mi è stato veramente utile.
Ne sono felice! 🙂