Ajouter plusieurs Google Maps sur une seule page dans WordPress est l'un des moyens les plus simples de montrer à vos visiteurs tous vos emplacements sans les envoyer vers des pages séparées.
Je l'ai moi-même rencontré en gérant différents emplacements pour une entreprise locale. Chaque endroit avait besoin de sa propre carte, et je ne voulais pas que les gens cliquent partout juste pour obtenir des directions.
Dans ce guide, je vais vous présenter deux méthodes simples pour y parvenir. L'une utilise un constructeur de pages avec un bloc Google Maps par glisser-déposer. L'autre utilise directement le code d'intégration gratuit de Google Maps.
Ce dont vous aurez besoin : Un site WordPress avec accès administrateur et un compte Google gratuit. Si vous souhaitez utiliser la méthode par glisser-déposer, vous aurez également besoin de SeedProd Pro.
Méthode 1. Ajouter plusieurs Google Maps sur une seule page avec SeedProd
La première méthode de ce tutoriel vous montre comment ajouter plusieurs cartes Google sur une page de destination dans WordPress.
Les pages de destination sont le meilleur moyen de convertir le trafic ciblé en prospects et en ventes. Donc, si vous faites la promotion d'un événement ou de réductions dans les magasins locaux, une page de destination avec plusieurs cartes est le moyen idéal pour attirer les gens.
Et le meilleur plugin de page de destination WordPress pour cette tâche est SeedProd.
SeedProd est un constructeur visuel de pages de destination et de sites Web WordPress qui vous permet de créer des pages à forte conversion sans écrire de code. Il est livré avec des centaines de modèles de pages de destination réactifs que vous pouvez personnaliser dans l'éditeur par glisser-déposer.
De plus, SeedProd dispose de tonnes de blocs de contenu intelligents pour ajouter du contenu convivial à votre page, notamment :
- Cartes Google
- Boutons d'appel à l'action
- Tableaux de prix
- Carrousels d'images
- Témoignages
- Texte dynamique
- Titres animés
- Formulaires d'inscription
- Et plus encore
Cela signifie que vous pouvez créer n'importe quelle page rapidement sans engager de développeur.
Suivez les étapes ci-dessous pour apprendre comment ajouter Google Maps sur une page dans WordPress avec SeedProd.
Tutoriel vidéo
Étape 1. Télécharger le plugin de page de destination SeedProd
Tout d'abord, visitez le site Web de SeedProd et téléchargez le plugin SeedProd sur votre ordinateur.
Bien que SeedProd ait une version gratuite, nous utiliserons SeedProd Pro pour ce tutoriel. Ainsi, nous pourrons utiliser le bloc Google Maps.
Après avoir téléchargé le plugin, installez-le et activez-le sur votre site Web. Si vous avez besoin d'aide pour cette étape, suivez ce guide étape par étape pour l'installation des plugins WordPress.
Une fois que vous avez installé SeedProd, vous verrez un écran de bienvenue vous demandant votre clé de licence. Entrez votre clé et cliquez sur le bouton Vérifier la clé pour activer votre licence.
Remarque : vous pouvez trouver votre clé en vous connectant à votre compte SeedProd et en cliquant sur le lien Afficher la clé de licence, les détails et les téléchargements.
Étape 2. Créer une nouvelle page de destination
Après avoir activé votre clé de licence, faites défiler l'écran de bienvenue et cliquez sur le bouton Créer votre première page.
À partir de là, vous accéderez au tableau de bord des pages de destination de SeedProd.
Sur cette page, il existe plusieurs modes de page de destination, notamment :
- Bientôt disponible
- Mode Maintenance
- Connexion
- 404
Et avec ces modes de page, vous pouvez activer différentes pages de destination en un seul clic. Par exemple, vous pouvez activer le mode maintenance lorsque vous effectuez des mises à jour mineures.
Sous la section des modes de page, cliquez sur le bouton Créer une nouvelle page de destination pour créer votre première page.
Étape 4. Ajoutez plusieurs cartes Google à votre page de destination
Après avoir choisi un modèle, une fenêtre contextuelle s’ouvre, vous demandant de nommer votre page et d’entrer l’URL.
À partir de là, cliquez sur le bouton Enregistrer et commencer à modifier la page pour lancer votre modèle.
Étape 3. Personnalisez votre page de destination
Lorsque vous lancerez votre conception, elle s’ouvrira dans le constructeur de pages de SeedProd. L’éditeur a une conception conviviale à 2 panneaux pour faciliter la personnalisation de votre page :
- Panneau de gauche : Blocs et sections pour construire et personnaliser votre page
- Panneau de droite : Aperçu en direct de votre page de destination en temps réel
En haut de l’éditeur se trouve un menu de navigation pour passer rapidement de votre conception à vos intégrations et paramètres.
Et en bas du panneau de gauche se trouvent plusieurs autres icônes pour annuler et rétablir les modifications, passer à l’aperçu mobile, et plus encore.
Ces paramètres facilitent la personnalisation de votre conception pour atteindre vos objectifs de page de destination. Par exemple, cliquer sur un titre de page vous permet de modifier le contenu, la couleur et de voir les modifications en temps réel.
Ou, pour remplacer les images du modèle par défaut, vous pouvez cliquer sur n’importe quelle image et la remplacer par une image de votre ordinateur, de votre médiathèque ou choisir une photo gratuite.
Continuez à personnaliser votre conception jusqu’à ce que vous soyez satisfait de l’apparence de tout. Et n’oubliez pas de cliquer sur le bouton Enregistrer dans le coin supérieur droit.
Étape 4. Ajoutez plusieurs Google Maps à votre page de destination
L’ajout de plusieurs cartes Google à votre page de destination est facile avec le bloc Google Maps intégré de SeedProd.
Tout d’abord, ajoutons quelques colonnes pour abriter chaque carte. Dans le panneau de gauche, cliquez sur le bloc Colonne et faites-le glisser vers une section de votre page.
Choisissez maintenant le nombre de colonnes que vous souhaitez afficher. Pour ce guide, nous avons choisi la mise en page à 3 colonnes.
Vous êtes maintenant prêt à ajouter des cartes Google à chaque colonne.
Pour ce faire, cliquez sur le bloc Google Maps et faites-le glisser dans la première colonne.
Cliquer sur les paramètres du bloc ouvre un panneau où vous pouvez entrer l’emplacement choisi. Vous pouvez ensuite choisir le niveau de zoom de la carte, modifier l’alignement et ajuster la largeur.
De plus, vous pouvez choisir différents styles de bordure et ajuster l’espacement autour de votre carte personnalisée dans l’onglet Avancé.
Répétez maintenant cette étape pour chaque carte que vous souhaitez ajouter à votre page de destination.
Étape 5. Publiez votre page de destination avec carte Google
Lorsque vous êtes satisfait de l’apparence de votre page de destination, cliquez sur la flèche vers le bas à côté du bouton Enregistrer vert et cliquez sur Publier.
Ensuite, vous verrez une fenêtre vous indiquant que votre page est publiée. Pour voir un aperçu en direct, cliquez sur le bouton Voir la page en direct.
Méthode 2. Ajouter manuellement plusieurs cartes Google sur une seule page dans WordPress
La deuxième méthode de ce guide consiste à copier et coller le code d'intégration de l'API Google Maps et à le coller sur un article ou une page WordPress au lieu d'utiliser un plugin de cartes.
L'inconvénient de cette méthode est que vous devrez trouver le code d'intégration pour chaque carte que vous souhaitez afficher. Elle vous oblige également à passer de votre site WordPress à Google Maps et vice versa.
De plus, l'intégration directe de cartes dans WordPress limite les options de personnalisation. Vous n'aurez donc pas le contrôle avancé de la mise en page que vous obtenez avec un constructeur de pages WordPress comme SeedProd.
Voici les étapes pour intégrer plusieurs Google Maps manuellement avec le code d'intégration.
Étape 1. Trouver et partager votre emplacement sur Google Maps
Tout d'abord, rendez-vous sur Google Maps et tapez la première adresse que vous souhaitez intégrer.
Après avoir trouvé votre emplacement, cliquez sur l'icône Partager pour afficher les paramètres de partage de Google Maps.
Cliquez maintenant sur l'onglet Intégrer, choisissez une taille de carte dans le menu déroulant, et cliquez sur le lien « Copier le code HTML ».
Étape 2. Ajouter le code d'intégration dans WordPress
Ensuite, allez dans votre tableau de bord WordPress et créez une nouvelle page.
Dans l'éditeur WordPress, cliquez sur l'icône Plus (+) pour ajouter un nouveau bloc WordPress, puis cliquez sur le bloc HTML personnalisé.
Collez maintenant le code d'intégration de Google Maps dans le bloc HTML. Et si vous cliquez sur le bouton Aperçu, vous pouvez voir à quoi ressemble votre carte.
Étape 3. Intégrer plus de Google Maps
Maintenant que vous savez comment ajouter une carte, ajoutez-en d'autres en suivant les mêmes étapes. Choisissez simplement un autre emplacement de carte, copiez le code d'intégration et ajoutez-le dans un nouveau bloc HTML sur votre page WordPress.
Après avoir ajouté toutes vos cartes à la page, cliquez sur Publier. Ensuite, lorsque vous prévisualiserez la page, vous verrez chaque carte intégrée sur un seul écran.
Comment ajouter plusieurs emplacements à une carte dans WordPress ?
Vous savez maintenant comment ajouter plusieurs Google Maps sur une seule page dans WordPress. Mais que faire si vous voulez ajouter plusieurs épingles sur une seule carte et l'intégrer sur votre site WordPress ?
Heureusement, vous pouvez le faire avec la méthode d'intégration de cartes que nous avons mentionnée précédemment. Cependant, il y a quelques étapes supplémentaires que nous soulignons ci-dessous.
Étape 1. Créer une carte Google personnalisée
Tout d'abord, allez sur Google Maps, ouvrez le menu et cliquez sur le lien « Vos lieux ».
À partir de là, cliquez sur l'onglet Cartes et cliquez sur « Créer une carte » en bas de la page.
Cliquez sur l'étiquette « Carte sans titre » et donnez un nom pertinent à votre carte. Répétez cette étape pour le titre « Calque sans titre ».
Étape 2. Épingler les emplacements de votre carte
Vous pouvez maintenant entrer votre emplacement dans la barre de recherche pour le trouver sur la carte. Et une fois que vous l'avez trouvé, cliquez sur le lien + Ajouter à la carte pour placer un marqueur à cet endroit.
Répétez cette étape pour chaque emplacement que vous souhaitez ajouter à votre carte.
Étape 3. Partager votre carte
Pour intégrer votre carte dans WordPress, vous devez d'abord la rendre publique ; sinon, vous ne pourrez pas accéder au code d'intégration. Alors, cliquez sur l'icône « Partager ».
Maintenant, activez les paramètres suivants :
- Toute personne disposant de ce lien peut afficher
- Permettre aux autres de rechercher et de trouver cette carte sur Internet
Après avoir partagé votre carte, cliquez sur les 3 points dans le coin supérieur droit et sélectionnez l'option « Intégrer sur mon site ».
À partir de là, vous pouvez copier le code d'intégration personnalisé de Google Maps.
Étape 4. Intégrer votre carte dans WordPress
La dernière étape consiste à ajouter votre carte avec plusieurs emplacements à une nouvelle page WordPress. Créez donc une nouvelle page, choisissez le bloc HTML personnalisé et collez votre code d'intégration.
Maintenant, lorsque vous cliquerez sur Publier et prévisualiserez votre page, vous ne verrez qu'une seule carte avec plusieurs marqueurs personnalisés.
FAQ sur l'ajout de Google Maps dans WordPress
Ai-je besoin d'une clé API Google Maps pour intégrer une carte dans WordPress ?
Non, pas pour la méthode d'intégration de base. Lorsque vous utilisez l'option Partager > Intégrer dans Google Maps, le code iframe fonctionne sans clé API. Vous n'avez besoin d'une clé API que si vous utilisez un plugin de cartes qui se connecte via l'API Google Maps, ou si vous souhaitez créer une carte personnalisée avec l'API JavaScript.
Plusieurs cartes Google sur une seule page ralentiront-elles mon site web ?
Chaque carte intégrée charge son propre iframe, donc l'ajout de plusieurs cartes peut augmenter le temps de chargement de la page. Je recommande de limiter à 3-4 cartes par page. Si vous en avez besoin de plus, envisagez d'utiliser une seule carte avec plusieurs épingles à la place. Vous pouvez également ajouter loading="lazy" à chaque iframe afin que les cartes ne se chargent que lorsque le visiteur fait défiler la page jusqu'à elles.
Puis-je personnaliser l'apparence de mes cartes Google intégrées ?
La méthode d'intégration de base offre des options limitées. Vous pouvez choisir une taille petite, moyenne, grande ou personnalisée lors de la copie du code d'intégration. Pour plus de contrôle sur les couleurs des épingles, les fenêtres d'information et le style de la carte, utilisez Google My Maps pour créer d'abord une carte personnalisée, puis intégrez-la. Le bloc Google Maps de SeedProd vous permet également d'ajuster le zoom, l'alignement et les bordures.
Google Maps est-il gratuit à utiliser sur les sites web WordPress ?
Oui, l'intégration de Google Maps avec un iframe est entièrement gratuite, sans limite d'utilisation. Si vous utilisez l'API Google Maps via un plugin, Google vous offre 200 $ de crédits gratuits chaque mois. Cela couvre environ 28 000 chargements de cartes, ce qui est plus que suffisant pour la plupart des sites de petites entreprises.
Vous connaissez maintenant deux méthodes simples pour ajouter plusieurs cartes Google sur une seule page dans WordPress. Si vous souhaitez un contrôle total sur votre mise en page et un flux de travail plus rapide, le constructeur par glisser-déposer de SeedProd est l'option la plus simple.
Avec SeedProd, vous pouvez ajouter des cartes, des coordonnées et tous les autres éléments dont vous avez besoin en quelques clics, sans aucun codage. Commencez dès aujourd'hui et créez une page professionnelle en quelques minutes.
Vous pourriez également trouver les guides WordPress suivants utiles :
- Comment ajouter du CSS personnalisé dans WordPress
- Comment ajouter une ombre portée dans WordPress
- Comment ajouter une galerie aux pages et articles WordPress
- Comment masquer les titres de page dans WordPress
- Comment modifier les marges dans WordPress
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
