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
- Premi il bottone azzurro GET A KEY
- 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
- 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
- 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"
Articoli correlati
Comments (0)