Oferiți clienților indicații de orientare Cu API-ul Google Maps

În loc să arătați locația afacerii dvs. pe o hartă Google, de ce să nu oferiți utilizatorilor posibilitatea de a obține indicații de conducere pe aceeași pagină? Nu este nevoie ca ei să deschidă o nouă fereastră de browser și să o găsească singuri, putem face mai bine decât asta!

Utilizarea API-ului Google Maps în cadrul site-ului dvs. WordPress este un proces relativ simplu și vom explora exact cum se face în acest tutorial.

Ce vom face în acest tutorial ...

Mai întâi vom stabili câteva opțiuni personalizate astfel încât să putem introduce informații despre harta noastră în panoul Administrator WordPress.
Apoi vom folosi coduri scurte pentru a scoate un container de hartă, câmpuri de intrare și un container de direcții
În cele din urmă, vom scrie un javascript pentru a iniția Google Map

Notă: Vom scrie un pic destul de JavaScript aici, dar nu vă faceți griji! Acesta este un tutorial WordPress, deci nu ezitați să luați peste piese JavaScript :)

Pasul 1 Creați directorul și fișierele

Creați un dosar din interiorul temei numit Hartă
În interiorul acestui dosar, creați map.php
În cele din urmă creați map.js

Pasul 2 Includeți fișierul map.php

În tine functions.php fișier (situat în directorul rădăcină al temei) - includeți map.php fișierul pe care l-ați creat în partea de sus.

 / * funcții.php * / include ('map / map.php');

Pasul 3 Înregistrați setările

Există 3 lucruri pe care dorim să le putem edita din zona Admin.

Destinatia. Vom utiliza valorile Longitude și Latitude pentru a specifica locația exactă a destinației dvs. (mai multe detalii pe care urmează să le urmați)
infoWindow conţinut. Acesta este balonul alb pe care îl vedeți adesea pe Hărți Google - vrem să putem edita textul în bule!
Nivelul inițial de mărire a hărții - cât de departe este mărirea hărții atunci când utilizatorul încarcă prima pagină.

În map.php, cârlig în admin_init pentru a înregistra setările noastre:

 funcția 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');

Acum putem seta textul pentru secțiunea noastră în pagina de opțiuni și toate intrările de care avem nevoie.

 funcția map_config_option_text () echo 'Setați opțiunile pentru hartă aici:
„;  // Longitudine, Latitude Valori pentru funcția de destinație map_config_address () printf ((''), get_option (' map_config_address '));  // Continutul textului pentru functia InfoWindow Bubble map_config_infobox () printf (('% s'), get_option (' map_config_infobox '));  // Nivelul inițial de mărire al hărții. funcția map_config_zoom () printf ((''), get_option (' map_config_zoom '));

În cele din urmă ne-am prins admin_menu pentru a afișa setările noastre în WordPress Admin:

 funcția map_config_menu () add_settings_section ('map_config', 'Configurația hărții', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Adresă - Longitudine și 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', 'Nivel de mărire a hărții', 'map_config_zoom', 'general', 'map_config');  add_action ('admin_menu', 'map_config_menu');

Intrați în zona de administrare, ar trebui să vedeți acum:

Pasul 4 Introduceți destinația, textul de informare și nivelul de zoom

Adresa de destinație

Aplicația Google Maps API acceptă de fapt adrese regulate, cum ar fi "Newgate Lane, Mansfield, Nottinghamshire, Marea Britanie" - Cu toate acestea, veți afla că veți dori să fiți mai precis cu destinația dvs. (de exemplu, direct la afacerea dvs. și nu doar la stradă). Puteți utiliza o mostră V3 Google Maps API pentru a căuta destinația. Trageți țintă în jurul valorii de până când ați pin-indicat loc dvs. Când sunteți fericit, copiați-l Lat / Lng: valoare în câmpul de adresă din opțiuni - de exemplu 27.52774434830308, 42.18752500000007 (doar numerele separate prin virgulă, fără paranteze sau ghilimele!)
InfoWindow Text

Asigurați-vă ceea ce doriți. Numele dvs. de afacere ar fi o idee bună :)
Nivelul de zoom

