TUTORIEL

Google Maps API – ajout de plusieurs lieux sur une carte à l’aide de custom posts

Dans cet article, nous vous montrerons comment utiliser l’API Google Maps pour afficher une liste de messages personnalisés sous forme de broches sur la carte. Notre tâche consistera à créer une liste de lieux qui seront enregistrés comme type de poste personnalisé en tant que voyage. Chaque voyage aura un caractère spécifique :

  • lieu de voyage (nom familier),
  • state,
  • date,
  • description du voyage,
  • image (sera affichée sur la carte sous forme de point).

En outre, nous aimerions aligner les lieux que nous avons visités et colorier l’espace entre eux. Après avoir cliqué sur un lieu donné, nous afficherons des informations à son sujet.

Sous la carte, nous placerons une liste de voyages, ainsi que les lieux que nous avons visités. Après avoir cliqué sur un lieu donné de la liste – les informations sur ce point seront affichées sur la carte.

Créer une API_KEY pour l’API de Google Maps

Google Maps API est une application très puissante de Google, grâce à laquelle nous pouvons afficher différentes informations sur des cartes de manières très différentes. L’application est située sur Google Cloud Platform avec d’autres applications Google. Malheureusement, depuis un certain temps, la demande est devenue payable.

Actuellement, pour utiliser l’API Google Maps, vous devez créer un compte sur la plateforme Google Cloud. Après avoir créé un compte, nous recevons 300USD à utiliser sur les services Google. Il suffit à nos applications de créer une telle carte. Toutefois, si vous souhaitez créer une telle carte sur votre site web, qui génère beaucoup d’affichages – la limite gratuite sera rapidement utilisée.

Comment générer une clé pour l’API de Google Maps

Après vous être connecté à votre compte Google Cloud Platform, nous créons un projet de n’importe quel nom. Nous nommerons notre projet – Travels API. Après avoir créé le projet, nous entrons dans le menu de navigation et sélectionnons APIs and services &gt ; Library..

À la bibliothèque, nous sélectionnons les demandes nécessaires :

  • Cartes Javascript API
  • Places API.

google-maps-api-jak-stworzyc-klucz

Nous activons les deux applications et procédons à la création d’une clé.

Retournez à nouveau au panneau principal Interfaces API et services et allez à Données de connexion. Cliquez sur Create Login Details et sélectionnez Application interface key.

Il nous redirigera vers l’écran d’acceptation de OAuth. Nous donnons un nom à l’application et sélectionnons Type d’utilisateurs Externe.

google-maps-api-jak-stworzyc-klucz-api

Prêts ! Nous avons notre clé, nous la copions tout de suite.

klucz-api-google-maps

Créer un type de poste personnalisé à afficher sur la carte

Notre service Custom Post Type aura un service appelé ‘underside‘. Notre voyage aura plusieurs endroits sur la carte, nous devons donc utiliser ACF Repeater Field. Il s’agit d’un type de champ qui vous permet de répéter les valeurs de posture autant de fois que vous le souhaitez. Il s’agit d’un ajout à un plugin connu qui permet d’ajouter Custom Fields aux messages de ce type. Si vous ne savez pas comment fonctionnent les champs personnalisés – lisez notre article : Advanced Custom Fields – types de champs WordPress personnalisés.

Comment ajouter un champ récurrent dans l’ACF ?

Après avoir ajouté notre type de message personnalisé “sous-chapitre”, nous ajoutons un champ de répétition. Nous créons un nouveau groupe de champs qui correspondent au type de “sous-entrée”. Ajoutez une étiquette appropriée et sélectionnez le type de champ : Champ répétable. Ensuite, ajoutez tous les champs dont nous avons parlé au début de l’article.

acf-repeater-field-jak-stworzyc

Prêt! Nous avons créé un poste personnalisé de type Journey, qui possède tous les champs nécessaires pour être affiché sur la carte. Vous devez maintenant ajouter quelques exemples de voyages et de lieux visités.

Nous créons un widget qui ajoute une carte et une liste de nos voyages

Nous allons créer un widget podroze.php, qui ajoutera une carte et une liste de nos voyages en dessous. Pour cela, nous utiliserons la page WPBakery builder’s page. Bien sûr, nous pouvons aussi utiliser Elementor, si vous ne savez pas comment ajouter des widgets dans ces plugins – je parle d’articles en standard :
Propre plugin ajoutant un widget au plugin Elementor
Propre plugin ajoutant un widget au plugin WPBakery

À l’intérieur du widget, nous plaçons la configuration de base et nous chargeons la liste des voyages et des lieux que nous avons visités pendant le voyage.

Nous créons une carte avec des emplacements en utilisant AJAX

Une fois que nous avons la structure dans laquelle nous chargeons la carte et la liste de nos déplacements, nous passons à la création de la carte. Pour ce faire, nous allons sur functions.php, où nous devons ajouter notre redo-script.js script et enregistrer l’API Google Maps API script.

Si vous ne savez pas comment travailler avec AJAX dans WordPress, je vous invite à lire l’article : Comment créer un filtre de chargement de message personnalisé avec AJAX dans WordPress ?

Dans la get_travels() nous ajoutons à notre JSON $contents. Après la configuration initiale et l’affichage de la carte avec les lieux, nous passerons à une configuration plus avancée de notre carte (lieu, date, description, image).

AJAX script loading Google Maps API with custom posts

Dans le fichier functions.php, nous avons créé le get_travels(), qui renvoie une liste de lieux à afficher sur la carte. Pour le gérer, il faut d’abord configurer la carte pour l’afficher. Nous allons créer la initializeMap() et codeAdress().

