Ge dina kunders körbeskrivning med Google Maps API

I stället för att bara visa din företagsplats på en Google Map, varför inte erbjuda dina användare möjlighet att få körriktningar på samma sida? Inget behov av att de öppnar ett nytt webbläsarfönster och hittar det själva, det kan vi göra bättre än så!

Att använda Google Maps API på din WordPress-webbplats är en relativt enkel process och vi utforskar exakt hur du gör det i den här handledningen.

Vad vi ska göra i den här handledningen ...

Först ska vi sätta upp några anpassade alternativ så att vi kan ange information om vår karta på WordPress Admin panel.
Sedan använder vi kortnummer för att mata ut en kartbehållare, inmatningsfält och vägvisningsbehållare
Slutligen skriver vi några JavaScript för att initiera Google Map

Notera: Vi skriver en bra bit av JavaScript här, men oroa dig inte! Det här är en WordPress-handledning, så gärna glömma över JavaScript-delarna :)

Steg 1 Skapa katalogen och filer

Skapa en mapp i ditt tema som heter Karta
Inne i den här mappen skapar du map.php
Skapa slutligen map.js

Steg 2 Inkludera map.php-filen

I din functions.php fil (som finns i rotkatalogen i ditt tema) - inkludera map.php filen du skapade högst upp.

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

Steg 3 Registrera inställningar

Det finns 3 saker som vi vill kunna redigera från Admin-området.

Destinationen. Vi ska använda längd- och latitudvärden för att ange exakt platsen för din destination (mer information att följa)
De infoWindow innehåll. Det här är den vita bubblan som du ofta ser på Google Maps - vi vill kunna redigera texten i bubblan!
Första zoomnivån på kartan - hur långt kartan zoomas in när användaren först laddar sidan.

I map.php, krok in admin_init att registrera våra inställningar:

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

Nu kan vi ställa in rubriktexten för vårt avsnitt på alternativsidan och alla inmatningar vi behöver.

 funktion map_config_option_text () echo 'Ange alternativ för kartan här:
';  // Longitude, Latitude-värden för destinationsfunktionen map_config_address () printf ((''), get_option (' map_config_address '));  // Textinnehållet för InfoWindow Bubble-funktionen map_config_infobox () printf (('% s'), get_option (' map_config_infobox '));  // Första zoomnivån på kartan. funktion map_config_zoom () printf ((''), get_option (' map_config_zoom '));

Slutligen krokar vi till admin_menu för att visa våra inställningar i WordPress-administratören:

 funktion map_config_menu () add_settings_section ('map_config', 'Map Configuration', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Adress - Longitude och 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');

Gå in i ditt adminområde, du borde nu se detta:

Steg 4 Ange ditt mål, infoVindu text och zoomnivå

Destinations adress

Google Maps API accepterar faktiskt vanliga adresser som "Newgate Lane, Mansfield, Nottinghamshire, Storbritannien" - Men du kommer att märka att du kommer att vilja vara mer exakt med din destination (till exempel kommer du sannolikt att peka direkt till ditt företag och inte bara gatan). Du kan använda ett Google Maps API V3-prov för att söka efter din destination. Dra målet runt tills du har spetsat din plats. När du är glad, kopiera LAT / LNG: värdet till adressfältet i alternativen - till exempel 27.52774434830308, 42.18752500000007 (bara siffrorna separerade av kommatecken, inga parenteser eller citat!)
InfoWindow Text

Gör så vad du vill. Ditt företagsnamn skulle vara en bra idé :)
Zoomnivå

En bra utgångspunkt är 10.

Klicka på "Spara ändringar" och när sidan uppdateras kan du kontrollera att informationen har lagrats. Det borde se något så här nu:

Steg 5 Ställ in kortnummer

När vi är färdiga har vi 3 element: Karta, de Form, och den Vägbeskrivning - så i den här handledningen har jag bestämt mig för att dela upp dem i tre separata kortnummer. Detta gör det möjligt för oss att ändra ordning / placering av varje objekt utan att behöva ändra någon av vår PHP-kod. Du kan till exempel bestämma att du har dina riktningar ovanför kartan istället för nedan, eller vid sidan, etc..

Kortnummer 1: wpmap_map

Här registrerar och registrerar vi JavasScript-filen för Google Maps API och vår egen maps.js fil.

Nästa använder vi $ utgång variabel för att lagra vår map-behållare div tillsammans med några anpassade data attribut. ( data karta-infowindow lagrar innehållet för infowindow och data map-zoom kommer att representera den ursprungliga zoomnivån - båda värdena returneras med hjälp av WordPress get_option fungera).

