Geef uw klanten routebeschrijvingen met de Google Maps API

In plaats van alleen uw bedrijfslocatie op een Google Map te tonen, kunt u uw gebruikers de mogelijkheid bieden om een routebeschrijving op dezelfde pagina te krijgen? Het is niet nodig voor hen om een nieuw browservenster te openen en het zelf te vinden, we kunnen het beter doen!

Het gebruik van de Google Maps API op uw WordPress-website is een relatief eenvoudig proces en we zullen precies onderzoeken hoe dit in deze zelfstudie wordt gedaan.

Wat we zullen doen in deze tutorial ...

Eerst zullen we er wat opzetten aangepaste opties zodat we informatie over onze kaart kunnen invoeren in het WordPress-beheerdersdashboard.
Vervolgens gebruiken we shortcodes om een kaartcontainer, invoervelden en routebeschrijvingen uit te voeren
Eindelijk zullen we wat JavaScript schrijven om de Google Map te starten

Notitie: We zullen hier een behoorlijk beetje JavaScript schrijven, maar maak je geen zorgen! Dit is een WordPress-zelfstudie dus voel je vrij om de JavaScript-gedeelten te verdoezelen :)

Stap 1 Maak de map en bestanden aan

Maak een map binnen uw thema genaamd Kaart
Maak in deze map map.php
Maak tot slot map.js

Stap 2 Neem het bestand map.php op

In uw functions.php bestand (bevindt zich in de hoofdmap van uw thema) - include de map.php bestand dat je bovenaan hebt aangemaakt.

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

Stap 3 Registreer instellingen

Er zijn 3 dingen die we willen kunnen bewerken vanuit het beheerdersgebied.

De bestemming. We gaan de lengtegraad- en breedtegraadwaarden gebruiken om de precieze locatie van uw bestemming op te geven (meer details volgen)
De infoWindow inhoud. Dit is de witte bubbel die je vaak op Google Maps ziet - we willen de tekst in de bubbel kunnen bewerken!
Initiële zoomniveau van de kaart - hoever de kaart is ingezoomd wanneer de gebruiker de pagina voor het eerst laadt.

In map.php, haak in admin_init om onze instellingen te registreren:

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

Nu kunnen we de koptekst voor onze sectie in de optiespagina en alle ingangen die we nodig hebben instellen.

 function map_config_option_text () echo 'Stel hier opties in voor de kaart:
';  // Longitude, Latitude Values voor de functie Destination map_config_address () printf ((''), get_option (' map_config_address '));  // De tekstinhoud voor de InfoWindow-functie Bubble map_config_infobox () printf (('% s'), get_option (' map_config_infobox '));  // Het initiële zoomniveau van de kaart. function map_config_zoom () printf ((''), get_option (' map_config_zoom '));

Eindelijk hangen we aan ADMIN_MENU om onze instellingen in de WordPress Admin weer te geven:

 function map_config_menu () add_settings_section ('map_config', 'Mapconfiguratie', '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');

Ga naar je admin gebied, je zou nu dit moeten zien:

Stap 4 Voer uw bestemming, info-venster tekst en zoomniveau in

Bestemmingsadres

De Google Maps API accepteert gewone adressen zoals 'Newgate Lane, Mansfield, Nottinghamshire, UK'. U zult echter merken dat u nauwkeuriger wilt zijn met uw bestemming (u wilt bijvoorbeeld waarschijnlijk wijzen op rechtstreeks naar uw bedrijf en niet alleen naar de straat). U kunt een V3-voorbeeld van Google Maps API gebruiken om naar uw bestemming te zoeken. Sleep het doelwit rond totdat je een vlek op je plek hebt. Als je tevreden bent, kopieer je het Lat / Lng: waarde in het adresveld in de opties - bijvoorbeeld 27.52774434830308, 42.18752500000007 (alleen de cijfers gescheiden door de komma, geen haakjes of aanhalingstekens!)
InfoWindow-tekst

