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



di

Per inserire una mappa di Google con un indicatore di posizione nella tua pagina web, dovrai acquisire una chiave software speciale da Google, quindi aggiungere il JavaScript pertinente nella pagina. Sebbene il processo sia semplice, è utile avere almeno una conoscenza di base superficiale di HTML e JavaScript.


Ottieni una chiave API di Google Maps

Per proteggere i suoi server dal bombardamento di richieste di mappe e ricerche di posizione, 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 pesante ai server di Google (ad esempio, per sviluppare un'app Web).

Per registrare la tua chiave API:

  1. Vai alla console di Google Cloud Platform e, dopo aver effettuato l'accesso con il tuo account Google, crea un nuovo progetto o selezionane uno esistente.

  2. Dacci un'occhiata cliccando Continua per abilitare l'API e tutti i servizi correlati.

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

  4. Proteggi la tua chiave API utilizzando le best practice consigliate da Google.

Se ritieni di dover visualizzare la mappa più spesso di quanto consentito dalla tua quota gratuita, imposta un accordo di fatturazione con Google. È improbabile che la maggior parte dei siti Web, soprattutto blog a basso traffico o siti di nicchia, consumino gran parte dell'assegnazione delle quote.


Inserisci JavaScript nella tua pagina web

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

<div id = "map"> </div>
<Script>
// Inizializza e aggiunge la mappa
function initMap () {
// La posizione della bandiera
flag var = {lat: XXX, lng: YYY};
// La mappa, centrata sulla bandiera
var map = new google.maps.Map (
document.getElementById ('map'), {zoom: 4, center: flag});
// Il marker, posizionato sulla bandiera
var marker = new google.maps.Marker ({position: flag, map: map});
}

<script async defer
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Pagine utili:

Informazioni sul formato .map

Lascia un commento