Google Maps – initialisation de la carte

Dans initializeMap() nous allons charger l’ID de notre conteneur sur la carte et y ajouter une carte avec la configuration de base et les lieux qui seront chargés plus tard en utilisant AJAX. En outre, lors de l’initialisation de la carte, nous utiliserons la fonction codeAdress(), qui nous fera voir des informations sur le lieu après avoir cliqué dessus.

Suivre les données dans Google Maps avec AJAX

Chargez maintenant nos destinations et affichez-les sur la carte que nous allons afficher dans notre conteneur avec id #map-container using initializeMap().

Nous avons reçu une vue de notre carte avec une liste de voyages et de lieux.

google-maps-custom-post-type-wordpress

Configurer l’API Google Maps dans WordPress

Nous avons déjà une configuration de base de notre carte, qui affiche les lieux de déplacement. Nous aimerions configurer l’affichage de notre carte comme nous l’avons évoqué au début. Au lieu d’épingles sur la carte, nous afficherons l’image attribuée au lieu. Dans les descriptions de lieux, vous trouverez le nom du lieu, le pays, la description et la date. En outre, chaque voyage doit être relié par des lignes et la zone formant un polygone doit être peinte.

Google Maps API – chargement de ses propres données

La première étape consiste à charger et à afficher les données que nous souhaitons ajouter à la carte. Pour ce faire, nous devons charger le reste des données dans functions.php. Outre le nom de l’endroit, nous devons également télécharger :

  • trip list,
  • nom du pays,
  • description,
  • date,
  • image.

Nous codons json_encode() et envoyons dans un tableau $contents.

Nous passons à notre script JS – redo-script.js. Nous devons organiser correctement le JSON que nous avons reçu du serveur et y supprimer les données nécessaires.

Nous avons déjà toutes les données et nous pouvons les transmettre à la initialiserMap(), ce qui lance notre carte. Nous récupérons les données dans le constructeur de notre fonction :

Nous devons maintenant reconstruire notre boucle pour qu’elle puisse lire les listes de voyage et leurs données.

Maintenant, dans codeAddress() nous pouvons transmettre toutes les données de localisation et définir l’image de notre pin. Nous avons défini l’image en utilisant la valeur de l’icône du constructeur google.maps.Marker(). Nous allons également fixer la taille de l’image à 50px en largeur et 30px en hauteur. Le reste des données sera transmis à la valeur de l’infowindow, qui nous montrera le reste des informations sur la destination à l’écran.

De cette façon, nous avons obtenu une vue avec des images au lieu d’épingles et des informations sur une destination de voyage donnée.

tworzenie-wlasnej-mapy-google-maps

Polygones et polylignes dans l’API Google Maps – comment sélectionner une zone sur la carte

Nous passons à l’exigence suivante de notre projet. Nous aimerions que la liste sous la carte devienne interactive – après avoir cliqué sur un lieu de voyage donné, une fenêtre d’information sur la carte concernant ce lieu s’ouvrira. En outre, nous voulons marquer les zones de nos voyages sur la carte, en reliant entre eux tous les lieux d’un voyage donné et en créant un polygone, que nous peindrons de la couleur appropriée.

Interactive Google Maps API

list.
Dans notre script redo-script.js , nous plaçons un tableau vide appelé gmarkers[]. Ce tableau conservera tous les emplacements de notre carte. Il sera appelé lorsque vous cliquerez sur un élément de notre liste (lieu de voyage).

Les marqueurs[] seront passés dans codeAddress() et ajoutez-y la valeur du marqueur en utilisant push().

Nous modifions notre code redo-script.js en conséquence :

Nous passons maintenant à notre fichier podroze.php dans REDO JSComposer Additional plugin.

Ajouter un compteur $i=0 de notre boucle while(), qui comptera le nombre de destinations et pour chaque destination ajoutera un lien au marqueur attribué.

Tout le code podroze.php :

Créez votre propre zone sur une carte Google

Maintenant avec google.maps.Polygon nous créons des zones de nos voyages. Nous mettons dans la première boucle for(var i in travels) – responsable de l’affichage de nos listes de voyages – tableau vide poly =[], qui enregistrera les coordonnées de nos destinations de voyage. Ensuite, ajoutez poly. Cette valeur enregistrera la Polygon (la zone de la carte correspondant à la région de notre voyage). Nous fixons la couleur de la zone et d’autres valeurs.

Przekazujemy tablicę poly[] i zmienną polilinia do funkcji codeAddress().

Dans codeAddress() nous définissons latitude and longitude destinations de voyage. Ensuite, ajoutez à la variable polyline, qui est stockée dans la variable shape, using the push(). Enfin, nous avons défini le chemin de notre zone en utilisant setPath().

Nous revenons à notre initializeMap() et à la fin de notre boucle for(var and in travels) nous ajoutons le chemin final renvoyé par codeAddress() to polyline. Ensuite, ajoutez notre zone à la carte en utilisant setMap().

C’est le code complet de notre carte.

redo-script.js:

functions.php:

La vue de la carte reçue :

google-maps-api-custom-maps

Summing

Google Maps API est un outil puissant qui peut être modifié de nombreuses façons. La documentation de la demande est vraiment parfaite et nous y trouverons toutes les connaissances dont nous avons besoin pour atteindre les objectifs de notre demande. Nous avons réussi à accomplir la tâche fixée au début de l’article et à intégrer l’API Google Maps avec la fonctionnalité CMS WordPress. J’espère que cet article aidera quelqu’un à comprendre ou à résoudre les problèmes rencontrés lors de la création d’une telle carte.

Je vous invite à lire d’autres articles : Articles utiles.