Come aggiungere una mappa di Google a una pagina Web con API

Questo articolo spiega come inserire una mappa di Google con un indicatore di posizione nella tua pagina web. Questo processo include l'ottenimento di una chiave software speciale da Google e l'aggiunta del JavaScript pertinente alla pagina.

Ottieni una chiave API di Google Maps

Per proteggere i suoi server dall'essere bombardati da richieste di mappe e ricerche di posizioni, Google limita l'accesso al suo database di Maps. Devi registrarti con Google come sviluppatore per ottenere una chiave univoca per utilizzare l'interfaccia di programmazione dell'applicazione per richiedere dati dai server di Maps. La chiave API è gratuita a meno che non sia necessario un accesso intensivo ai server di Google (ad esempio, per sviluppare un'app Web).

Per registrare la tua chiave API:

1. Vai al Console della piattaforma Google Cloud e, dopo aver effettuato l'accesso con il tuo account Google, crea un nuovo progetto o selezionane uno esistente.

2. Clic Continua per abilitare l'API e tutti i servizi correlati.

3. Sul Credenziali pagina, ottieni un Chiave API. Se necessario, impostare le restrizioni pertinenti sulla chiave.

4. Proteggi la tua chiave API usando migliori pratiche consigliato da Google.

Inserisci JavaScript nella tua pagina web

Inserisci il seguente codice nella tua pagina Web, nella sezione BODY del documento HTML:

// Inizializza e aggiungi la funzione map initMap() {
// La posizione del flag var flag = {lat: XXX, lng: YYY};
// La mappa, centrata su flag var map = new google.maps. Map( document.getElementById('map'), {zoom: 4, center: flag});
// Il marker, posizionato su flag var marker = new google.maps. Marker({posizione: bandiera, mappa: mappa}); } src=" https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">

In questo codice, modifica quanto segue:

• Sostituire bandiera con un nome che fa riferimento alla posizione che stai bloccando. Sii semplice e breve (come casa o ufficio o Parigi o Detroit). Puoi eseguire questo codice lasciando bandiera così com'è, ma la modifica del nome supporta il riutilizzo di questo codice nella stessa pagina, per incorporare diverse mappe.
• Sostituire XXX e YYY con la latitudine e la longitudine, in decimali, della posizione dell'indicatore della mappa. È necessario sostituire questi valori affinché la mappa venga visualizzata correttamente. Un modo semplice per trovare la latitudine e la longitudine è aprire Google Maps e fare clic con il pulsante destro del mouse sulla posizione precisa che si intende contrassegnare. Nel menu contestuale, seleziona Cosa c'è qui? per visualizzare la latitudine e la longitudine.
• Sostituire LA TUA_API_KEY con la chiave API che hai ottenuto da Google. Non inserire spazi tra il segno di uguale e la e commerciale. Senza la chiave, la query avrà esito negativo e la mappa non verrà visualizzata correttamente.

Pratiche ottimali

Nella parte superiore del documento HTML, specifica i vincoli CSS per la mappa, inclusi dimensionamento, colori e posizionamento della pagina.

Lo script della mappa di Google contiene attributi come Ingrandisci e centro che sono aperti alla modifica dell'utente finale. Questa tecnica più avanzata è supportata dalla documentazione per gli sviluppatori di Google.

Un'API di Google Maps è una risorsa preziosa. Le istruzioni sulle best practice di Google offrono ottimi consigli per proteggere la chiave dall'uso improprio da parte di altri. Una sicurezza adeguata è particolarmente importante se hai impostato un sistema di pagamento per l'accesso API, poiché potresti dover affrontare una bolletta salata se le tue credenziali vengono rubate. In particolare, l'esempio che abbiamo mostrato qui non incorporare la chiave API direttamente nel codice: l'abbiamo fatto allo scopo di dimostrare la procedura. In un ambiente di produzione, tuttavia, è meglio specificare le variabili di ambiente per la chiave invece di inserirla direttamente.