Slutligen returnerar vi den genererade HTML som utmatas:
```
 funktion wpmap_map () wp_register_script ('google-maps', 'http://maps.google.com/maps/api/js?sensor=false'); wp_enqueue_script ( 'google-kartor'); wp_register_script ('wptuts-custom', get_template_directory_uri (). '/ map / map.js', ',' true); wp_enqueue_script ( 'wptuts-anpassad'); $ output = sprintf ('
', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); returnera $ output;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Kortnummer 2: wpmap_directions_container

Här återkommer vi helt enkelt en tom div med ett ID av dir-behållare. Detta kommer att fungera som behållaren för anvisningarna.
```
 funktion wpmap_directions () $ output = '
'; returnera $ output;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Kortnummer 3: wpmap_directions_input

Detta genererar den Markup som behövs för vår blankett.

Det här är också där vi ställer in vårt slutliga anpassade alternativ - destinationsadressen. Den här gången använder vi ett doldt formulärfält för att hålla Latitude / Longitude-värdet som vi angav tidigare i administratörspanelen.
```
 funktion wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' För Körbeskrivning, Ange din adress nedan:
     
'; returnera $ output;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Nu har vi de kortnummer som ställts in, du kan gå vidare och skriva in dem i din Kontakta oss sida (eller vilken sida du vill).

Om du förhandsgranskar sidan nu är allt du ser är formfältet. Det beror på att vi inte har skrivit vår JavaScript som initialiserar kartan ännu och diven för anvisningarna är för närvarande tom.

Notera: Innan vi dyker in i JavaScript behöver vi bara lägga till det här i vårt style.css:

 # map-container bredd: 100%; höjd: 400px;

Steg 7 Skriva JavaScript för att interagera med Google Maps API

Nu är det dags att få magiken att hända! Jag ger en snabb nedgång av vad vi ska göra först, då gräver vi rakt in i koden.

Först ska vi skapa ett objekt WMmap och tilldela egenskaper till det (vissa av vilka vi kommer att ta tag i den markering som vi skapade i kortkoderna)
Sedan lägger vi till några metoder för att hantera funktionaliteten för kartan och riktningarna.
En av dessa metoder, i det, kommer att ansvara för att ladda kartan och även för att ställa in några standardvärden som infoWindow-text, zoomnivå och startmarkörsposition (allt från WordPress-alternativ)
Slutligen ställer vi in en händelselyssnare för att ladda vår karta när sidan är klar.

Redo?

Jag förklarar varje del av koden steg för steg, men oroa dig inte om du går vilse, lägger vi samman allt i slutet.

Ange egenskaper

Låt oss skapa vårt objekt och ställa in några egenskaper. Här frågar vi bara DOM för att hämta HTML-elementen som innehåller de värden vi behöver. Egenskapsnamnen vi använder bör vara mycket tydliga och självförklarande (mapContainer är självklart Map Container, etc :))

Här får vi också ett par objekt från API som vi ska använda senare när vi hanterar vägbeskrivningar.

 var WPmap = // HTML Elements vi ska använda senare! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tillInput: document.getElementById ('map-config-adress'), frånInput: document.getElementById Inmatning:) * fortsätter nedanför * /

Metoderna

Dessa är också en del av vår WPmap objekt, om du är osäker på hur allt knyts samman, se till att kolla in botten av denna handledning för att se hela koden tillsammans.

`showDirections ()`

Detta kallas från en annan metod som vi kommer att se senare, det kontrollerar i grunden införandet av anvisningarna i sidan.

 / * inom WPmap-objektet * / showDirections: funktion (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Anvisningar misslyckades:' + dirStatus); lämna tillbaka;  // Visa vägbeskrivning WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Detta kallas en gång från vår i det metod. Det kommer att ställa in startLatLng egendom lika med a google.maps.LatLng objekt som vi kan använda senare. Det kräver att vi tillhandahåller det separata Latitude och Longitude värden - hur kan vi göra det här?

I vår kortnummer införde vi ett doldt formulärfält som innehåller det Latitude och Longitude-värdet som vi satt i WordPress-administratören. Då hämtade vi det dolda formuläret och lagrade det Att mata in. Det betyder att vi nu kan komma åt värdet med WPmap.toInput.value
Det värde vi ställer in i formuläret är dock bara en sträng med ett komma som skiljer siffrorna. För att skilja värdena kan vi dela upp strängen med .dela(","). Detta kommer att returnera en array som innehåller Latitude och Longitude som separata värden.
Nu kan vi komma åt var och en genom att använda array-indexet.

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

`getSelectedUnitSystem ()`

Eftersom vi har tillåtit våra användare att välja om de föredrar riktningar i metriska eller kejserliga använder vi den här metoden för att ställa in DirectionsUnitSystem att antingen METRISK eller KEJSERLIG.

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

`Få vägbeskrivningar()`

Detta är den metod som kallas när användaren klickar på Få vägbeskrivningar knapp.

Först får vi adressen som användaren angav och lagrade den i fromStr variabel.
Nästa ställer vi upp ett alternativobjekt - dirRequest. Detta kommer att innehålla de alternativ som behövs för att ge körbeskrivning.
1. ursprung - Den adress som användaren angav.
2. destination - De google.maps.LatLng objekt som innehåller destinationens Latitude och Longitude-värden.
3. travelMode - Här ser vi till att vi bara hämtar Körbeskrivning.
4. unitSystem - Ange vilken måttenhet som ska användas baserat på användarens val.
Slutligen kallar vi WPmap.dirService.route - och skicka två parametrar till den:
1. dirRequest - Det här är objektet som innehåller våra alternativ.
2. WPmap.showDirections - Återuppringningsfunktionen som hanterar placeringen av anvisningarna i sidan.

 / * inom WPmap-objektet * / getDirections: funktion () var fromStr = WPmap.fromInput.value; var dirRequest = ursprung: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`i det()`

Det här är den metod som heter när sidan laddas. Det ansvarar för:

Initiera kartan, centrerad på din adress.
Hämtar värden som behövs för att ställa in infoWindow-texten och den ursprungliga Zoom-nivån.
Ställer in en markörstav som visar din adress.
Lyssna när när en användare klickar på "Hämta vägbeskrivningar" så att den kan ta bort den ursprungliga markören och infoWindow

 init: funktion () // få infowindow text och zoom nivå var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // kalla metoden som anger WPmap.startLatLng WPmap.getStartLatLng (); // ställa in kartan. WPmap.map = nya google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), center: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // ställa in den röda markörpenmarkören = nya google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // Ange infowindow innehåll infoWindow = nya google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // lyssna på när Vägbeskrivning begärs google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funktion () infoWindow.close (); // stäng den ursprungliga infoWindow marker.setVisible (false); // ta bort den ursprungliga markören); //i det ;// <-- this is the end of the object.

Valfritt

Om du vill visa ett bra meddelande (som det som ses nedan) till dina användare efter att ha begärt anvisningar, kopiera bara koden under bilden till händelselyssnaren inuti i det metod.

Valfri Tack meddelande:

 // Få resans avstånd var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // Ange innehållet i infoWindow innan vi öppnar det igen. infoWindow.setContent ( "Tack!
 Ser ut som om du är om  '+ avståndstring +' bort från oss. 
Vägbeskrivning ligger strax nedanför kartan '); // öppna informationenWindow infoWindow.open (WPmap.map, marker); setTimeout (funktion () infoWindow.close (), 8000); // stäng den efter 8 sekunder.

Steg 8 Lägg till händelselysaren som laddar kartan

Är du fortfarande med mig? Vi har gjort allt för att sluta nu och allt som är kvar att göra är att ringa WPmap.init () metod när sidan laddas. Lägg till detta till botten av map.js

 google.maps.event.addDomListener (fönster, "ladda", WPmap.init);

Att sätta alla JavaScript tillsammans

Vi har täckt en massa av marken här, så låt oss se hur det ser ut när det är allt ihop.

 var WPmap = // HTML Elements vi ska använda senare! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), tillInput: document.getElementById ('map-config-adress'), frånInput: document.getElementById input), enhetInput: document.getElementById ('unit-input'), startLatLng: null, // Google Maps API-objekt dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), karta : null, showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Anvisningar misslyckades:' + dirStatus); lämna tillbaka;  // Visa vägbeskrivning WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: funktion () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = nya google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () returnera WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: function () var fromStr = WPmap.fromInput.value; // Få postnumret som angetts var dirRequest = ursprung: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: funktion () // få innehållet var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // ställa in kartan. WPmap.map = nya google.mapsMap (WPmap.mapContainer, zoom: parseInt (initialZoom), // se till att den kommer genom som ett Integer-center: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // ställa in den röda stiftmarkörmarkören = nya google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // Ange infowindow innehåll infoWindow = nya google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // lyssna på när Vägbeskrivning begärs google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', funktion () infoWindow.close (); // stäng den första infoWindow marker.setVisible (false); // ta bort den första markören // inställningssträngar som ska användas. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // Ange innehållet i infoWindow innan vi öppnar det igen. infoWindow. setContent ( "Tack!
 Ser ut som om du är om  '+ avståndstring +' bort från oss. 
Vägbeskrivning ligger strax nedanför kartan '); // öppna informationenWindow infoWindow.open (WPmap.map, marker); setTimeout (funktion () infoWindow.close (), 8000); // stäng den efter 8 sekunder. ); //i det ; google.maps.event.addDomListener (fönster, "ladda", WPmap.init);

Tutorial Notes

Var noga med att undersöka allt du inte förstår på Googles Maps API-webbplats
När jag skrev denna handledning testade jag min kod med hjälp av lagret TwentyEleven WordPress Theme. Något orsakade pilen längst ner på InfoWindow på kartan för att visas felaktigt. Det beror på att .inträdesinnehåll img på rad 857 har en maximal bredd uppsättning. Detta skruvar upp så som Google gör infoWindow. För att fixa det, skriv det här någonstans under det:
```
 # map-container img max-width: none; 
```

Koda