Tutorial API JavaScript di Google Maps: aggiungi una mappa personalizzata al tuo sito web

Tutorial API JavaScript di Google Maps: aggiungi una mappa personalizzata al tuo sito web

Tutorial API JavaScript di Google Maps: aggiungi una mappa personalizzata al tuo sito web
СОДЕРЖАНИЕ
02 июня 2020

Google Maps ci aiuta ogni giorno a navigare attraverso le strade e a trovare luoghi in modo inimmaginabile solo pochi decenni fa. Non è solo utile nella ricerca di indicazioni stradali, ma vediamo anche molti esempi di mappe utilizzate per la visualizzazione dei dati, come il recente numero di siti Web che utilizzano mappe per visualizzare la diffusione di COVID-19 in tutto il mondo. Oggi scopriamo come possiamo utilizzare l’API JavaScript di Google Maps per creare mappe personalizzate per i nostri siti Web e applicazioni.


Potresti chiederti perché dovremmo scavare nell’API JavaScript di Google Maps per creare mappe quando possiamo usare a Mappa statica invece, o usa uno dei plugin WordPress disponibili per farlo senza il fastidio della codifica.

Naturalmente, entrambe sono opzioni eccellenti quando si desidera visualizzare alcune sedi di attività commerciali sul proprio sito Web. Ma l’API JavaScript di Google Maps ti offre un maggiore controllo per i momenti in cui desideri creare una mappa personalizzata con maggiore complessità rispetto a un plug-in pre-costruito.

Tutorial API JavaScript di Google Maps

Se non si desidera dedicare tempo alla programmazione e si desidera un modo più semplice per visualizzare le mappe sul proprio sito Web, si consiglia di Blocco di Google Maps da Otter.

Ottenere la chiave API JavaScript di Google Maps

Prima di iniziare, dobbiamo prima ottenere una chiave API per Google Maps. Puoi ottenerlo da Qui. L’API di Google Maps non è completamente gratuita, ma viene fornita con un piano gratuito che è sufficiente per la maggior parte dei casi.

Hai le chiavi API? Prendi la terza uscita dalla rotonda e continua con il tutorial. ��

Creazione di una mappa semplice

Un'istanza di base di Google Maps con impostazioni predefinite.Un’istanza di base di Google Maps con impostazioni predefinite.

Innanzitutto, costruiamo una semplice mappa di Google per iniziare. Sebbene sia possibile separare JavaScript e CSS, in questo tutorial stiamo utilizzando un singolo file HTML. Ecco la struttura che useremo:

html>
<html>
<testa>
<titolo>Maptitle semplice>
<meta name ="viewport" = contenuto"iniziale scala = 1,0">
<meta charset ="utf-8">
<stile>
#carta geografica {
altezza: 100%;
}

html, body {
altezza: 100%;
margine: 0;
imbottitura: 0;
}
stile>
testa>
<corpo>
<div id ="carta geografica">div>
<copione>
lascia la mappa;
funzione initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centro: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}
copione>
<script src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" differimento asincrono>copione>
corpo>
html>

Una volta caricata l’API di Google Maps, chiama la funzione initMap che inizializza la mappa. Se suddividiamo ulteriormente il nostro codice, utilizziamo un div vuoto con un ID di mappa per dichiarare dove vogliamo rendere la mappa.

lascia la mappa;
funzione initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centro: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}

Nel nostro JavaScript, in primo luogo, impostiamo una variabile della mappa al di fuori della funzione, quindi fa parte dell’ambito globale in modo da poter modificare la mappa in un secondo momento. Nella nostra funzione initMap, dichiariamo prima una nuova mappa di Google e la impostiamo per il rendering chiamando l’elemento con l’ID della mappa. Successivamente, specifichiamo le nostre opzioni, che sono il centro della mappa e il livello di zoom.

Usiamo le coordinate della City di Londra, un punto di riferimento storico nel centro di Londra, come centro della mappa. Più avanti, discuteremo come è possibile utilizzare l’API di Maps per trovare le coordinate di qualsiasi posizione sulla mappa. Ma per ora, se sei curioso, puoi usare latlong.net per trovare rapidamente le coordinate di qualsiasi indirizzo.

Tipi di mappe

Ora che disponiamo di una mappa di base, possiamo esaminare le opzioni di personalizzazione fornite dall’API JavaScript di Google Maps. La prima opzione che useremo è tipo di mappa. Google Maps supporta quattro tipi di mappe, che sono:

  • roadmap: la mappa predefinita che di solito vedi.
  • satellite: vista satellitare di Google Maps e Google Earth, se disponibile.
  • ibrido: un mix di roadmap e vista satellitare.
  • terreno: una mappa basata su informazioni sul terreno, come montagne e valli.

