Telefono: +39 392 33 73 731

Errore javascript di inclusione mappa Google Maps

Se stai leggendo questa pagina, probabilmente cerchi di risolvere un problema con Google Maps, nel tuo sito nuovo appare un riquadro grigio con il messaggio: Spiacenti, si è verificato un problema. Google Maps non è stata caricata correttamente. Per dettagli tecnici consulta la console Javascript.

E nella console hai trovato un errore: MissingKeyMapError.

Il problema ti sembrerà strano, perché nei siti vecchi tutto continua a funzionare, e non è la prima volta che includi una mappa. Non ti preoccupare, è una novità del 22 giugno 2016, Google adesso ci obbliga ad usare una API Key valida. L'effetto non è retroattivo, quindi le mappe incluse alla vecchia maniera continuano a funzionare nei siti già pubblicati.

La cosa è un po' fastidiosa ma è di facile soluzione, se stai usando il modulo per un CMS, cerca un update o contatta lo sviluppatore, probabilmente non si è ancora accorto del problema e non ha aggiornato il modulo. Se vuoi risolvere da solo correggendo il modulo, o vuoi inserire a mano una mappa, allora devi seguire le istruzioni fino alla fine.

In ogni caso, prima di tutto, bisogna creare una API Key, e il link è questo: https://developers.google.com/maps/documentation/javascript/get-api-key

Aggiornamento marzo 2017: la procedura è stata semplificata.

  1. Premi il bottone azzurro GET A KEY
  2. Puoi selezionare "no" al primo radio button, per l'accettazione di notifiche di update. Però devi scegliere "si" sull'accettazione dei termini di servizio e poi premi il bottone AGREE AND CONTINUE
  3. Nel campo "Name" inserisci qualcosa di comprensibile per te, per esempio "Mappa di Pippo", poi nel campo HTTP referrers devi inserire il tuo dominio, aggiungi alla fine un asterisco (wildcard), così anche le pagine interne del sito potranno usare la mappa. Premi il bottone CREATE
  4. Copia la chiave alfanumerica che viene generata.

A questo punto puoi usare questa chiave nel codice html generato per l'inclusione, cerca nel path dello script la dicitura "LA_TUA_API_KEY" e sostituiscila con il codice. E' qualcosa come il codice seguente:

src="//maps.googleapis.com/maps/api/js?key=LA_TUA_API_KEY&callback=initMap"
Sabato 16 Luglio 2016
(3 commenti)

Commento di Andrea Bizioli

Martedì 13 Settembre 2016

Altro ottimo post, utile come sempre.
Segnalo che l'estensione "dlh_googlemaps" è stata aggiornata per risolvere il problema, permettendo di inserire l'API Key nella root page della struttura sito di Contao

Commento di omar

Mercoledì 26 Aprile 2017

Salve, ho creato la api key e il link generato provo ad inserirlo in apposito settore del mio sito inerente la sezione del theme options. quando aggiorno la pagina sia che il sito rimanga in locale, sia che lo metta online, l'errore non viene risolto.
Non sono un informatico e non saprei mettere mano al codice. utilizzo wp e vorrei evitare di ricorrere al solito plug-in.
potete darmi una mano o un consiglio?
grazie

Risposta di Marco

Purtroppo non posso sapere come è stato fatto il tema in questione, e quindi scoprire se c'è davvero un errore nel codice oppure si tratta solo una configurazione errata, bisognerebbe metterci mano.
Ho notato che Google ha semplificato la generazione API Key, ora basta premere il bottone e ti danno subito il codice.
Per recuperarlo vai nella tua Developer Console https://console.developers.google.com/ dovresti subito vedere la gestione del tuo progetto (avendone uno solo), oppure usa la linguetta in alto (a destra del logo "Google APIS"), e scegli il progetto corretto. Nel menu contestuale che appare a sinistra hai: "Dashboard", "Libreria", "Credenziali". Premi "Credenziali", e dovresti vedere una lista "Chiavi API" con la tua chiave e la data di creazione. Controlla che sia giusta e copiala nuovamente. Puoi anche modificare i parametri con il bottone a destra (matita) e sotto "restrizione chiave" assicurati che sia impostato "nessuno", o che il referrer sia corretto, forse una restrizione sbagliata ti da problemi. Puoi anche premere il tasto "rigenera chiave", se non funziona ancora prova a eliminarla e rifare tutto. Prova anche a controllare se per caso Wordpress stia usando un qualche plugin di cache (quindi ripuliscila), guarda il codice sorgente della pagina per scoprire se la chiave c'è davvero quando viene richiamato lo script di Google Maps. Oppure prova un plugin che usa mappe, se quello funziona allora è colpa di un errore nel tema.

Commento di Corrado

Sabato 19 Agosto 2017

Grazie:)

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento