Donnez à vos clients des itinéraires routiers avec l'API Google Maps

Au lieu de simplement indiquer l'emplacement de votre entreprise sur une carte Google, pourquoi ne pas offrir à vos utilisateurs la possibilité d'obtenir des itinéraires sur la même page? Inutile pour eux d'ouvrir une nouvelle fenêtre de navigateur et de la trouver eux-mêmes, nous pouvons faire mieux que cela.!

L'utilisation de l'API Google Maps au sein de votre site Web WordPress est un processus relativement simple. Nous allons expliquer exactement comment procéder dans ce didacticiel..

Ce que nous ferons dans ce tutoriel…

D'abord, nous allons mettre en place options personnalisées afin que nous puissions entrer des informations sur notre carte dans le panneau d'administration WordPress.
Ensuite, nous utiliserons des codes courts pour générer un conteneur de carte, des champs de saisie et un conteneur de directions.
Enfin, nous écrirons du code JavaScript pour lancer la carte Google.

Remarque: Nous allons écrire un peu de JavaScript ici, mais ne vous inquiétez pas! Ceci est un didacticiel WordPress alors n'hésitez pas à faire un survol des parties JavaScript :)

Étape 1 Créer le répertoire et les fichiers

Créez un dossier dans votre thème appelé Carte
Dans ce dossier, créez map.php
Enfin créer map.js

Étape 2 Inclure le fichier map.php

Dans ton functions.php fichier (situé dans le répertoire racine de votre thème) - incluez le map.php fichier que vous avez créé en haut.

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

Étape 3 Enregistrer les paramètres

Il y a 3 choses que nous voulons pouvoir modifier à partir de la zone Admin.

La destination. Nous allons utiliser les valeurs de longitude et de latitude pour spécifier l'emplacement précis de votre destination (plus de détails à suivre)
le infoWindow contenu. C’est la bulle blanche que vous voyez souvent sur Google Maps - nous voulons pouvoir modifier le texte dans la bulle.!
Niveau de zoom initial de la carte - distance à laquelle la carte est agrandie lorsque l'utilisateur charge la page pour la première fois.

Dans map.php, accrocher dans admin_init pour enregistrer nos paramètres:

 fonction map_init () register_setting ('general', 'map_config_address'); register_setting ('général', 'map_config_infobox'); register_setting ('général', 'map_config_zoom');  add_action ('admin_init', 'map_init');

Maintenant, nous pouvons définir le titre de notre section dans la page des options et toutes les entrées dont nous avons besoin..

 fonction map_config_option_text () echo 'Définissez les options pour la carte ici:
';  // Longitude, valeurs de latitude pour la fonction Destination map_config_address () printf ((''), get_option (' map_config_address '));  // Le contenu du texte pour la fonction InfoWindow Bubble map_config_infobox () printf (('% s'), get_option (' map_config_infobox '));  // Le niveau de zoom initial de la carte. fonction map_config_zoom () printf ((''), get_option (' map_config_zoom '));

Enfin nous accrochons dans admin_menu pour afficher nos paramètres dans l'administrateur WordPress:

 function map_config_menu () add_settings_section ('map_config', 'Configuration de la carte', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Adresse - Longitude et 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', 'Niveau de zoom de la carte', 'map_config_zoom', 'general', 'map_config');  add_action ('admin_menu', 'map_config_menu');

Allez dans votre zone d'administration, vous devriez maintenant voir ceci:

Étape 4 Entrez votre destination, le texte infoWindow et le niveau de zoom

Adresse de destination

L’API de Google Maps accepte en fait des adresses régulières telles que «Newgate Lane, Mansfield, Nottinghamshire, Royaume-Uni». Toutefois, vous constaterez que vous voudrez être plus précis avec votre destination (par exemple, vous voudrez probablement directement à votre entreprise et pas seulement à la rue). Vous pouvez utiliser un exemple Google Maps API V3 pour rechercher votre destination. Faites glisser la cible jusqu'à ce que vous ayez repéré votre emplacement. Quand vous êtes content, copiez le Lat / Lng: valeur dans le champ d'adresse dans les options - par exemple 27.52774434830308, 42.18752500000007 (juste les nombres séparés par la virgule, pas de crochets ni de guillemets!)
Texte d'InfoWindow

Faites-en ce que vous voulez. Votre nom commercial serait une bonne idée :)
Le niveau de zoom