Nelle opzioni delle nostre mappe, possiamo aggiungere una proprietà mapType per selezionare la vista che vogliamo, in questo modo:

map = new google.maps.Map (document.getElementById (‘map’), {
centro: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: ‘ibrido’
});

Per il nostro esempio, stiamo usando una mappa ibrida. Puoi sperimentare diversi tipi per vedere quale si adatta al tuo caso d’uso.

Opzioni della mappa

Dopo il tipo di mappa, arriviamo a controlli della mappa. Google Maps ti consente di utilizzare uno qualsiasi dei suoi sei controlli nelle tue mappe. È possibile trovare un elenco dei controlli sul loro sito web.

È possibile specificare il controllo che si desidera utilizzare e la sua posizione, se necessario, in questo modo:

map = new google.maps.Map (document.getElementById (‘map’), {
centro: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: ‘ibrido’,
scaleControl: true,
fullscreenControlOptions: {
posizione: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Abilitiamo scaleControl, che mostra la scala della mappa in fondo a fianco dei diritti d’autore di Google, dichiarandola VERA. E nella riga successiva, cambiamo l’aspetto di fullscreenControl dalla posizione predefinita in alto a destra in fondo a destra usando la proprietà fullscreenControlOptions. Allo stesso modo, è possibile regolare la posizione di altri controlli.

Vuoi un controllo che fa qualcosa di diverso da quelli integrati? Non preoccuparti, Google Maps ti consente anche di creare controlli personalizzati per la tua mappa.

Parliamo di marcatori!

Aggiunta di un marcatore

I marker sono fantastici e consentono di creare molte applicazioni interattive con una mappa. Ad esempio, alcuni siti Web di prenotazione di hotel utilizzano indicatori per mostrare la posizione degli hotel su una mappa. E sono anche molto facili da aggiungere.

LET’S aggiungi un marcatore al London Bridge con il seguente codice:

let marker = new google.maps.Marker ({
posizione: {
lat: 51.506821,
lng: -0.0879
},
mappa: mappa,
titolo: “London Bridge”
});

Come puoi vedere sopra, il codice per il nostro marker ha tre proprietà. Il primo sono le coordinate. Successivamente, passiamo la variabile della mappa in cui abbiamo memorizzato la nostra mappa all’inizio e, infine, passiamo il titolo del marcatore.

Puoi anche passare l’URL a un’icona di marcatore personalizzata con una proprietà icona nel blocco di codice sopra riportato.

Aggiunta di una finestra informativa

Potresti trovare qualcosa che manca ai nostri marcatori. Di solito, quando fai clic su un indicatore sulla mappa, ti mostra un popup con maggiori dettagli. Quel popup è un componente diverso in sé che si chiama un InfoWindow.

Google Maps con un marcatore personalizzato.Google Maps con un marcatore personalizzato.

Fortunatamente per noi, è molto semplice collegare una InfoWindow al nostro marker.

let infoWindow = new google.maps.InfoWindow ({
contenuto: ‘

ponte di Londra


});

marker.addListener (‘click’, function () {
infoWindow.open (mappa, indicatore);
});

Innanzitutto, creiamo una nuova variabile infoWindow che memorizza il nostro componente InfoWindow. Gli passiamo solo una proprietà del contenuto che contiene l’HTML che mostra una volta cliccato. Successivamente, aggiungiamo un listener di eventi on-click al nostro marker, che gli dice di aprire la finestra info quando si fa clic sul marker.

Proprio così, puoi utilizzare un indicatore e una finestra informativa per creare esperienze interattive con la tua mappa.

Ora è il momento giusto per fermarsi un secondo e guardare indietro ai progressi che abbiamo fatto. In solo 30 righe di codice, abbiamo utilizzato l’API JavaScript di Google Maps per creare una mappa personalizzata con marcatori e caselle informative. Vale la pena notare quanto sia facile utilizzare l’API di Google Maps per fare cose che sarebbero sembrate difficili per un principiante.

Modifica dinamica & ascoltatori di eventi

I marker e le opzioni della mappa non sono necessariamente i motivi per cui qualcuno dovrebbe abbandonare un plug-in Google Map pre-impostato e passare all’API. Sono promettenti, ma molti plugin offrono già queste funzionalità. Proviamo qualcosa che non è possibile con un plugin.

Modifica dinamica

Google Maps ha molti metodi per interagire con la mappa e modificarne il comportamento. Se sei abituato a lavorare con DOM, non dovresti avere molti problemi con questi metodi.

Alcuni di questi metodi consentono di ottenere informazioni dalla mappa, come getCenter, che restituisce le coordinate centrali della mappa. Allo stesso modo, alcuni ti consentono di cambiare il comportamento, come setCenter, che cambia il centro della mappa.

Esistono molti metodi e dovresti dare un’occhiata a tutti loro, quindi sai cosa è possibile con l’API. Usiamo uno di questi metodi con la nostra mappa.

Possiamo aggiungere un pulsante al nostro esempio che riporta il centro della nostra mappa alla City di Londra.

Innanzitutto, dobbiamo aggiungere un pulsante al nostro codice:

<id pulsante ="bringToCenter">Porta a Centerbutton>

Ora colleghiamo un listener di eventi al nostro pulsante che attiva il metodo setCenter:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘click’, function (e) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

E questo è tutto. Semplice vero? Abbiamo usato map.setCenter in cui map è la variabile che abbiamo dichiarato all’inizio per contenere la nostra mappa.

Dovresti provare a sperimentare metodi diversi ed esplorare i limiti dell’API.

Ascoltatori di eventi

Un altro concetto che gli sviluppatori JavaScript potrebbero conoscere sono i listener di eventi. È possibile associare azioni a eventi specifici, il che significa che quando si verifica un evento, come un cambio di centro, tali azioni vengono attivate.

Facciamo uno degli esempi dai documenti di Google Maps per ottenere le coordinate della mappa quando fai clic in un punto qualsiasi di essa.

lascia infoWindowLatLang;

map.addListener (‘click’, funzione (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = new google.maps.InfoWindow ({
posizione: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (mappa);
});

Come puoi vedere, il concetto è praticamente lo stesso di come funzionano i listener di eventi in JavaScript. Innanzitutto, alleghiamo un listener di eventi onClick alla nostra mappa. All’interno del nostro listener di eventi, otteniamo le coordinate di dove l’utente fa clic e lo inseriamo in una finestra informativa.

Se controlli il Blocco Google Map di Otter, puoi vedere come utilizziamo questi listener di eventi e metodi per fare cose come aggiungere trascinamento & goccia di marker e rimuovere un marker facendo clic su di esso.

Creazione di un controllo personalizzato

E infine, finiamo questo articolo con un esempio di costruzione controlli personalizzati per il tuo Google Maps.

Come notato in precedenza, stiamo creando un pulsante personalizzato che aggiunge un indicatore al centro della mappa. Mentre il codice per questo sembra un po ‘complicato, è semplice.

Innanzitutto, creiamo un pulsante come funzione, che ha un listener di eventi per aggiungere un marcatore al centro della mappa.

Devi sostituire YOUR_API_KEY nel blocco di codice sopra con la tua chiave API. Esegue il rendering di una semplice Google Map con la latitudine e la longitudine indicate al centro.

funzione MarkerControl (controlDiv, map) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solido #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘pointer’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Fai clic per aggiungere un marcatore’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘click’, function () {
new google.maps.Marker ({
posizione: map.getCenter (),
mappa: mappa
});
});
}

La maggior parte del codice sopra crea solo un elemento per il nostro pulsante. Alla fine, alleghiamo un ascoltatore di eventi al nostro pulsante che aggiunge un marcatore al centro della mappa.

Ora dobbiamo collegare il nostro pulsante alla nostra mappa, che facciamo con il seguente codice:

const markerControlDiv = document.createElement (‘div’);
const markerControl = new MarkerControl (markerControlDiv, mappa);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Il codice precedente collega il nostro pulsante alla mappa nella sua posizione in basso a sinistra. E questo è tutto. Questo è tutto ciò che serve per aggiungere controlli personalizzati a Google Maps utilizzando la sua API JavaScript.

Google Maps con un pulsante personalizzato.Google Maps con un pulsante personalizzato nell’angolo in basso a sinistra.

Conclusione

Un esempio funzionante di tutto ciò che abbiamo fatto in questo articolo è disponibile online su CodeSandbox.

Questo è tutto per questo articolo e spero che ti abbia dato un po ‘di fiducia lavorando con l’API JavaScript di Google Maps. È incredibilmente semplice da usare e ti permette di costruire praticamente tutto ciò che desideri con una mappa!

Ora dovresti provare a utilizzare ciò che hai appreso oggi e metterlo in pratica costruendo un progetto demo per te usando Google Maps. Fateci sapere nei commenti se avete domande; siamo felici di rispondere loro!

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector