È comune imbattersi in un errore all’interno della console del browser che causa il blocco e la non visualizzazione delle Mappe di Google, soprattutto riguardante siti messi online nel 2016 e da allora non più aggiornati. L’errore in questione è Google Maps API error: MissingKeyMapError. Google, infatti, nel giugno del 2016 ha annunciato alcune importanti modifiche riguardanti l’autenticazione e i limiti di utilizzo delle Google Maps API.
Se stai utilizzando le API di Google Maps su localhost o se il tuo dominio non era attivo prima del 22 giugno 2016, sarà necessario richiedere una Google API Key da integrare allo script all’interno del proprio sito web. Riguardo ai siti già online prima del 22 giugno 2016, Google ha mantenuto attive le mappe, ma si consiglia comunque di integrare la chiave API per evitare future disattivazioni.
La cosa importante da considerare è che, con questo aggiornamento, ogni API Key gratuita darà la possibilità di usufruire di 25.000 caricamenti giornalieri per ciascun progetto (è comunque possibile creare più progetti) e, per molti grandi siti web, potrebbe essere addirittura necessaria l’attivazione di una licenza premium.
Questo aggiornamento ovviamente andrà a impattare su qualunque sito o applicazione, senza distinzioni di piattaforma (WordPress, Joomla, ecc) o plug-in.
Come risolvere il Missing Key Map Error sulle Google Maps
È possibile risolvere l’errore MissingKeyMapError seguendo alcuni passaggi ed effettuando la registrazione di una chiave Google Maps associata al proprio progetto web. Per effettuare questi passaggi è necessario avere accesso ai file del sito.
Creare una chiave API per le Google Maps tramite la Google Maps Platform
- Visita la pagina “Get an API Key“, dove troverai il percorso da compiere per richiedere una chiave di attivazione di Google Maps.
- Accedi alla console di Google Cloud Platform. Attraverso di essa potrai creare un account di fatturazione per poter usufruire dell API di Google Maps. Segui le indicazioni riportate nella guida “Get Started with Google Maps Platform” e effettua le seguenti operazione:
- Crea un account di fatturazione
- Crea un progetto
- Una volta creato un account di fatturazione, all’interno della Google Cloud Platform, clicca sul pulsante menu in alto a sinistra e seleziona “API e servizi” > “Credenziali”.
- Nella pagina Credenziali, clicca su “crea credenziali” e, nel sottomenu che si aprirà, seleziona “Chiave API”.
- Si aprirà una finestra in overlay con all’interno la chiave API che potrai utilizzare per il tuo sito web. Copiala.
- In caso tu stia lavorando in localhost o in un ambiente di produzione, clicca semplicemente “Chiudi” e vai al punto successivo. In caso tu stia creando una API Key per un sito già online, seleziona “Limita la chiave” e limitane la validità al tuo sito web. Ricordati di applicare sempre tale impostazione su un sito online per evitare che chiunque possa usare la tua API Key all’interno del proprio sito web, addebitando a te il traffico. Per limitare una API Key di Google Maps devi:
- Assegna un nome alla chiave, all’interno del campo “Nome”, così da poterla riconoscere in caso creassi più di una chiave.
- Nella sezione “Restrizioni delle applicazioni“, seleziona “Referrer HTTP (siti web)” e comparirà la sezione “Restrizioni relative ai siti web“: clicca su “Aggiungi un elemento” e indica l’url della home del tuo sito web, utilizzando il formato *.example.com/* sostituendo l’url della home al posto di “example.com“, così da applicare la chiave al dominio principale, ai suoi sottodomini e alle varie pagine del sito oltre alla home.
- Clicca su “Fine”.
- Clicca su “Salva”.
- Verrai redirezionato alla pagina “Credenziali”, che elenca tutte le chiavi API presenti nel tuo account, con associate la data di creazione e l’indicatore di utilizzo.
- Se non hai copiato la chiave o l’hai persa, ti basterà tornare sulla pagina “Credenziali” e cliccare, all’interno della colonna “Chiave” l’iconcina affianco alla chiave per copiarla nuovamente.
Inserire la chiave API all’interno del proprio sito web
Individuare il file contenente il codice che richiama il Google Maps Script sul proprio sito web e aggiungere la chiave API come parametro:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>Se non fossero presenti ulteriori parametri, aggiungere semplicemente ?key=YOUR_API_KEY alla fine del percorso di src; in caso contrario, aggiungere invece &key=YOUR_API_KEY in questo modo:
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>Ovviamente, in entrambi i casi è necessario sostituire YOUR_API_KEY con l’API Key vero e proprio. La chiave API a questo punto è stata inserita e sarà funzionante in breve tempo.
“Ho un sito web vecchio e non visualizzo più le Google Maps” ― L’occasione per rinnovare la tua immagine online
Se il sito web della tua attività ha ormai diversi anni e dopo l’aggiornamento del 22 giugno ha smesso di visualizzare le Google Maps, è forse arrivata l’ora di considerare un restyling per mantenerlo al passo con i tempi.
Un sito web funzionante, che si visualizza correttamente sui dispositivi mobile e che rende possibile all’utente trovare facilmente la tua attività tramite le mappe di Google può fare davvero la differenza per la tua attività. Richiedi informazioni e una consulenza per realizzare un sito web su misura per il tuo business e rendi più facile ai tuoi clienti trovarti.