Un bon point de départ est 10.

Cliquez sur "Enregistrer les modifications". Lorsque la page sera actualisée, vous pourrez vérifier que les informations ont bien été stockées. Cela devrait ressembler à quelque chose comme ça maintenant:

Étape 5 Configurer les codes courts

Quand nous aurons fini, nous aurons 3 éléments: le Carte, la Forme, et le instructions - dans ce tutoriel, j’ai donc décidé de les scinder en 3 codes courts distincts. Cela nous permettra de modifier l'ordre / l'emplacement de chaque élément sans avoir à modifier aucun de nos codes PHP. Par exemple, vous pouvez décider d’avoir vos indications au-dessus de la carte plutôt qu’en dessous, ou sur le côté, etc..

Code court 1: wpmap_map

Ici, nous enregistrons et mettons en file d'attente le fichier JavasScript de l'API Google Maps, ainsi que notre propre fichier. maps.js fichier.

Ensuite, nous utilisons le $ sortie variable pour stocker notre carte-conteneur div avec quelques attributs de données personnalisés. ( data-map-infowindow va stocker le contenu pour l'infowindow et data-map-zoom représentera le niveau de zoom initial - ces deux valeurs sont renvoyées à l'aide de WordPress get_option une fonction).

Enfin, nous renvoyons le code HTML généré à la sortie:
```
 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 ')); return $ output;  add_shortcode ('wpmap_map', 'wpmap_map');
```
Code court 2: wpmap_directions_container

Ici, nous retournons simplement un vide div avec un identifiant de dir-container. Cela agira comme le conteneur pour les instructions.
```
 fonction wpmap_directions () $ output = '
'; return $ output;  add_shortcode ('wpmap_directions_container', 'wpmap_directions');
```
Code court 3: wpmap_directions_input

Cela génère le balisage nécessaire pour notre formulaire.

C’est également là que nous définirons notre dernière option personnalisée - l’adresse de destination. Cette fois-ci, nous utiliserons un champ de formulaire masqué pour contenir la valeur de latitude / longitude que nous avons entrée précédemment dans le panneau d'administration..
```
 fonction wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Pour les itinéraires routiers, entrez votre adresse ci-dessous:
     
'; return $ output;  add_shortcode ('wpmap_directions_input', 'wpmap_directions_input');
```

Maintenant que les codes abrégés sont configurés, vous pouvez les saisir et les saisir dans votre Contactez nous page (ou n'importe quelle page que vous aimez).

Si vous affichez un aperçu de la page maintenant, vous ne verrez que les champs de saisie du formulaire. En effet, nous n'avons pas encore écrit notre code JavaScript qui initialisera la carte et le div pour les directions est actuellement vide..

Remarque: Avant de plonger dans le code JavaScript, il suffit d’ajouter cela à notre style.css:

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

Étape 7: écriture de JavaScript pour interagir avec l'API Google Maps

Il est maintenant temps de faire de la magie! Je vais donner un bref aperçu de ce que nous allons faire en premier, puis nous allons creuser directement dans le code.

D'abord nous allons créer un objet WMmap et lui attribuer des propriétés (dont certaines seront extraites du balisage créé dans les codes courts)
Ensuite, nous ajouterons quelques méthodes pour gérer les fonctionnalités de la carte et des directions..
Une de ces méthodes, init, sera responsable du chargement de la carte et de la définition de certaines valeurs par défaut telles que le texte infoWindow, le niveau de zoom et la position initiale du marqueur (toutes à partir des options WordPress)
Enfin, nous allons définir un écouteur d'événement pour charger notre carte lorsque la page sera prête..

Prêt?

J'expliquerai chaque partie du code étape par étape, mais ne vous inquiétez pas si vous vous perdez, nous allons tout mettre ensemble à la fin..

Définir les propriétés

Créons notre objet et définissons des propriétés. Ici, nous interrogeons simplement le DOM pour récupérer les éléments HTML qui contiennent les valeurs dont nous avons besoin. Les noms de propriété que nous utilisons doivent être très clairs et faciles à comprendre (mapContainer est évidemment le conteneur de la carte, etc :))

Ici, nous obtenons également quelques objets de l’API que nous utiliserons plus tard lorsque nous traiterons avec.

 var WPmap = // éléments HTML que nous utiliserons plus tard! 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 '), // Objets API Google Maps dirService: nouveau google.maps.DirectionsService (), dirRenderer: nouveau google.maps.DirectionsRenderer (), map: null, * continue en dessous de * /

Les méthodes

Ceux-ci font également partie de notre WPmap objet, si vous n'êtes pas sûr de la façon dont tout est lié, veillez à consulter le bas de ce didacticiel pour voir tout le code ensemble..

`showDirections ()`

Ceci est appelé depuis une autre méthode que nous verrons plus tard, elle contrôle essentiellement l'insertion des instructions dans la page..

 / * dans l'objet WPmap * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Echec de la direction:' + dirStatus); revenir;  // Afficher les directions WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); ,

`getStartLatLng ()`

Ceci est appelé une fois de notre init méthode. Il va mettre le startLatLng propriété égale à google.maps.LatLng objet que nous pouvons utiliser plus tard. Cela nécessite que nous lui fournissions des valeurs de latitude et de longitude distinctes - comment pouvons-nous le faire?

Dans notre shortcode, nous avons inséré un champ de formulaire masqué contenant la valeur de latitude et de longitude définie dans l’administrateur de WordPress. Ensuite, nous avons récupéré le champ de formulaire caché et l'avons stocké dans saisir. Cela signifie que nous pouvons maintenant accéder à la valeur en utilisant WPmap.toInput.value
Cependant, la valeur que nous avons définie dans le formulaire est simplement une chaîne avec une virgule séparant les nombres. Pour séparer les valeurs, nous pouvons séparer la chaîne en utilisant .Divisé(","). Cela retournera un tableau contenant la latitude et la longitude sous forme de valeurs séparées.
Maintenant, nous pouvons accéder à chacun d'eux en utilisant l'index des tableaux.

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

`getSelectedUnitSystem ()`

Parce que nous avons laissé nos utilisateurs choisir s'ils préféraient les instructions en métrique ou en impérial, nous utilisons cette méthode pour définir: DirectionsUnitSystem soit MÉTRIQUE ou IMPÉRIAL.

 / * dans l'objet WPmap * / getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'métrique'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,

`obtenir des directions()`

C’est la méthode appelée lorsque l’utilisateur clique sur le bouton Obtenir des directions bouton.

Nous obtenons d’abord l’adresse saisie par l’utilisateur et la stockons dans le fromStr variable.
Ensuite, nous configurons un objet options - dirRequest. Cela contiendra les options nécessaires pour fournir les instructions de conduite.
1. origine - L'adresse que l'utilisateur a entrée.
2. destination - le google.maps.LatLng objet contenant les valeurs de latitude et de longitude de votre destination.
3. travelMode - Ici, nous nous assurons que nous ne récupérons que les Directions routières..
4. Système d'unité - Spécifier quelle unité de mesure utiliser en fonction du choix de l'utilisateur.
Enfin, nous appelons WPmap.dirService.route - et passez-y deux paramètres:
1. dirRequest - c'est l'objet contenant nos options.
2. WPmap.showDirections - la fonction de rappel qui gère le placement des instructions dans la page.

 / * dans l'objet WPmap * / getDirections: function () var fromStr = WPmap.fromInput.value; var dirRequest = origine: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,

`init ()`

C'est la méthode appelée lorsque la page est chargée. Il est responsable de:

Initier la carte, centré sur votre adresse.
Récupération des valeurs nécessaires pour définir le texte infoWindow et le niveau de zoom initial.
Définir un repère indiquant votre adresse.
Écouter quand un utilisateur clique sur 'Obtenir les directions' pour pouvoir supprimer le marqueur initial et la fenêtre d'information

 init: function () // récupère le texte et le niveau de zoom de info-fenêtre var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // appelle la méthode qui définit WPmap.startLatLng WPmap.getStartLatLng (); // configure la carte. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), centre: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configurer le marqueur rouge pin marker = new google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, glissable: false); // définir le contenu de l'infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marqueur); // écoute lorsque les instructions sont demandées google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // ferme le marqueur infoWindow initial.setVisible (false); // remove le marqueur initial);  // init; // <-- this is the end of the object.

Optionnel

Si vous souhaitez afficher un beau message (comme celui présenté ci-dessous) à vos utilisateurs une fois qu'ils ont demandé leur itinéraire, copiez simplement le code sous l'image dans l'écouteur d'événements situé à l'intérieur de la fenêtre. init méthode.

Optionnel Je vous remercie message:

 // Obtenir la distance du trajet var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // définit le contenu de la fenêtre info avant de la rouvrir. infoWindow.setContent ('Merci!
 On dirait que tu es sur  '+ distanceString +' loin de nous. 
Les directions sont juste en dessous de la carte '); // rouvre l'infoWindow infoWindow.open (WPmap.map, marqueur); setTimeout (function () infoWindow.close (), 8000); // le ferme après 8 secondes.

Étape 8 Ajouter l'écouteur d'événement qui chargera la carte

es-tu encore avec moi? Nous avons fait tout le chemin pour finir maintenant et tout ce qui reste à faire est d'appeler le WPmap.init () méthode lors du chargement de la page. Ajoutez ceci au bas de map.js

 google.maps.event.addDomListener (window, 'load', WPmap.init);

Assembler tout le JavaScript

Nous avons couvert un lot de terre ici, alors voyons à quoi il ressemble quand tout est mis en place.

 var WPmap = // éléments HTML que nous utiliserons plus tard! 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, // Objets API Google Maps dirService: nouveau google.maps.DirectionsService (), dirRenderer: nouveau google.maps.DirectionsRenderer (), map : null, showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Les instructions ont échoué:' + dirStatus); revenir;  // Afficher les directions 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 == 'métrique'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: function () var fromStr = WPmap.fromInput.value; // Récupère le code postal qui a été entré var dirRequest = origine: fromStr, destination: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // récupère le contenu var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // configure la carte. WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // s’assure qu’il passe par un centre entier: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // configuration du marqueur de broche rouge = new google.maps.Marker (map: WPmap.map, position: WPmap.startLatLng, draggable: false); // définir le contenu de l'infowindow infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, marqueur); // écoute lorsque les instructions sont demandées google.maps.event.addListener (WPmap.dirRenderer, 'directions_changed', function () infoWindow.close (); // ferme le premier infoWindow marker.setVisible (false); // remove le premier marqueur // les chaînes de configuration à utiliser. var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // définit le contenu de la fenêtre d'information avant de la rouvrir. setContent ('Merci!
 On dirait que tu es sur  '+ distanceString +' loin de nous. 
Les directions sont juste en dessous de la carte '); // rouvre l'infoWindow infoWindow.open (WPmap.map, marqueur); setTimeout (function () infoWindow.close (), 8000); // le ferme après 8 secondes. );  // init; google.maps.event.addDomListener (window, 'load', WPmap.init);

Notes du tutoriel

Assurez-vous de rechercher tout ce que vous ne comprenez pas sur le site Web de Google Maps API.
Lors de la rédaction de ce tutoriel, je testais mon code en utilisant le thème WordPress TwentyEleven. Quelque chose entraînait l'affichage incorrect de la flèche au bas de l'InfoWindow sur la carte. C'est parce que .contenu d'entrée img sur ligne 857 a un largeur maximale ensemble. Cela bousille la manière dont Google rend l'infoWindow. Pour résoudre ce problème, entrez ceci quelque part en dessous:
```
 # map-container img max-width: none; 
```

Code