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é.

CSS
style.css

É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.

JS
gmap.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:

PHP
functions.php

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:

PHP
functions.php

É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:

PHP

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

2 commentaires sur “Intégrer une Google Map sans extension dans WordPress

  • Michel

    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.

    • Sebastien Serre

      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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *