Tutoriels

Intégrer une Google Map sans extension dans WordPress

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()

A Lire Aussi:  Thivinfo présente un nouveau service: paroisse-catholique.fr

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

Ne ratez aucun de mes articles, abonnez vous à ma newsletter

(1 mail par mois s'il y a du nouveau contenu)

A Propos de l'auteur

Avatar - Sebastien Serre

Sebastien Serre

Passionné par le web depuis la fin des années 1990, j'ai développé au fil des ans des compétences en matière de création web. Créant des sites internet sous WordPress depuis 2006 et développant exclusivement sur Wordpress depuis 2014. Je créerai le site ou l'extension WordPress dont vous avez besoin. Développeur d'extensions, Contributeur au Core, Modérateur sur le forum WPFR, responsable de traduction WordPress et orateur lors de WordCamp, ma vie est rythmée par WordPress.

2 commentaires

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

  2. 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 *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

accumsan Sed neque. mattis tempus ultricies commodo