Gi kundene dine kjørebeskrivelser Med Google Maps API

I stedet for bare å vise bedriftens beliggenhet på et Google Map, hvorfor ikke tilby brukerne muligheten til å få veibeskrivelse på samme side? Det er ikke behov for at de åpner et nytt nettleservindu og finner det selv, vi kan gjøre det bedre enn det!

Bruk av Google Maps API på WordPress-nettstedet er en relativt enkel prosess, og vi vil utforske nøyaktig hvordan du gjør det i denne opplæringen.

Hva skal vi gjøre i denne opplæringen ...

Først skal vi sette opp noen tilpassede alternativer slik at vi kan legge inn informasjon om kartet vårt på WordPress admin panel.
Da bruker vi kortnummer til å sende ut kartbeholder, innfelt felt og retningsbeholder
Til slutt skal vi skrive litt JavaScript for å starte Google Map

Merk: Vi skal skrive en god del av JavaScript her, men ikke bekymre deg! Dette er en WordPress-veiledning, så vær så snill å glosse over JavaScript-delene :)

Trinn 1 Opprett katalog og filer

Opprett en mappe inne i temaet ditt Kart
Inne i denne mappen, opprett map.php
Endelig opprette map.js

Trinn 2 Inkluder map.php-filen

I din functions.php fil (ligger i rotkatalogen av temaet ditt) - inkludere map.php fil du opprettet øverst.

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

Trinn 3 Registrer innstillinger

Det er 3 ting vi vil kunne redigere fra Admin-området.

Målet. Vi skal bruke lengde- og breddegradverdier for å angi nøyaktig plasseringen av destinasjonen din (flere detaljer som skal følges)
De infoWindow innhold. Dette er den hvite boblen du ofte ser på Google Maps - vi vil kunne redigere teksten i boblen!
Initial zoomnivå på kartet - hvor langt kartet zoomes inn når brukeren først laster siden.

I map.php, krok inn admin_init å registrere våre innstillinger:

 funksjon 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');

Nå kan vi sette opp overskriftsteksten for vår seksjon på opsjonssiden og alle inngangene vi trenger.

 funksjon map_config_option_text () echo 'Angi Valg for kartet her:
';  // Lengdegrad, Breddegradverdier for Destinasjonsfunksjonen map_config_address () printf ((''), get_option (' map_config_address '));  // Tekstinnholdet for InfoWindow Bubble-funksjonen map_config_infobox () printf (('% s'), get_option (' map_config_infobox '));  // Den opprinnelige Zoomnivået på kartet. funksjon map_config_zoom () printf ((''), get_option (' map_config_zoom '));

Til slutt henger vi inn admin_menu for å vise våre innstillinger i WordPress-administratoren:

 funksjon map_config_menu () add_settings_section ('map_config', 'Kartkonfigurasjon', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Adresse - Lengdegrad og breddegrad', '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');

Gå inn i adminområdet ditt, nå bør du se dette:

Trinn 4 Skriv inn destinasjonen, infoVind tekst og Zoom nivå

Ankomstadresse

Google Maps API aksepterer vanligvis vanlige adresser som "Newgate Lane, Mansfield, Nottinghamshire, Storbritannia" - Men du vil finne at du vil være mer presis med reisemålet ditt (for eksempel vil du sannsynligvis ønske å peke direkte til din bedrift og ikke bare gaten). Du kan bruke en Google Maps API V3-prøve for å søke etter reisemålet ditt. Dra målet rundt til du har spisset ditt sted. Når du er glad, kopier du Lat / Lng: verdi inn i adressefeltet i alternativene - for eksempel 27.52774434830308, 42.18752500000007 (bare tallene skilt av komma, ingen parentes eller anførselstegn!)
InfoWindow Text

Gjør dette uansett hva du vil. Ditt firmanavn ville være en god ide :)
Zoom nivå

Et godt utgangspunkt er 10.

Klikk på "Lagre endringer", og når siden oppdateres, kan du kontrollere at informasjonen er lagret. Det skal se slik ut som dette nå:

Trinn 5 Konfigurer kortnummerene

Når vi er ferdige, har vi tre elementer: Kart, de Form, og Veibeskrivelse - så i denne opplæringen har jeg besluttet å dele dem opp i 3 separate kortkoder. Dette vil tillate oss å endre rekkefølgen / plasseringen av hvert element uten å måtte endre noen av våre PHP-koden. For eksempel kan du bestemme deg for å ha retninger over kartet i stedet for under, eller på siden, etc..

Kortnummer 1: wpmap_map

Her registrerer og godkjenner vi JavasScript-filen for Google Maps, så vel som vår egen maps.js fil.

Neste bruker vi $ utgang variabel for å lagre vår kart-container div sammen med noen tilpassede data attributter. ( data-map-infowindow vil lagre innholdet for infowindow og data-map-zoom vil representere det opprinnelige zoomnivået - begge disse verdiene returneres ved hjelp av WordPress get_option funksjon).

Til slutt returnerer vi den genererte HTML som skal sendes ut:
```
 funksjon 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-tilpasset'); $ output = sprintf ('
', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); returnere $ output;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Kortnummer 2: wpmap_directions_container

Her returnerer vi ganske enkelt en tom div med en ID av dir-container. Dette vil fungere som beholderen for retningene.
```
 funksjon wpmap_directions () $ output = '
'; returnere $ output;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Kortnummer 3: wpmap_directions_input

Dette genererer Markup som trengs for vårt skjema.

Dette er også hvor vi skal angi vårt endelige tilpassede alternativ - destinasjonsadressen. Denne gangen bruker vi et skjult skjemafelt for å holde Latitude / Longitude-verdien som vi skrev inn tidligere i administrasjonspanelet.
```
 funksjon wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' For veibeskrivelser, skriv inn adressen nedenfor:
     
'; returnere $ output;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Nå har vi kortnummerene satt opp, du kan gå videre og skrive dem inn i din Kontakt oss side (eller hvilken som helst side du liker).

Hvis du forhåndsviser siden nå, vil du bare se skjemainngangsfeltene. Det er fordi vi ikke har skrevet vår JavaScript som vil initialisere kartet ennå, og diven for retningene er for øyeblikket tom.

Merk: Før vi dykker inn i JavaScript, trenger vi bare å legge til dette i vår style.css:

 # kartbeholder bredde: 100%; høyde: 400px;

Trinn 7 Skriver JavaScript for å samhandle med Google Maps API

Nå er det på tide å få magien til å skje! Jeg gir en rask nedlasting av hva vi skal gjøre først, så vi graver rett inn i koden.

Først skal vi lage et objekt WMmap og tilordne egenskaper til det (noen av dem tar vi fra merkingen vi opprettet i kortkodene)
Deretter legger vi til noen få metoder for å håndtere funksjonaliteten til kartet og veibeskrivelsen.
En av disse metodene, i det, vil være ansvarlig for å laste inn kartet og også for å angi noen standardverdier, for eksempel infoWindow-teksten, zoomnivået og den første markørposisjonen (alt fra WordPress-alternativer)
Til slutt vil vi sette en hendelseslytter til å laste inn kartet vårt når siden er klar.

Klar?

Jeg vil forklare hver del av koden trinn for steg, men vær ikke bekymret hvis du går seg vill, legger vi alt sammen på slutten.

Angi egenskaper

La oss lage vårt objekt og sette noen egenskaper. Her spør vi bare om DOM for å hente HTML-elementene som inneholder verdiene vi trenger. Egenskapsnavnene vi bruker bør være veldig klare og selvforklarende (mapContainer er åpenbart kartbeholderen, etc :))

Her får vi også et par objekter fra API som vi vil bruke senere når vi håndterer Veibeskrivelse.

 var WPmap = // HTML Elements vi vil bruke senere! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tilInput: document.getElementById ('map-config-adresse'), fraInput: document.getElementById input'), unitInput: document.getElementById ('unit-input'), // Google Maps API-objekter dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), kart: null, / * fortsetter under * /

Metodene

Disse er også en del av vår WPmap objekt, hvis du er usikker på hvordan alt sammen knytter seg, sørg for å sjekke ut bunnen av denne veiledningen for å se hele koden sammen.

`showDirections ()`

Dette kalles fra en annen metode som vi ser senere, det styrer i utgangspunktet innføringen av retningene i siden.

 / * innen WPmap objekt * / showDirections: funksjon (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Veibeskrivelser mislyktes:' + dirStatus); komme tilbake;  // Vis veibeskrivelse WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Dette kalles en gang fra vår i det metode. Det vil angi startLatLng eiendom lik en google.maps.LatLng objekt som vi kan bruke senere. Det krever at vi gir det separate Latitude- og lengdegradverdier - hvordan kan vi gjøre dette?

I vår kortkode setter vi inn et skjult skjemafelt som inneholder Latitude & Longitude-verdien som vi angir i WordPress-administratoren. Da hentet vi det skjulte formfeltet og lagret det inn toInput. Dette betyr at vi nå kan få tilgang til verdien ved hjelp av WPmap.toInput.value
Men verdien vi setter i skjemaet er bare en streng med et komma som skiller tallene. For å skille verdiene kan vi dele opp strengen med .dele(","). Dette returnerer en matrise som inneholder breddegrad og lengdegrad som separate verdier.
Nå kan vi få tilgang til hver enkelt ved hjelp av array-indeksen.

 / * i WPmap-objektet * / getStartLatLng: funksjon () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); ,

`getSelectedUnitSystem ()`

Fordi vi har tillatt brukerne å velge om de vil foretrekke veibeskrivelser i metrisk eller keiserlig, bruker vi denne metoden til å angi DirectionsUnitSystem å enten METRIC eller IMPERIAL.

 / * i WPmap-objektet * / getSelectedUnitSystem: function () returnere WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metrisk'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,

`Få veibeskrivelse()`

Dette er metoden som kalles når brukeren klikker på Få veibeskrivelse knapp.

Først får vi adressen som brukeren skrev inn og lagret den i fromStr variabel.
Deretter oppretter vi et alternativobjekt - dirRequest. Dette vil inneholde alternativene som trengs for å gi veibeskrivelsen.
1. opprinnelse - Adressen som brukeren skrev inn.
2. mål - De google.maps.LatLng objekt som inneholder lengdegrad og lengdegradverdier for destinasjonen din.
3. travelMode - Her sikrer vi at vi bare henter Veibeskrivelser.
4. unitSystem - Angi hvilken måleenhet som skal brukes basert på brukerens valg.
Til slutt, vi ringer WPmap.dirService.route - og passere to parametere til den:
1. dirRequest - Dette er objektet som inneholder våre alternativer.
2. WPmap.showDirections - tilbakeringingsfunksjonen som håndterer plasseringen av retningene til siden.

 / * i WPmap-objektet * / getDirections: funksjon () var fromStr = WPmap.fromInput.value; var dirRequest = opprinnelse: fromStr, destinasjon: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`i det()`

Dette er metoden som kalles når siden er lastet inn. Det er ansvarlig for:

Starte kartet, sentrert på adressen din.
Henter verdier som trengs for å sette infoWindow-teksten og det innledende Zoom-nivået.
Angir en markørpinne som viser adressen din.
Lytter når når en bruker klikker på "Få veibeskrivelse" slik at den kan fjerne den første markøren og infoWindow

 init: funksjon () // få infowindow tekst og zoom nivå var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // ring metoden som angir WPmap.startLatLng WPmap.getStartLatLng (); // Sett inn kartet. WPmap.map = nytt google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), senter: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // sett inn den røde markørpenmarken = nye google.maps.Marker (map: WPmap.map, posisjon: WPmap.startLatLng, draggable: false); // angi infowindow innhold infoWindow = nytt google.maps.InfoWindow (innhold: infoWindowContent); infoWindow.open (WPmap.map, markør); // lytt etter når Veibeskrivelse er forespurt google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funksjon () infoWindow.close (); // lukk opprinnelig infoWindow marker.setVisible (false); // fjern den første markøren); //i det ;// <-- this is the end of the object.

Valgfritt

Hvis du vil vise en fin melding (som den som er sett nedenfor) til brukerne dine etter at de har bedt om retninger, kopier du bare koden under bildet til hendelseslytteren inne i i det metode.

Valgfri Takk skal du ha budskap:

 // Få avstanden på reisen var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // angi innholdet i infoWindow før vi åpner det igjen. infoWindow.setContent ( 'Takk!
 Ser ut som om du er om  '+ avstandString +' vekk fra oss. 
Veibeskrivelsen er rett under kartet '); // åpne infoWindow infoWindow.open (WPmap.map, markør); setTimeout (funksjon () infoWindow.close (), 8000); // lukk den etter 8 sekunder.

Trinn 8 Legg til hendelseslytteren som laster kartet

Er du fortsatt med meg? Vi har gjort det hele veien til slutt nå, og alt som er igjen å gjøre er å ringe WPmap.init () metode når siden lastes. Legg dette til bunnen av map.js

 google.maps.event.addDomListener (vindu, 'last', WPmap.init);

Setter alle JavaScript sammen

Vi har dekket en mye av bakken her, så la oss se hvordan det ser ut når alt er satt sammen.

 var WPmap = // HTML Elements vi vil bruke senere! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tilInput: document.getElementById ('map-config-adresse'), fraInput: document.getElementById input'), unitInput: document.getElementById ('unit-input'), startLatLng: null, // Google Maps API-objekter dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), kart : null, showDirections: funksjon (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Veibeskrivelser mislyktes:' + dirStatus); komme tilbake;  // Vis veibeskrivelse WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: funksjon () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () returnere WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metrisk'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: funksjon () var fromStr = WPmap.fromInput.value; // Få postnummeret som ble oppgitt var dirRequest = opprinnelse: fromStr, destinasjon: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: funksjon () // få innholdet var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // Sett inn kartet. WPmap.map = nytt google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), // sørg for at det kommer gjennom som et integersenter: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // sett inn den røde pinmarkørmarkøren = nye google.maps.Marker (map: WPmap.map, posisjon: WPmap.startLatLng, draggable: false); // angi infowindow innhold infoWindow = nytt google.maps.InfoWindow (innhold: infoWindowContent); infoWindow.open (WPmap.map, markør); // lytt etter når Veibeskrivelse er forespurt google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funksjon () infoWindow.close (); // lukk den første infoWindow marker.setVisible (false); // fjern den første markøren // oppsettstrenger som skal brukes. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // angi innholdet i infoWindow før vi åpner det igjen. infoWindow. setContent ( 'Takk!
 Ser ut som om du er om  '+ avstandString +' vekk fra oss. 
Veibeskrivelsen er rett under kartet '); // åpne infoWindow infoWindow.open (WPmap.map, markør); setTimeout (funksjon () infoWindow.close (), 8000); // lukk den etter 8 sekunder. ); //i det ; google.maps.event.addDomListener (vindu, 'last', WPmap.init);

Tutorial Notes

Pass på å undersøke alt du ikke forstår på Googles Maps API-nettsted
Når jeg skrev denne opplæringen, prøvde jeg koden min ved å bruke lageret TwentyEleven WordPress Theme. Noe forårsaket pilen nederst på InfoWindow på kartet for å vise feil. Det er fordi .inngangsinnhold img på linje 857 har en max bredde sett. Dette skruer opp slik at Google gjør infoWindow. For å fikse det, skriv inn dette et sted under det:
```
 # kart-container img maksimal bredde: ingen; 
```

Kode