Dai ai tuoi clienti indicazioni stradali con l'API di Google Maps

Invece di mostrare la posizione della tua attività commerciale su una mappa di Google, perché non offrire ai tuoi utenti l'opportunità di ottenere indicazioni stradali sulla stessa pagina? Non c'è bisogno che aprano una nuova finestra del browser e la trovino da sole, possiamo fare di meglio!

L'utilizzo dell'API di Google Maps all'interno del tuo sito Web WordPress è un processo relativamente semplice e esploreremo esattamente come farlo in questo tutorial.

Cosa faremo in questo tutorial ...

Per prima cosa ne installeremo alcuni opzioni personalizzate in modo che possiamo inserire informazioni sulla nostra mappa nel pannello di amministrazione di WordPress.
Quindi utilizzeremo i codici brevi per generare un contenitore di mappe, campi di input e contenitori di direzioni
Infine scriveremo alcuni JavaScript per avviare la mappa di Google

Nota: Qui scriveremo un bel po 'di JavaScript, ma non preoccuparti! Questo è un tutorial di WordPress, quindi sentiti libero di sorvolare le parti JavaScript :)

Passaggio 1 Creare la directory e i file

Crea una cartella all'interno del tema chiamato Carta geografica
All'interno di questa cartella, crea map.php
Finalmente creare map.js

Passaggio 2 Includere il file map.php

Nel tuo functions.php file (che si trova nella directory principale del tuo tema) - include il file map.php file che hai creato in alto.

 / * functions.php * / include ('map / map.php');

Passaggio 3 Registra le impostazioni

Ci sono 3 cose che vogliamo essere in grado di modificare dall'area di amministrazione.

La destinazione. Utilizzeremo i valori di Longitudine e Latitudine per specificare la posizione precisa della destinazione (maggiori dettagli da seguire)
Il infowindow soddisfare. Questa è la bolla bianca che vedi spesso su Google Maps: vogliamo essere in grado di modificare il testo nella bolla!
Livello di zoom iniziale della mappa: in quale misura viene ingrandita la mappa quando l'utente carica per la prima volta la pagina.

Nel map.php, gancio in admin_init per registrare le nostre impostazioni:

 function map_init () register_setting ('general', 'map_config_address'); register_setting ('general', 'map_config_infobox'); register_setting ('general', 'map_config_zoom');  add_action ('admin_init', 'map_init');

Ora possiamo impostare il testo dell'intestazione per la nostra sezione nella pagina delle opzioni e tutti gli input di cui abbiamo bisogno.

 function map_config_option_text () echo 'Imposta le opzioni per la mappa qui:
';  // Longitudine, valori di latitudine per la funzione di destinazione map_config_address () printf ((''), get_option (' map_config_address '));  // Il contenuto del testo per la funzione InfoWindow Bubble map_config_infobox () printf (('%S'), get_option (' map_config_infobox '));  // Il livello di zoom iniziale della mappa. function map_config_zoom () printf ((''), get_option (' map_config_zoom '));

Finalmente ci colleghiamo admin_menu per visualizzare le nostre impostazioni nell'amministratore di WordPress:

 function map_config_menu () add_settings_section ('map_config', 'Map Configuration', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Address - Longitude and Latitude', 'map_config_address', 'general', 'map_config'); add_settings_field ('map_config_infobox', 'Map InfoWindow', 'map_config_infobox', 'general', 'map_config'); add_settings_field ('map_config_zoom', 'Map Zoom Level', 'map_config_zoom', 'general', 'map_config');  add_action ('admin_menu', 'map_config_menu');

Vai nell'area di amministrazione, ora dovresti vedere questo:

Passaggio 4 Immettere la destinazione, informazioniWindow Testo e livello di zoom

Indirizzo di destinazione

L'API di Google Maps accetta in realtà indirizzi regolari come "Newgate Lane, Mansfield, Nottinghamshire, Regno Unito". Tuttavia, scoprirai che vorrai essere più preciso con la tua destinazione (ad esempio, molto probabilmente vorrai puntare direttamente alla tua attività e non solo alla strada). Puoi utilizzare un esempio V3 dell'API di Google Maps per cercare la tua destinazione. Trascina l'obiettivo fino a quando non hai puntato il punto. Quando sei felice, copia il Lat / Lng: valore nel campo dell'indirizzo nelle opzioni, ad esempio 27.52774434830308, 42.18752500000007 (solo i numeri separati dalla virgola, senza parentesi o virgolette!)
Testo di InfoWindow

Fai ciò che vuoi. Il tuo nome commerciale sarebbe una buona idea :)
Livello di zoom

Un buon punto di partenza è 10.

Fai clic su "Salva modifiche" e quando la pagina si aggiorna, puoi controllare che le informazioni siano state archiviate. Dovrebbe assomigliare a questo ora:

Passaggio 5 Configurare gli Shortcode

Quando avremo finito, avremo 3 elementi: il Carta geografica, il Modulo, e il Indicazioni - quindi in questo tutorial ho deciso di dividerli in 3 codici brevi separati. Questo ci consentirà di modificare l'ordine / posizionamento di ciascun articolo senza dover modificare alcun codice PHP. Ad esempio, potresti decidere di avere le tue indicazioni sopra la mappa anziché sotto o lateralmente, ecc.

Shortcode 1: wpmap_map

Qui registriamo e accodiamo il file JavasScript dell'API di Google e il nostro maps.js file.

Quindi usiamo il $ uscita variabile per memorizzare il nostro map-container div insieme ad alcuni attributi di dati personalizzati. ( Dati-map-infowindow memorizzerà il contenuto per il infowindow e Dati-map-zoom rappresenterà il livello di zoom iniziale - entrambi questi valori vengono restituiti utilizzando WordPress get_option funzione).

Alla fine restituiamo l'HTML generato da produrre:
```
 function wpmap_map () wp_register_script ('google-maps', 'http://maps.google.com/maps/api/js?sensor=false'); wp_enqueue_script ( 'google-maps'); wp_register_script ('wptuts-custom', get_template_directory_uri (). '/map/map.js', ",", true); wp_enqueue_script ( 'wptuts-custom'); $ output = sprintf ('
', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); restituire $ output;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Shortcode 2: wpmap_directions_container

Qui semplicemente restituiamo un vuoto div con un ID di dir-contenitore. Questo fungerà da contenitore per le direzioni.
```
 function wpmap_directions () $ output = '
'; restituire $ output;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Shortcode 3: wpmap_directions_input

Questo genera il markup necessario per il nostro modulo.

