Il existe beaucoup de solutions pour intégrer une carte Google dans vos contenus WordPress. Aujourd’hui nous allons voir une solution basée sur un champs Gmap d’Advanced Custom Field (ACF). Cet article est une traduction du tutoriel d’Alicia Ramirez.
Ce tutoriel est basé sur l’utilisation de l’excellentissime extension Advanced Custom Field car elle est utilisée sur la totalité de mes développement et très simple à mettre en oeuvre.
Étape 0: Obtenir une clé API Google Map.
Avant de pouvoir utiliser Google Maps, il va falloir obtenir une clé API Google Map. Vous pouvez utiliser l’API Standard qui autorise 25000 affichage de carte par jour) ou si vous avez beaucoup de trafic, vous devrez opter pour un plan Premium.
Étape 1: Ajouter du CSS
Coller ce code dans votre feuille de style (style.css) ou ailleurs si vous le pensez plus approprié.
Étape 2: Création d’un script Javascript initialisant la carte.
Copiez / collez ce code dans un fichier gmap.js que vous pourrez stocker dans un dossier de votre thème. Pour l’exemple nous prendrons library/js.
Étape 3: Chargement des scripts par WordPress
Maintenant, il vous faut charger les scripts précédemment créé lors du chargement de WordPress. Vous pourriez coller les liens dans le header.php de votre thème… mais ce n’est vraiment pas une bonne pratique WordPress. Nous allons utiliser la fonction dédiée de WordPress : wp_enqueue_script()
Dans votre functions.php de votre thème, ajoutez le code suivant:
Aux lignes 2 et 10, remplacez « XXXX » par votre clé API Google Map.
À la ligne 3, assurez vous d’avoir saisi le chemin vers le script JS créé à l’étape 2.
Étape 3 – Bonus
Si vous ne voulez charger votre carte que sur certaines page, par exemple la page « Contact », vous pouvez modifier le code comme ceci:
Étape 4: Affichage de la carte
Dans votre template de page, là ou vous désirez voir la carte, insérez ce code dans la Boucle:
Assurez vous de bien modifier le nom du champs ACF Google Map. Ici on a utilisé « location » dans get_field('location');.
Conclusion:
Vous venez d’ajouter une carte Gmap dans votre thème WordPress sans utiliser aucune extension. Notez que vous pouvez vous passer d’ACF si vous désirez saisir « en dur » les coordonnées GPS d’un lieu. Il vous suffira d’adapter les valeurs de data-lat et data-lng
Bonjour,
Votre tutoriel est très bien fait. Je me pose la question de savoir quel est la meilleure solution entre votre proposition ou la simple intégration, où l’on veut, du code fourni par Google :
Quelle est la méthode la plus efficiente de votre point de vue ?
Cordialement.
Bonjour Michel,
Merci pour votre commentaire.
Je préfère cette méthode qui évite les iframes de Google. Ici vous avez le choix du markup HTML ce qui vous permet de réaliser exactement ce que vous désirez comme rendu et de le modifier à vitre convenance.
Bonne journée