Guide complet : Comment intégrer Google Maps dans WordPress

Comment intégrer un seul emplacement Google Maps dans WordPress

Commençons par la manière la plus simple d'afficher un emplacement Google Maps sur votre site WordPress. Si vous souhaitez simplement intégrer une carte avec un emplacement ou une vue unique, vous n'avez pas besoin d'outils ou de plugins sophistiqués - il vous suffit de coller le code d'intégration de Google Maps dans votre site WordPress .

Voici comment tout cela fonctionne :

Accédez au site Web de Google Maps comme d'habitude et recherchez l'emplacement que vous souhaitez intégrer. Vous pouvez rechercher n'importe quoi. C'est-à-dire:

• Un pays entier
• Une ville précise
• Une entreprise spécifique
• Vous le nommez

Cela n'a pas vraiment d'importance !

Une fois que vous avez l'emplacement que vous souhaitez afficher sur votre carte, recherchez le bouton Partager dans la barre latérale gauche :

Vous devriez voir apparaître une petite popup. Cliquez sur l'option Intégrer la carte dans cette fenêtre :

Ensuite, choisissez la taille souhaitée dans le menu déroulant. Et une fois que vous avez sélectionné la taille que vous souhaitez, copiez le code dans la case :

Maintenant, dirigez-vous vers la publication ou la page WordPress où vous souhaitez intégrer la boîte Google Maps.

Dans l'éditeur WordPress, basculez vers l'onglet Texte et collez le code que vous avez copié depuis Google Maps à l'endroit où vous souhaitez que votre carte apparaisse :

Maintenant, publiez votre message comme d'habitude et vous devriez voir votre boîte Google Maps sur le front-end de votre site WordPress :

Assez facile, non ?

Vous pouvez également utiliser une méthode similaire pour intégrer les directions Google Maps dans WordPress. La seule différence est l'interface de démarrage. Au lieu de voir le bouton Partager tout de suite, vous devrez cliquer sur l'icône hamburger et choisir l'option Partager ou intégrer la carte :

Comment intégrer Google Maps avec plusieurs marqueurs de localisation dans WordPress

Si vous souhaitez intégrer une boîte Google Maps avec plusieurs marqueurs de localisation dans WordPress, les choses sont un peu différentes.

Bien que je vous montre deux plugins Google Maps WordPress pour vous aider à accomplir cela dans la section suivante, vous n'avez en fait pas besoin d'un plugin pour le faire .

Au lieu de cela, vous pouvez créer votre propre carte à l'aide de Google My Maps, puis intégrer cette carte dans WordPress en utilisant une méthode similaire à celle décrite ci-dessus.

Pour commencer, rendez-vous sur Google My Maps et cliquez sur Commencer pour lancer l'interface. Dans l'interface, cliquez sur l'option Créer une nouvelle carte :

Ensuite, utilisez l'interface pour créer votre carte. Il peut être un peu difficile de démarrer, mais une fois que vous maîtrisez les choses, c'est assez facile à utiliser. Vous pouvez rechercher des éléments à l'aide du champ de recherche et vous pouvez ajouter des marqueurs sur la carte à l'aide du bouton Marqueur :

Une fois que vous êtes satisfait de votre carte, cliquez sur l'icône à trois points en haut et sélectionnez Intégrer sur mon site .

Ensuite, comme auparavant, vous pouvez coller le code fourni par Google Maps dans l'onglet Texte de l'éditeur WordPress pour afficher la carte sur votre site WordPress.

Plugins WordPress pour vous aider à travailler encore plus avec Google Maps

Bien que vous n'ayez pas vraiment besoin d'un plugin pour gérer l'intégration de base de Google Maps comme je vous l'ai montré ci-dessus, les plugins peuvent être utiles si vous voulez plus de flexibilité (ou si vous voulez un moyen plus convivial de mettre en œuvre cette flexibilité).

La plupart des plugins ne font pas vraiment quelque chose que vous ne pourriez pas faire vous-même avec suffisamment d'huile de coude - mais ils le rendent beaucoup plus facile et plus convivial. Voici quelques plugins intéressants pour vous aider à mieux travailler avec Google Maps.

WP Google Maps

WP Google Maps est le plugin Google Maps gratuit le plus populaire du répertoire de plugins WordPress.org.

Il vous aide à créer vos propres affichages Google Maps personnalisés à l'aide de marqueurs de carte que vous choisissez et de différents thèmes de carte. Fondamentalement, il s'agit d'une implémentation plus conviviale du processus que je viens de décrire ci-dessus.

Le seul inconvénient est que la version gratuite ne vous permet de créer qu'une seule carte. Si vous avez besoin de plusieurs cartes, vous devrez soit acheter la version premium, soit utiliser une autre solution.

