Comment intégrer Google Maps dans WordPress: avec ou sans plugin

Vous recherchez un moyen d’intégrer Google Maps dans WordPress? C’est une bonne technique à utiliser – utiliser une carte est un formidable outil visuel qui vous permet de communiquer rapidement toute une variété d’informations.

Si vous êtes une entreprise, vous pouvez l’utiliser pour montrer à vos clients potentiels où vous vous trouvez. Ou, si vous êtes un blogueur, vous pouvez l’utiliser pour présenter des spots que vos lecteurs pourront consulter.

Mais vous ne pouvez faire ces choses que si vous savez comment ajouter Google Maps à WordPress. Pour vous aider à faire cela, je vais vous montrer deux méthodes différentes:

Comment ajouter Google Maps à WordPress sans plugin Comment ajouter Google Maps à WordPress à l’aide du plugin gratuit WordPress le plus populaire

Ensuite, à la fin, je vous recommanderai quelques options de plug-in supplémentaires qui offrent quelques réglages différents qui pourraient mieux répondre à vos besoins.

Ça sonne bien? Creusons !

Comment intégrer Google Maps dans WordPress sans plugin

Je vais commencer par un guide rapide sur la manière d’ajouter Google Maps dans WordPress sans plug-in.

Cette méthode est utile si vous souhaitez simplement intégrer un marqueur de position unique ou un ensemble de directions. Vous pouvez également utiliser Google Mes cartes pour créer votre propre carte personnalisée avec beaucoup plus de fonctionnalités. Plus tard, je vous montrerai un plugin qui peut vous aider à faire quelque chose de similaire à partir de votre tableau de bord Google.

Mais pour l’instant, restons sur la méthode manuelle!

Voici comment utiliser Google Maps dans WordPress au naturel (sans plugin).

Étape 1: Créez la carte que vous souhaitez intégrer (2 options)

Ci-dessous, je vais passer en revue les deux options pour créer la carte que vous intégrez. Avec les deux options, vous obtiendrez un code intégré que vous utiliserez à l’étape suivante.

1.A: Utiliser une carte Google Maps standard intégrée

Si vous souhaitez simplement intégrer une carte Google Maps standard que vous voyez sur le site Web normal de Google Maps, il vous suffit de:

Ouvrez la carte (ou les directions) que vous souhaitez intégrer à l’aide de l’interface standard de Google Maps. Cliquez sur Partager. Sélectionnez Incorporer la carte. Copiez le code d’intégration (vous l’utiliserez à l’étape suivante)

how to embed google maps in wordpress using the regular interface

1.B: Utiliser Google Mes cartes pour créer votre carte

Si vous souhaitez créer une carte plus avancée avec des éléments tels que:

Marqueurs d’emplacement multiples Notes personnalisées que vous ajoutez à vos propres couleurs

Ensuite, vous pouvez utiliser Google Mes cartes au lieu de l’interface normale de Google Maps.

C’est l’outil que j’ai utilisé pour créer une carte des barres de toit à Hanoi sur mon site de voyage (vous peut le voir en action ici):

an example of google my maps

Pour utiliser Google Mes cartes, cliquez sur le bouton Créer une nouvelle carte après vous être connecté:

how to create new google my maps

Ensuite, construisez votre carte avec l’interface (this la vidéo a un bon tutoriel sur les différentes options d’interface si vous avez besoin d’aide).

Une fois que vous avez créé votre carte, cliquez sur Partager, puis, en regard de Privé – à vous uniquement, accédez au bouton Modifier:

how to embed google my maps

Ensuite, choisissez Activé – Public sur le Web et cliquez sur Enregistrer:

make public

Une fois votre carte rendue publique, cliquez sur le bouton des trois points et choisissez Intégrer sur mon site:

generate embed code

Ensuite, copiez le code intégré car vous en aurez besoin à l’étape suivante:

embed code google my maps

Étape 2: Ajouter du code intégré à votre site WordPress

Maintenant que vous avez votre code d’intégration, à partir de l’interface Google Maps standard ou de Google Mes cartes, modifiez le message ou la page où vous souhaitez intégrer votre carte.

Ensuite, choisissez l’onglet Texte dans l’éditeur WordPress et collez le code incorporé:

where to put google maps embed code in wordpress

Et c’est tout! Lorsque vous publiez ou mettez à jour votre publication, vous devriez voir votre Google Maps incorporer à cet endroit:

google maps embed on site

Comment créer des cartes Google Maps personnalisées à l’aide d’un plugin WordPress

Les méthodes ci-dessus conviennent aux versions de base de Google Maps. Mais parfois, vous voulez être un peu plus créatif. Dans ce cas, vous pouvez vous tourner vers un plugin Google Maps.

Les plugins de Google Maps sont sympas car, en plus de vous permettre de créer vos propres cartes Google Maps personnalisées, ils vous permettent également de créer des tâches spécifiques à WordPress, telles que:

Afficher des publications ou des types de publication personnalisés sur votre carte via des champs personnalisés Créer un localisateur de magasin pouvant être filtré

Et parce que ces plugins utilisent des codes abrégés au lieu d’iframes (comme le code d’intégration manuel de Google Maps), ils sont un peu plus conviviaux (vous n’aurez donc pas à utiliser l’onglet Texte dans l’éditeur WordPress).

Je vais vous montrer un tutoriel en utilisant le plugin gratuit le plus populaire de Google Maps – WP Google Maps.

Pour démarrer avec ce didacticiel, assurez-vous que WP Google Maps est installé et activé.

Étape 1: Créer et entrer la clé de l’API Google Maps