Questo è anche il luogo dove imposteremo la nostra opzione finale personalizzata: l'indirizzo di destinazione. Questa volta, utilizzeremo un campo modulo nascosto per contenere il valore Latitudine / Longitudine inserito in precedenza nel Pannello di amministrazione.
```
 function wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Per indicazioni stradali, inserisci il tuo indirizzo di seguito:
     
'; restituire $ output;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Ora abbiamo impostato gli shortcode, puoi andare avanti e digitarli nel tuo Contattaci pagina (o qualsiasi pagina che ti piace).

Se visualizzi l'anteprima della pagina ora, tutto ciò che vedrai sono i campi di input del modulo. Questo perché non abbiamo ancora scritto il nostro JavaScript che inizializzerà la mappa e il div per le direzioni è attualmente vuoto.

Nota: Prima di immergerci nel JavaScript, dobbiamo solo aggiungere questo al nostro style.css:

 # map-container width: 100%; altezza: 400 px;

Passaggio 7 Scrittura di JavaScript per interagire con l'API di Google Maps

Ora è il momento di far succedere la magia! Fornirò una rapida analisi di ciò che faremo prima, quindi scaveremo direttamente nel codice.

Per prima cosa creeremo un oggetto WMmap e assegna le proprietà ad esso (alcune delle quali verranno prese dal markup che abbiamo creato negli shortcode)
Quindi aggiungeremo alcuni metodi per gestire la funzionalità della mappa e le direzioni.
Uno di questi metodi, dentro, sarà responsabile del caricamento della mappa e anche dell'impostazione di alcuni valori predefiniti come il testo di InfoWindow, il livello di zoom e la posizione iniziale del marker (tutto dalle opzioni di WordPress)
Infine, imposteremo un listener di eventi per caricare la nostra mappa quando la pagina è pronta.

Pronto?

Ti spiegherò ogni parte del codice passo dopo passo, ma non preoccuparti se ti perdi, metteremo tutto insieme alla fine.

Imposta proprietà

Creiamo il nostro oggetto e impostiamo alcune proprietà. Qui stiamo semplicemente interrogando il DOM per recuperare gli elementi HTML che contengono i valori di cui abbiamo bisogno. I nomi delle proprietà che stiamo usando dovrebbero essere molto chiari e auto-esplicativi (mapContainer è ovviamente il contenitore della mappa, ecc :))

Qui abbiamo anche un paio di oggetti dell'API che utilizzeremo in seguito quando gestiremo le istruzioni.

 var WPmap = // Elementi HTML che useremo in seguito! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), // Oggetti dell'API di Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / * continua di seguito * /

I metodi

Anche questi sono parte del nostro WPmap oggetto, se non sei sicuro di come tutto si collega, assicurati di controllare il fondo di questo tutorial per vedere tutto il codice insieme.

`showDirections ()`

Questo viene chiamato da un altro metodo che vedremo in seguito, fondamentalmente controlla l'inserimento delle indicazioni nella pagina.

 / * all'interno dell'oggetto WPmap * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Directions failed:' + dirStatus); ritorno;  // Mostra indicazioni WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Questo è chiamato una volta dal nostro dentro metodo. Imposterà il startLatLng proprietà pari a a google.maps.LatLng oggetto che possiamo usare in seguito. Richiede che forniamo valori separati di latitudine e longitudine: come possiamo farlo?

Nel nostro shortcode abbiamo inserito un campo modulo nascosto che contiene il valore Latitudine e Longitudine che abbiamo impostato nell'amministratore di WordPress. Quindi abbiamo recuperato il campo modulo nascosto e lo abbiamo archiviato immettere. Questo significa che ora possiamo accedere al valore usando WPmap.toInput.value
Tuttavia, il valore che impostiamo nel modulo è solo una stringa con una virgola che separa i numeri. Per separare i valori possiamo dividere la stringa usando .Diviso(","). Ciò restituirà una matrice che contiene la latitudine e la longitudine come valori separati.
Ora possiamo accedere a ognuno usando l'indice delle matrici.

 / * all'interno dell'oggetto WPmap * / getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); ,

`getSelectedUnitSystem ()`

Poiché abbiamo permesso ai nostri utenti di scegliere se preferire le indicazioni in Metric o Imperial, usiamo questo metodo per impostare DirectionsUnitSystem per entrambi METRIC o IMPERIALE.

 / * all'interno dell'oggetto WPmap * / getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,

`ottenere direzioni()`

Questo è il metodo che viene chiamato quando l'utente fa clic su Ottenere direzioni pulsante.

Per prima cosa otteniamo l'indirizzo che l'utente ha inserito e lo memorizza nel fromStr variabile.
Quindi impostiamo un oggetto opzioni - dirRequest. Questo conterrà le opzioni necessarie per fornire le indicazioni stradali.
1. origine - L'indirizzo che l'utente ha inserito.
2. destinazione - Il google.maps.LatLng oggetto contenente i valori di latitudine e longitudine della destinazione.
3. travelMode - Qui ci assicuriamo di recuperare solo le indicazioni stradali.
4. unitSystem - Specificare quale unità di misura utilizzare in base alla scelta dell'utente.
Infine, chiamiamo WPmap.dirService.route - e passare due parametri ad esso:
1. dirRequest - questo è l'oggetto che contiene le nostre opzioni.
2. WPmap.showDirections - la funzione di callback che gestisce la posizione delle indicazioni nella pagina.

 / * all'interno dell'oggetto WPmap * / getDirections: function () var fromStr = WPmap.fromInput.value; var dirRequest = origine: fromStr, destinazione: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`dentro()`

Questo è il metodo che viene chiamato quando la pagina viene caricata. È responsabile di:

Iniziare la mappa, centrata sul tuo indirizzo.
Recupero dei valori necessari per impostare il testo di InfoWindow e il livello di zoom iniziale.
Impostazione di un segnaposto che mostra il tuo indirizzo.
Ascoltare quando un utente fa clic su "Ottieni indicazioni stradali" in modo che possa rimuovere il contrassegno iniziale e la finestra di informazioni

 init: function () // get the infowindow text e zoom level var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // chiama il metodo che imposta WPmap.startLatLng WPmap.getStartLatLng (); // imposta la mappa. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), center: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // imposta il marcatore pin del marker rosso = new google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // imposta il contenuto infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // ascolta per quando vengono richieste le indicazioni stradali google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // chiudi l'iniziale infoWindow marker.setVisible (false); // rimuovi il pennarello iniziale); //dentro ;// <-- this is the end of the object.

Opzionale

Se vuoi mostrare un messaggio carino (come quello visto sotto) ai tuoi utenti dopo aver richiesto le indicazioni, copia il codice sotto l'immagine nel listener di eventi all'interno del dentro metodo.

Opzionale Grazie Messaggio:

 // Ottieni la distanza del percorso var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // imposta il contenuto di infoWindow prima di aprirlo di nuovo. infoWindow.setContent ( 'Grazie!
 Sembra che tu stia parlando  '+ distanceString +' lontano da noi. 
Le indicazioni sono appena sotto la mappa '); // riapri il infoWindow infoWindow.open (WPmap.map, marker); setTimeout (function () infoWindow.close (), 8000); // chiudi dopo 8 secondi.

Passaggio 8 Aggiungi l'Listener di eventi che caricherà la mappa

Sei ancora con me? Abbiamo fatto tutto per finire ora e tutto ciò che resta da fare è chiamare il WPmap.init () metodo quando la pagina viene caricata. Aggiungi questo alla fine di map.js

 google.maps.event.addDomListener (finestra, 'carica', WPmap.init);

Mettendo insieme tutti i JavaScript

Abbiamo coperto un lotto di terreno qui, quindi vediamo come appare quando è tutto messo insieme.

 var WPmap = // Elementi HTML che useremo in seguito! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), startLatLng: null, // Oggetti dell'API di Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map : null, showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Directions failed:' + dirStatus); ritorno;  // Mostra indicazioni WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: function () var fromStr = WPmap.fromInput.value; // Ottieni il codice postale che è stato inserito var dirRequest = origine: fromStr, destinazione: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // ottiene il contenuto var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // imposta la mappa. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // assicurati che passi attraverso un centro Integer: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // imposta il marcatore pin rosso = new google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // imposta il contenuto infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // ascolta per quando vengono richieste le indicazioni stradali google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // chiudi la prima informazioneWindow marker.setVisible (false); // rimuovi il primo marcatore // imposta le stringhe da utilizzare var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // imposta il contenuto di infoWindow prima di riaprirlo. infoWindow. setContent ( 'Grazie!
 Sembra che tu stia parlando  '+ distanceString +' lontano da noi. 
Le indicazioni sono appena sotto la mappa '); // riapri il infoWindow infoWindow.open (WPmap.map, marker); setTimeout (function () infoWindow.close (), 8000); // chiudi dopo 8 secondi. ); //dentro ; google.maps.event.addDomListener (finestra, 'carica', WPmap.init);

Note per l'esercitazione

Assicurati di effettuare ricerche su tutto ciò che non capisci sul sito web dell'API di Google
Durante la stesura di questo tutorial, stavo testando il mio codice usando il tema TwentyEleven WordPress. Qualcosa stava causando la freccia nella parte inferiore della Finestra Info sulla mappa da visualizzare in modo errato. È perchè .contenuto dell'immissione img sopra linea 857 ha un larghezza massima impostato. Questo rovina il modo in cui Google rende InfoWindow. Per risolverlo, entra da qualche parte sotto di esso:
```
 # map-container img larghezza massima: nessuna; 
```

Codice