Pour commencer, installez et activez WP Google Maps. Comme il est répertorié sur WordPress.org, vous pouvez le faire directement depuis votre tableau de bord WordPress.

Une fois que vous l'avez activé, accédez à la nouvelle option Maps dans votre barre latérale pour commencer.

Cependant, avant de pouvoir créer votre première carte, vous devez obtenir une clé API JavaScript Google Maps et la saisir dans les paramètres du plug-in. Vous pouvez le faire en suivant ces instructions :

Une fois que vous avez entré votre clé API, vous pouvez modifier la valeur par défaut Ma première carte ( rappelez-vous - la version gratuite de ce plugin ne vous permet de créer qu'une seule carte ) :

Utilisez l'interface pour créer votre carte. Ensuite, lorsque vous avez terminé, vous pouvez l'intégrer n'importe où sur votre site en utilisant le shortcode :

C'est super facile et flexible - le seul inconvénient est la limitation d'une carte dans la version gratuite.

Générateur de cartes

Maps Builder est une autre bonne option pour créer des intégrations Google Maps avec un plugin WordPress.

Une fois que vous avez installé et activé le plugin, vous obtiendrez un nouvel onglet Google Maps dans la barre latérale de votre tableau de bord. Comme avec WP Google Maps, vous devrez ajouter une clé API Google Maps avant de pouvoir commencer avec le plugin.

Une fois que vous avez fait cela, vous pouvez accéder à Google Maps → Ajouter nouveau pour créer une nouvelle carte. Dans cette interface, cliquez sur le bouton Open Map Builder pour lancer l'interface conviviale :

Là, vous pouvez construire votre carte en utilisant la barre latérale du plugin :

Une fois que vous avez terminé, vous pouvez utiliser le shortcode créé par le plugin pour intégrer la carte n'importe où sur votre site WordPress.

Localisateur de magasin WP

Si vous souhaitez spécifiquement utiliser Google Maps pour afficher plusieurs emplacements de magasins sur votre site WordPress ( un désir commun ! ), vous feriez peut-être mieux d'utiliser un plug-in de localisation de magasins dédié.

Bien que vous puissiez trouver plusieurs plugins pour ce faire, j'aime WP Store Locator car il est flexible et a fière allure.

Utilisez le module Google Maps de votre constructeur de pages préféré

La plupart des constructeurs de pages WordPress incluent un élément/module Google Maps dédié pour vous aider à intégrer du contenu Google Maps dans vos conceptions.

Par exemple, le populaire plugin Divi Builder inclut un module Google Maps que vous pouvez personnaliser un peu via l'interface du plugin :

Donc, si vous utilisez déjà un constructeur de page, vérifiez si votre constructeur de page dispose d'un outil Google Maps avant de vous précipiter pour trouver un plugin Google Maps dédié,

Un ajustement amusant pour les utilisateurs avancés

Cette méthode est avancée et nécessite une connaissance du code - donc si vous êtes débutant, n'hésitez pas à l'ignorer.

Mais si vous connaissez bien WordPress et les champs personnalisés, vous pouvez utiliser un champ personnalisé pour créer automatiquement une carte basée sur le schéma des URL de Google Maps Map.

Par exemple, vous pouvez créer un champ sur le backend WordPress où un utilisateur n'a qu'à coller l'adresse d'un emplacement.

Ensuite, avec un peu de pré-traitement pour supprimer les espaces, vous pouvez insérer cette adresse dans quelque chose comme ci-dessous dans une iframe dans les fichiers de modèle de votre thème :

Et voila ! Tout ce qu'un utilisateur doit faire est d'entrer une adresse dans l'éditeur WordPress et une intégration Google Maps apparaîtra automatiquement sur le front-end pour cet emplacement.

Encore une fois - cette méthode nécessite certainement une connaissance de base de PHP et des champs personnalisés - mais c'est un hack sympa pour gagner du temps.

Conclure les choses

Que vous souhaitiez simplement faire quelque chose de basique comme intégrer un emplacement Google Maps régulier dans WordPress ou aller plus loin avec plusieurs marqueurs de carte ou la création automatique de cartes, vous disposez de nombreuses options.

Pour intégrer des cartes uniques, vous pouvez probablement ignorer les plugins et simplement utiliser le code d'intégration Google Maps standard. Mais si vous souhaitez créer des cartes avec plusieurs emplacements et contrôler facilement le style, les deux plugins Google Maps sont de bonnes options.

Et enfin, si vous utilisez un constructeur de page, vous devez absolument vérifier si vous avez déjà un élément Google Maps avant de vous tourner vers une solution externe.