Un bun punct de plecare este 10.

Dați clic pe "Salvați modificările" și când pagina se actualizează, puteți verifica dacă informațiile au fost stocate. Ar trebui să arate așa ceva acum:

Pasul 5 Configurați codurile scurte

Când vom termina, vom avea 3 elemente: Hartă, Formă, si Directii - așa că în acest tutorial am decis să le împărțim în 3 coduri scurte separate. Acest lucru ne va permite să schimbăm ordinea / plasarea fiecărui element fără a fi nevoie să modificăm codul nostru PHP. De exemplu, puteți decide să aveți instrucțiunile de deasupra hărții în loc de mai jos sau de partea laterală, etc.

Cod scurt 1: wpmap_map

Aici înregistrăm și enumerăm fișierul Javascript API Google Maps, precum și propriul nostru maps.js fişier.

Apoi vom folosi $ ieșire variabilă pentru a stoca noastre harta-container div împreună cu unele atribute de date personalizate. ( Date-harta-infowindow va stoca conținutul pentru infowindow și date-harta-zoom va reprezenta nivelul de zoom inițial - ambele valori sunt returnate folosind WordPress get_option funcţie).

În cele din urmă vom returna HTML-ul generat care va fi afișat:
```
 funcția wpmap_map () wp_register_script ('google-maps', 'http://maps.google.com/maps/api/js?sensor=false'); wp_enqueue_script ( 'google-hărți'); wp_register_script ('wptuts-personalizat', get_template_directory_uri (). /map/map.js ',', ', true); wp_enqueue_script ( 'wptuts personalizat'); $ output = sprintf ('
', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); returnați outputul $;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Cod scurt 2: wpmap_directions_container

Aici întoarcem pur și simplu un gol div cu un ID de dir-container. Acesta va acționa ca container pentru direcții.
```
 funcția wpmap_directions () $ output = '
„; returnați outputul $;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Cod scurt 3: wpmap_directions_input

Aceasta generează marcajul necesar pentru formularul nostru.

De asemenea, vom seta opțiunea personalizată finală - adresa de destinație. De data aceasta, vom folosi un câmp de formular ascuns pentru a păstra valoarea Latitude / Longitude pe care am introdus-o mai devreme în panoul Administrator.
```
 funcția wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Pentru Direcții de conducere, introduceți adresa dvs. de mai jos:
     
„; returnați outputul $;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Acum avem setul de coduri scurte, puteți să mergeți mai departe și să le introduceți în dvs. Contacteaza-ne (sau orice pagină doriți).

Dacă previzualizați pagina acum, tot ce veți vedea sunt câmpurile de introducere a formularului. Acest lucru se datorează faptului că nu am scris JavaScript care va inițializa încă harta și div pentru direcțiile este în prezent gol.

Notă: Înainte de a ne arunca cu capul în JavaScript, trebuie doar să adăugăm acest lucru la adresa noastră style.css:

 # map-container lățime: 100%; înălțime: 400px;

Pasul 7 Scrierea JavaScript pentru a interacționa cu API-ul Google Maps

Acum este momentul să faceți magia să se întâmple! Voi oferi o scurtă scurgere a ceea ce vom face mai întâi, apoi vom sapa direct în cod.

Mai întâi vom crea un obiect WMmap și să-i atribuiți proprietăți (dintre care unele vom lua din marcajul pe care l-am creat în codurile scurte)
Apoi vom adăuga câteva metode pentru a face față funcționalității hărții și direcțiilor.
Una dintre aceste metode, init, va fi responsabil pentru încărcarea hărții și, de asemenea, pentru setarea unor valori implicite, cum ar fi textul textului Window, nivelul de mărire și poziția inițială a marcatorului (toate din opțiunile WordPress)
În cele din urmă, vom seta un ascultător de evenimente pentru a încărca harta noastră atunci când pagina este gata.

Gata?

Voi explica fiecare parte a codului pas cu pas, dar nu vă faceți griji dacă vă veți pierde, vom pune totul la capăt.

Setați proprietățile

Să ne creăm obiectul și să stabilim câteva proprietăți. Aici, pur și simplu, interogăm DOM pentru a prelua elementele HTML care conțin valorile de care avem nevoie. Numele proprietăților pe care le folosim ar trebui să fie foarte clare și explicite (mapContainer este, evident, Carton Container, etc :))

Aici avem și câteva obiecte din API pe care le vom folosi mai târziu atunci când ne ocupăm de Direcții.

 var WPmap = // Elemente pe care le vom folosi mai târziu! MapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), inInput: document.getElementById ('map-config-address' input "), unitInput: document.getElementById ('unit-input'), // Obiecte API Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer * continuă mai jos * /

Metodele

Acestea sunt, de asemenea, parte a noastră WPmap obiect, dacă nu sunteți siguri cum totul se leagă împreună, asigurați-vă că verificați partea de jos a acestui tutorial pentru a vedea întregul cod împreună.

`showDirections ()`

Acest lucru este chemat dintr-o altă metodă pe care o vom vedea mai târziu, în principiu controlează inserarea indicațiilor în pagină.

 / * în cadrul obiectului WPmap * / showDirections: funcția (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Instrucțiunile nu au reușit:' + dirStatus); întoarcere;  // Afișați instrucțiunile WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Aceasta se numește odată din partea noastră init metodă. Acesta va seta startLatLng proprietate egală cu a google.maps.LatLng obiect pe care îl putem folosi ulterior. Este necesar să îi oferim valori separate pentru Latitudine și Longitudine - cum putem face acest lucru?

În codul nostru scurt am introdus un câmp de formular ascuns care conține valoarea Latitude & Longitude pe care am setat-o în WordPress Admin. Apoi am recuperat câmpul formular ascuns și l-am păstrat toInput. Aceasta înseamnă că putem accesa valoarea folosind WPmap.toInput.value
Cu toate acestea, valoarea pe care o stabilim în formular este doar un șir cu o virgulă care separă numerele. Pentru a separa valorile, putem împărți șirul folosind .Despică(","). Aceasta va returna un tablou care conține Latitude și Longitude ca valori separate.
Acum putem accesa fiecare dintre ele utilizând indexul matricei.

 / * în cadrul obiectului WPmap * / getStartLatLng: funcția () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = nou google.maps.LatLng (n [0], n [1]); ,

`getSelectedUnitSystem ()`

Pentru că am permis utilizatorilor noștri să selecteze dacă preferă indicații în Metric sau Imperial, vom folosi această metodă pentru a seta DirectionsUnitSystem la oricare dintre ele METRIC sau IMPERIAL.

 / * în cadrul obiectului WPmap * / getSelectedUnitSystem: function () retur WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,

`a primi direcții()`

Aceasta este metoda numită când utilizatorul face clic pe A primi direcții buton.

Mai întâi primim adresa pe care utilizatorul o introduce și o stochează în fromStr variabil.
Apoi am setat un obiect de opțiuni - dirRequest. Aceasta va conține opțiunile necesare pentru a oferi Direcțiile de conducere.
1. origine - Adresa pe care a introdus-o utilizatorul.
2. destinaţie - google.maps.LatLng obiect care conține valorile Latitude și Longitude ale destinației dvs..
3. travelMode - Aici asigurăm că preluăm Direcțiile de conducere.
4. unitSystem - Specificați ce unitate de măsură să utilizați pe baza alegerii utilizatorului.
În cele din urmă, sunăm WPmap.dirService.route - și treceți la el doi parametri:
1. dirRequest - acesta este obiectul care conține opțiunile noastre.
2. WPmap.showDirections - funcția de apel invers care gestionează plasarea direcțiilor în pagină.

 / * în cadrul obiectului WPmap * / getDirections: function () var dinStr = WPmap.fromInput.value; var dirRequest = origine: dinStr, destinație: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`init ()`

Aceasta este metoda numită când pagina este încărcată. Acesta este responsabil pentru:

Inițierea hărții, centrat pe adresa dvs..
Returnați valorile necesare pentru a seta textul infoWindow și nivelul inițial de Zoom.
Setarea unui panou de marcator care să afișeze adresa dvs..
Ascultarea atunci când un utilizator dă clic pe 'Obțineți indicații de orientare' astfel încât să poată elimina marcajele inițiale și informațiile din fereastra de informare

 init: function () // obțineți textul infowindow și nivelul de zoom var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var inițialZoom = WPmap.mapContainer.getAttribute ("date-map-zoom"); // apelați metoda care stabilește WPmap.startLatLng WPmap.getStartLatLng (); // configurați harta. WPmap.map = nou google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), centru: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configurați markerul marcatorului roșu = noul google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // setați conținutul infowindow infoWindow = nou google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcator); // ascultați când sunt solicitate Direcțiile google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // închideți indexul inițial infoWindow.setVisible (false); // remove marcatorul inițial);  // init; // <-- this is the end of the object.

Opțional

Dacă doriți să afișați utilizatorilor dvs. după ce au solicitat indicații de orientare un mesaj frumos (precum cel descris mai jos), copiați codul de sub imagine în ascultătorul evenimentului din interiorul init metodă.

facultativ Mulțumesc mesaj:

 // Depărtați distanța călătoriei var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // setați conținutul ferestrei infoWindow înainte de al deschide din nou. infoWindow.setContent ( "Mulțumiri!
 Se pare că e vorba  '+ distanța + șir +' departe de noi. 
Direcțiile sunt chiar sub hartă "); // redeschideți infoWindow infoWindow.open (WPmap.map, marker); setTimeout (funcția () infoWindow.close (), 8000); // închideți-l după 8 secunde.

Pasul 8 Adăugați ascultarea evenimentelor care va încărca harta

Ești încă cu mine? Am reușit să terminăm acum și tot ce trebuie să faceți este să sunați WPmap.init () atunci când pagina se încarcă. Adăugați aceasta în partea de jos a paginii map.js

 google.maps.event.addDomListener (fereastră, "încărcare", WPmap.init);

Punerea tuturor JavaScript împreună

Am acoperit a mult de aici, să vedem cum arată atunci când totul este pus împreună.

 var WPmap = // Elemente pe care le vom folosi mai târziu! MapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), inInput: document.getElementById ('map-config-address' input '), unitInput: document.getElementById (' unitate de intrare '), startLatLng: null, // Obiecte API Google Maps dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer : null, showDirections: funcția (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Instrucțiunile nu au reușit:' + dirStatus); întoarcere;  // Afișați instrucțiunile WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: funcția () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = nou google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () retur WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: funcție () var dinStr = WPmap.fromInput.value; // Obțineți codul poștal introdus var dirRequest = origine: fromStr, destinație: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // obține conținutul var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var inițialZoom = WPmap.mapContainer.getAttribute ("date-map-zoom"); WPmap.getStartLatLng (); // configurați harta. WPmap.map = nou google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // asigurați-vă că este prezentat ca un centru întreg: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configurați marcatorul roșu cu marcator pini = noul google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // setați conținutul infowindow infoWindow = nou google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marcator); // a asculta când sunt solicitate Direcțiile google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // închide primul infoWindow marker.setVisible (false); // remove primul marcator // configurați șirurile de configurare care urmează să fie utilizate var distancestring = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // setați conținutul infoWindow înainte de al deschide din nou. setContent ( "Mulțumiri!
 Se pare că e vorba  '+ distanța + șir +' departe de noi. 
Direcțiile sunt chiar sub hartă "); // redeschideți infoWindow infoWindow.open (WPmap.map, marker); setTimeout (funcția () infoWindow.close (), 8000); // închideți-l după 8 secunde. );  // init; google.maps.event.addDomListener (fereastră, "încărcare", WPmap.init);

Tutorial Note

Asigurați-vă că ați cercetat tot ce nu înțelegeți pe site-ul Google Maps API
Când scriam acest tutorial, îmi testaam codul folosind tema TwentyEleven WordPress. Ceva a cauzat afișarea incorectă a săgeții din partea de jos a InfoWindow pe hartă. Este pentru că .intrare-conținut img pe linia 857 are o lățimea maximă a stabilit. Acest lucru înșelățește modul în care Google redă infoWindow. Pentru ao rezolva, introduceți-o undeva sub ea:
```
 # hartă-container img max-width: none; 
```

Cod