Quel que soit le plug-in Google Maps que vous utilisez, il s’agira toujours de la première étape car Google exige que vous obteniez un élément appelé « clé API » pour utiliser Google Maps.

Fondamentalement, cette clé API gratuite permet au plug-in choisi de se connecter au service Google Maps pour vous aider à créer une carte.

Pour créer votre clé API, vous pouvez regardez la vidéo d’instructions détaillées du plugin.

Une fois que vous avez obtenu votre clé d’API, branchez-la dans la boîte et cliquez sur Enregistrer:

google maps api key

Étape 2: Modifier ma première carte

La version gratuite de ce plugin ne vous permet de créer qu’une carte personnalisée. Donc, pour créer votre première carte, vous devez cliquer sur Modifier sous Ma première carte:

edit map

Cela vous lancera dans l’interface de l’éditeur.

Étape 3: Configurer les paramètres de base

En haut de l’interface de l’éditeur de carte, vous verrez un certain nombre d’onglets différents. Ces onglets vous permettent de configurer les paramètres de base de votre carte:

Paramètres généraux – hauteur, largeur, alignement et type de carte (par exemple, carte routière vs satellite) Thèmes – vous permet de choisir parmi 9 thèmes de carte inclus. Celles-ci changent fondamentalement le style de votre carte. Instructions – Malheureusement, vous ne pouvez utiliser les instructions que dans la version Pro. Localisateur de magasin: cette fonctionnalité intéressante permet à vos visiteurs de rechercher le magasin le plus proche, ce qui est utile si vous exploitez une entreprise avec des emplacements physiques. Paramètres avancés – vous permet d’activer les données de trafic et d’autres fonctionnalités, même si beaucoup ne sont disponibles que dans la version Pro.

google maps plugin interface

Une fois ces paramètres configurés, vous êtes prêt à travailler sur votre carte elle-même.

Étape 4: Ajouter des marqueurs et d’autres éléments de la carte

Sous les paramètres de base, vous pouvez commencer à ajouter des éléments à votre carte en utilisant les cinq différents onglets.

Pour ajouter un marqueur, vous pouvez soit:

Rechercher un emplacement dans la zone Cliquez avec le bouton droit de la souris sur un emplacement de la carte pour déposer un marqueur à cet emplacement spécifique.

adding markers

Une fois que vous avez enregistré votre marqueur, il apparaîtra sur la carte et vous pourrez en ajouter un autre.

Vous pouvez également afficher la liste complète de vos marqueurs et modifier les marqueurs existants dans la section Vos marqueurs:

list of markers

Dans l’onglet Polygone et Polylignes, vous pouvez lancer une interface qui vous permet de créer un ensemble de formes plus complexe:

polygon shape

Une fois les éléments de la carte ajoutés, veillez à cliquer sur Enregistrer la carte.

Étape 5: Intégrez votre carte à l’aide du code court

Une fois que vous avez enregistré votre carte:

Cliquez sur Cartes dans votre barre latérale du tableau de bord WordPress Copiez le shortcode de votre carte Ajoutez le shortcode à l’endroit où vous souhaitez afficher votre carte

map embed code

Autres plugins qualité Google Maps pour WordPress

Le plug-in WP Google Maps ci-dessus est de loin le plug-in WordPress Google Maps le plus populaire, mais la plupart des fonctionnalités les plus intéressantes sont bloquées derrière la version Pro, ce qui est un peu regrettable.

Si vous recherchez d’autres options, voici quelques bonnes:

WP Google Map Plugin – vous permet d’attribuer vos propres icônes de marqueur, même dans la version gratuite. La version Pro vous permet d’afficher des types de publication / personnalisés sur vos cartes via des champs personnalisés.
Widget Google Maps – une solution légère et agréable qui facilite la mise en route rapide avec une carte.
Générateur de cartes – Je pense que celui-ci a le constructeur de carte le plus convivial, et la fonctionnalité Post Mashup de la version Pro vous permet de renseigner automatiquement une carte basée sur les publications de votre site.

Par exemple, voici l’interface de création de cartes en plein écran du plugin Maps Builder:

maps builder

Tous ces plugins sont assez similaires. Donc, une fois que vous avez compris comment créer votre clé API et comprendre l’interface de base, vous devriez être capable de choisir rapidement un nouveau plugin.

Réflexions finales sur Google Maps et WordPress

Si vous souhaitez simplement créer une version de base de Google Maps et n’avez pas besoin de la lier à une fonctionnalité spécifique à WordPress – telle qu’un localisateur de magasin ou vos publications actuelles -, je pense que votre meilleur choix est d’utiliser la méthode manuelle.

Entre l’interface normale de Google Maps et Google My Maps, vous disposez de beaucoup de flexibilité pour créer des cartes. Ensuite, vous pouvez les intégrer n’importe où en utilisant le code iframe.

Si vous avez besoin de fonctionnalités spécifiques à WordPress ou si vous préférez simplement travailler à partir de votre tableau de bord WordPress, tous les plug-ins que j’ai énumérés sont des options de qualité. Pour choisir entre eux, considérez ces faits:

Chaque plugin offre un ensemble différent de fonctionnalités gratuites (par rapport à la version Pro), vous pourrez donc en trouver une qui fait ce dont vous avez besoin gratuitement. Certains plugins conviennent mieux aux localisateurs de magasins, tandis que d’autres conviennent mieux à l’affichage de messages sur des cartes.

Enfin, certains thèmes et plugins WordPress incluent une fonctionnalité de cartes intégrée. Par exemple, le Thème conseil inclut un moyen facile d’afficher un emplacement sur une carte. Et de nombreux constructeurs de pages WordPress inclure également des modules de cartes dédiées.