Come utilizzare l’API Javascript di Google Maps?

JavaScript è un linguaggio di programmazione lato client (browser) utilizzato con HTML e CSS per controllare il modo in cui le pagine Web interagiscono con gli utenti. ¿ Usando il Google-Maps API Javascript ?

JavaScript è ampiamente utilizzato per visualizzare mappe su pagine Web per offrire agli utenti la possibilità di navigare e consultare tali mappe.

Come utilizzare l’API Javascript di Google-Maps?

Di seguito è riportato un esempio minimo di una mappa incorporata con l’API JavaScript di Google Maps:

<Html>
<Head>
<title> Una semplice mappa di Google </title>
</ Head>

<Body>
<h1> Una semplice mappa di Google </h1>

<div id = "map" style = "larghezza: 600px; altezza: 400px;"> </div>

<script src = "https://maps.googleapis.com/maps/api/js"> </script>

<Script>
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);
</ Script>
</ Body>
</ Html>

Come utilizzare l'API Javascript di Google Maps? 1

Tieni presente che se inserisci questa mappa nel tuo sito Web, avrai bisogno di una chiave API standard gratuita, che puoi ottenere dal sito Web dell’API di Google Maps.

Avrai bisogno delle credenziali di accesso di Google (gmail). Quindi, inserire la chiave API come stringa di query alla fine dell’URL dello script:

<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> </ script>

L’elemento <div> definisce una divisione o sezione della pagina che verrà riempita con una mappa di Google. Al DIV viene assegnato un attributo di identificazione con il valore della mappa in modo che possa essere identificato nel JavaScript.

Il DIV ha anche alcuni CSS nell’attributo style che gli indica che è largo 600 pixel e alto 400 pixel.

Il primo elemento <script> ha un attributo src che ti dice di entrare nella libreria JavaScript dell’API di Google Maps.

Eventi e InfoWindows

Le mappe spesso devono rispondere alle azioni dell’utente, come fare clic, trascinare o trascinare. Queste azioni sono indicate in JavaScript come eventi.

Un comportamento comune con i segnaposto è aprire una finestra informativa quando un segnaposto riceve un evento clic.

<Html>
<Head>
<title> Una mappa con eventi </title>
</ Head>

<Body>
<h1> Una mappa con eventi </h1>

<div id = "map" style = "larghezza: 600px; altezza: 400px;"> </div>

<script src = "https://maps.googleapis.com/maps/api/js"> </script>

<Script>
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);

var flag = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';

var position1 = {position: {lat: 47.490, lng: -117.585},
mappa: mappa, icona: bandiera, titolo: "EWU Cheney Campus"};

var position2 = {position: {lat: 47.661, lng: -117.404},
mappa: mappa, icona: bandiera, titolo: "EWU RiverPoint Campus"};

var marker1 = new google.maps.Marker (posizione1);
var marker2 = new google.maps.Marker (posizione2);

marker_clicked () funzione
{
info.setContent (this.getTitle ());
info.open (mappa, est);
}

var info = new google.maps.InfoWindow ();
marker1.addListener ('click', marker_clicked);
marker2.addListener ('click', marker_clicked);
</ Script>
</ Body>
</ Html>

Come utilizzare l'API Javascript di Google Maps? 2

Carico asincrono

La maggior parte degli esempi che vedi negli esempi di codice API JavaScript di Google Maps inserisce il codice di assegnazione in una funzione.

Quindi chiamano quella funzione in modo asincrono dopo il caricamento della libreria API. Ciò consente di visualizzare l’altra pagina di contenuto durante il caricamento della libreria.

<Html>
<Head>
<title> Reddito familiare medio parlato </title>
</ Head>

<Body>
<h1> Reddito familiare medio parlato </h1>

<div id = "map" style = "larghezza: 600px; altezza: 400px;"> </div>

<Script>
funzione init_map ()
{
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);

var kml_parameters = {url: 'http://michaelminn.net/tutorials/google-maps-api/google-maps-api.kmz', mappa: mappa};
var kml_layer = new google.maps.KmlLayer (kml_parameters);
}
</ Script>
<script src = "https://maps.googleapis.com/maps/api/js?callback=init_map" differimento asincrono> </script>
</ Body>
</ Html>

L’API di Google Maps in WordPress

L’API di Google Maps può essere utilizzata nelle pagine di WordPress, sebbene alcune impostazioni siano utili per semplificare il lavoro con l’API.

WordPress è installato con filtri progettati per migliorare l’aspetto e la sicurezza di un sito WordPress, ma che rendono più difficile l’uso di JavaScript in generale e dell’API di Google Maps in particolare.

Un filtro è wpautop, che cerca le righe vuote in HTML e aggiunge tag di paragrafo per convertire le righe vuote in separatori di paragrafo . Ciò danneggerà JavaScript se ci sono righe vuote nel codice per migliorare la leggibilità.

remove_filter ('the_content', 'wpautop');
funzione my_myme_types ($ mime_types)
{
$ mime_types ['kml'] = 'application / vnd.google-earth.kml + xml';
$ mime_types ['kmz'] = 'application / vnd.google-earth.kmz';
restituisce $ mime_types;
}
add_filter ('upload_mimes', 'my_myme_types', 1, 1);
Dopo aver apportato queste modifiche, puoi copiare il contenuto HTML nel <body "su una pagina di WordPress usando l'editor di testo (non l'editor visivo). Per una semplice mappa, sarebbe:
<div id = "map" style = "larghezza: 600px; altezza: 400px;"> </div>

<script src = "https://maps.googleapis.com/maps/api/js"> </script>

<Script>
var map_parameters = {center: {lat: 47.490, lng: -117.585}, zoom: 8};
var map = new google.maps.Map (document.getElementById ('map'), map_parameters);
</ Script>
 

Potrebbe interessarti

Lascia un commento