Maak dit wat je maar wilt. Uw bedrijfsnaam zou een goed idee zijn :)
Zoomniveau

Een goed startpunt is 10.

Klik op 'Wijzigingen opslaan' en wanneer de pagina wordt vernieuwd, kunt u controleren of de informatie is opgeslagen. Het zou er nu ongeveer zo uit moeten zien:

Stap 5 Stel de shortcodes in

Als we klaar zijn, hebben we 3 elementen: de Kaart, de Het formulier, en de Routebeschrijving - dus in deze tutorial heb ik besloten om ze op te splitsen in 3 verschillende shortcodes. Hierdoor kunnen we de volgorde / plaatsing van elk item wijzigen zonder een van onze PHP-code te hoeven wijzigen. U kunt bijvoorbeeld besluiten om uw routebeschrijving boven de kaart te houden in plaats van onder, of aan de zijkant, enz.

Shortcode 1: wpmap_map

Hier registreren en plaatsen we het JavaScript-bestand van de Google Maps API en het eigen bestand maps.js het dossier.

Vervolgens gebruiken we de $ uitgang variabele om onze op te slaan map-container div samen met enkele aangepaste gegevensattributen. ( data-map-infowindow zal de inhoud voor het infowindow en opslaan data-map-zoom representeert het initiële zoomniveau - beide waarden worden geretourneerd met behulp van WordPress's get_option functie).

Eindelijk geven we de gegenereerde HTML als output terug:
```
 functie 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 op maat'); $ output = sprintf ('
', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); return $ output;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Shortcode 2: wpmap_directions_container

Hier geven we eenvoudig een lege terug div met een ID van dir-container. Dit zal fungeren als de container voor de aanwijzingen.
```
 function wpmap_directions () $ output = '
'; return $ output;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Shortcode 3: wpmap_directions_input

Dit genereert de markup die nodig is voor ons formulier.

Dit is ook waar we onze laatste aangepaste optie zullen instellen - het adres van de bestemming. Deze keer gebruiken we een veld met een verborgen formulier om de waarde voor de lengte- / breedtegraad te behouden die we eerder in het beheerdersdashboard hebben ingevoerd.
```
 function wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Voor routebeschrijvingen voert u hieronder uw adres in:
     
'; return $ output;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Nu we de shortcodes hebben ingesteld, kunt u doorgaan en ze in uw code typen Neem contact met ons op pagina (of elke gewenste pagina).

Als u nu een voorbeeld van de pagina bekijkt, ziet u alleen de formulierinvoervelden. Dat komt omdat we onze JavaScript niet hebben geschreven die de kaart nog zal initialiseren en de div voor de routebeschrijving is momenteel leeg.

Notitie: Voordat we in JavaScript duiken, hoeven we dit alleen maar toe te voegen aan ons style.css:

 # kaart-container breedte: 100%; hoogte: 400 px;

Stap 7 JavaScript schrijven om interactie te hebben met de Google Maps API

Nu is het tijd om de magie te laten gebeuren! Ik zal een snel overzicht geven van wat we eerst gaan doen, dan graven we meteen in de code.

Eerst gaan we een object maken WMmap en er eigenschappen aan toewijzen (waarvan we sommige zullen halen uit de markup die we in de shortcodes hebben gemaakt)
Vervolgens voegen we een paar methoden toe om de functionaliteit van de kaart en routebeschrijvingen te verwerken.
Een van deze methoden, in het, is verantwoordelijk voor het laden van de kaart en ook voor het instellen van een aantal standaardwaarden, zoals de infoWindow-tekst, het zoomniveau en de initiële markeringspositie (alle uit de WordPress-opties)
Eindelijk stellen we een gebeurtenislistener in om onze kaart te laden wanneer de pagina gereed is.

Klaar?

Ik zal elk deel van de code stap voor stap uitleggen, maar maak je geen zorgen als je verdwaalt, we leggen het allemaal samen aan het eind.

Stel Eigenschappen in

Laten we ons object maken en een aantal eigenschappen instellen. Hier vragen we eenvoudigweg de DOM om de HTML-elementen op te halen die de waarden bevatten die we nodig hebben. De namen van eigendommen die we gebruiken, moeten heel duidelijk en duidelijk zijn (mapContainer is natuurlijk de kaartcontainer, enz :))

Hier krijgen we ook een aantal objecten uit de API die we later zullen gebruiken wanneer we omgaan met routebeschrijvingen.

 var WPmap = // HTML-elementen die we later zullen gebruiken! 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 '), // Google Maps API Objects dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / * gaat verder onder * /

De methodes

Deze maken ook deel uit van ons WPmap object, als u niet zeker weet hoe alles aan elkaar vastzit, raadpleegt u onderaan deze tutorial om alle code samen te bekijken.

`showDirections ()`

Dit wordt aangeroepen vanuit een andere methode die we later zullen zien, het controleert in feite het invoegen van de richtingen in de pagina.

 / * binnen WPmap-object * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Directions failed:' + dirStatus); terug te keren;  // Toon aanwijzingen WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Dit wordt eenmaal van ons genoemd in het methode. Het zal de startLatLng eigendom gelijk aan a google.maps.LatLng object dat we later kunnen gebruiken. Het vereist dat we afzonderlijke waarden voor de breedte- en lengtegraad opgeven - hoe kunnen we dit doen?

In onze shortcode hebben we een verborgen formulierveld ingevoegd dat de waarde voor de lengte- en breedtegraad bevat die we in de WordPress Admin hebben ingesteld. Vervolgens hebben we het verborgen formulierveld opgehaald en opgeslagen invoeren. Dit betekent dat we nu toegang hebben tot de waarde via WPmap.toInput.value
De waarde die we in het formulier instellen, is echter slechts een tekenreeks met een komma die de nummers scheidt. Om de waarden te scheiden kunnen we de string opsplitsen met behulp van .split ( ""). Hierdoor wordt een array geretourneerd die de lengte- en breedtegraad als afzonderlijke waarden bevat.
Nu hebben we toegang tot elk met behulp van de array-index.

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

`getSelectedUnitSystem ()`

Omdat we onze gebruikers hebben toegestaan te selecteren of ze de voorkeur geven aan richtingen in Metric of Imperial, gebruiken we deze methode om in te stellen DirectionsUnitSystem voor beide METRIEK of IMPERIAL.

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

`de weg vragen()`

Dit is de methode die wordt aangeroepen wanneer de gebruiker op de knop klikt De weg vragen knop.

Eerst krijgen we het adres dat de gebruiker heeft ingevoerd en opslaan in de fromStr veranderlijk.
Vervolgens stellen we een optieobject op - dirRequest. Dit bevat de opties die nodig zijn om de routebeschrijving te geven.
1. oorsprong - Het adres dat de gebruiker heeft ingevoerd.
2. bestemming - De google.maps.LatLng object met de waarden voor de breedte- en lengtegraad van uw bestemming.
3. travelMode - Hier zorgen we ervoor dat we alleen routebeschrijvingen ophalen.
4. eenheidssysteem - Specificeer welke meeteenheid moet worden gebruikt op basis van de keuze van de gebruiker.
Eindelijk bellen we WPmap.dirService.route - en geef er twee parameters aan door:
1. dirRequest - dit is het object dat onze opties bevat.
2. WPmap.showDirections - de callback-functie die de plaatsing van de routebeschrijving op de pagina afhandelt.

 / * binnen WPmap-object * / getDirections: function () var fromStr = WPmap.fromInput.value; var dirRequest = origin: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`in het()`

Dit is de methode die wordt aangeroepen wanneer de pagina wordt geladen. Het is verantwoordelijk voor:

Het initiëren van de kaart, gecentreerd op uw adres.
Ophalen van waarden die nodig zijn om de infoWindow-tekst en het initiële zoomniveau in te stellen.
Een markeringspen instellen die uw adres toont.
Luisteren wanneer een gebruiker op 'Routebeschrijving' klikt, zodat deze de eerste marker en het informatievenster kan verwijderen

 init: function () // verkrijg de infowindow-tekst en het zoomniveau var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // noem de methode die WPmap.startLatLng WPmap.getStartLatLng () instelt; // stel de kaart in. WPmap.map = nieuwe google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), center: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // setup de rode marker pin marker = new google.maps.Marker (map: WPmap.map, positie: WPmap.startLatLng, draggable: false); // stel de infowindow-content infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // luisteren naar wanneer richtingen worden opgevraagd google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // sluit de eerste infoWindow marker.setVisible (false); // remove de eerste markering); //in het ;// <-- this is the end of the object.

Optioneel

Als u een leuk bericht (zoals hieronder) wilt weergeven aan uw gebruikers nadat zij een routebeschrijving hebben aangevraagd, kopieert u de code onder de afbeelding naar de gebeurtenislistener in de in het methode.

facultatief Dank je bericht:

 // Verkrijg de afstand van de reis var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // stel de inhoud van het infoWindow in voordat we het opnieuw openen. infoWindow.setContent ( 'Thanks!
 Lijkt erop dat je het over hebt  '+ distanceString +' weg van ons. 
Aanwijzingen staan net onder de kaart '); // open de infoWindow infoWindow.open (WPmap.map, marker) opnieuw; setTimeout (function () infoWindow.close (), 8000); // sluit het na 8 seconden.

Stap 8 Voeg de gebeurtenis-luisteraar toe die de kaart zal laden

Ben je nog steeds bij me? We zijn nu helemaal op weg om te eindigen en het enige dat nog te doen is, is het WPmap.init () methode wanneer de pagina wordt geladen. Voeg dit toe onderaan map.js

 google.maps.event.addDomListener (venster, 'laden', WPmap.init);

Alle JavaScript samenvoegen

We hebben een a lot van de grond hier, dus laten we eens kijken hoe het eruit ziet als het allemaal in elkaar zit.

 var WPmap = // HTML-elementen die we later zullen gebruiken! 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, // Google Maps API Objects 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); terug te keren;  // Toon aanwijzingen 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; // Haal de postcode op die is ingevoerd var dirRequest = origin: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // haal de content var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // stel de kaart in. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // zorg ervoor dat het doorkomt als een Integer center: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // setup de rode pin marker marker = new google.maps.Marker (map: WPmap.map, positie: WPmap.startLatLng, draggable: false); // stel de infowindow-content infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marker); // listen for when Directions worden gevraagd google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // sluit de eerste infoWindow marker.setVisible (false); // remove de eerste markering // set-up reeksen die moet worden gebruikt var afstandString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // stel de inhoud van het infoWindow in voordat we het opnieuw openen. setContent ( 'Thanks!
 Lijkt erop dat je het over hebt  '+ distanceString +' weg van ons. 
Aanwijzingen staan net onder de kaart '); // open de infoWindow infoWindow.open (WPmap.map, marker) opnieuw; setTimeout (function () infoWindow.close (), 8000); // sluit het na 8 seconden. ); //in het ; google.maps.event.addDomListener (venster, 'laden', WPmap.init);

Tutorial opmerkingen

Zorg ervoor dat u alles onderzoekt wat u niet begrijpt op de Maps API-website van Google
Toen ik deze tutorial schreef, testte ik mijn code met het TwentyEleven WordPress-thema. Er was iets waardoor de pijl onderaan het InfoWindow op de kaart onjuist werd weergegeven. Het is omdat .entry-content img op regel 857 heeft een Maximale wijdte te stellen. Dit verknoeit de manier waarop Google het infoWindow rendert. Om het probleem op te lossen, voert u dit ergens onder het adres in:
```
 # map-container img max-width: none; 
```

Code