Ajouter plusieurs cartes Google Maps sur une seule page dans WordPress est l'un des moyens les plus simples de présenter à vos visiteurs tous vos sites sans les rediriger vers des pages distinctes.
J'ai moi-même été confronté à ce problème lorsque je gérais plusieurs sites pour une entreprise locale. Chaque site avait besoin de sa propre carte, et je ne voulais pas que les gens aient à cliquer partout juste pour obtenir un itinéraire.
Dans ce guide, je vais vous présenter deux méthodes simples, adaptées aux débutants. La première consiste à utiliser un constructeur de pages doté d'un bloc Google Maps fonctionnant par glisser-déposer. La seconde consiste à utiliser directement le code d'intégration gratuit fourni par Google Maps.
Ce dont vous aurez besoin : un site WordPress avec des droits d'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 cartes Google Maps sur une page avec SeedProd
La première méthode de ce tutoriel vous montre comment ajouter plusieurs cartes Google sur une page d'atterrissage dans WordPress.
Les pages d'atterrissage sont le meilleur moyen de convertir le trafic ciblé en prospects et en ventes. Ainsi, si vous faites la promotion d'un événement ou de réductions dans des magasins locaux, une page d'atterrissage avec plusieurs cartes est le moyen idéal pour inciter les gens à franchir la porte.
Et le meilleur plugin de page d'atterrissage WordPress pour ce travail est SeedProd.
SeedProd est un éditeur visuel de pages d'atterrissage et un créateur de sites Web pour WordPress qui vous permet de créer des pages à fort taux de conversion sans avoir à écrire de code. Il propose des centaines de modèles de pages d'atterrissage adaptatifs que vous pouvez personnaliser dans l'éditeur par glisser-déposer.
En outre, SeedProd possède des tonnes de blocs de contenu intelligents pour ajouter un contenu convivial à votre page, y compris :
- Google maps
- Boutons d'appel à l'action
- Tableaux des prix
- Carrousels d'images
- Témoignages
- Texte dynamique
- Titres animés
- Formulaires Optin
- Et plus encore
Cela signifie que vous pouvez créer rapidement n'importe quelle page sans faire appel à un développeur.
Suivez les étapes ci-dessous pour apprendre à ajouter Google Maps sur une page de WordPress avec SeedProd.
Tutoriel vidéo
Etape 1. Télécharger le plugin SeedProd Landing Page
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. Nous pourrons ainsi 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 pas à pas 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. Saisissez votre clé et cliquez sur le bouton Vérifier la clé pour activer votre licence.
Note : vous pouvez trouver votre clé en vous connectant à votre compte SeedProd et en cliquant sur le lien Voir la clé de licence, les détails et les téléchargements.
Étape 2. Créer une nouvelle page d'atterrissage
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.
De là, vous accéderez au tableau de bord de la page d'atterrissage de SeedProd.
Sur cette page, il y a plusieurs modes de page d'atterrissage, y compris :
- Bientôt disponible
- Mode maintenance
- Connexion
- 404
Grâce à ces modes de page, vous pouvez activer différentes pages d'atterrissage 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 d'atterrissage pour créer votre première page.
Sur l'écran suivant, vous pouvez choisir parmi des centaines de modèles de pages d'atterrissage prédéfinis. Il vous suffit de cliquer pour sélectionner un modèle et l'utiliser comme point de départ.
Après avoir choisi un modèle, une fenêtre contextuelle s'ouvre, vous demandant de nommer votre page et d'en saisir l'URL.
Cliquez ensuite sur le bouton Enregistrer et commencer à modifier la page pour lancer votre modèle.
Étape 3. Personnalisez votre page d'atterrissage
Lorsque vous lancez votre design, il s'ouvre dans l'éditeur de pages de SeedProd. L'éditeur a un design convivial à 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 temps réel de votre page d'atterrissage
En haut de l'éditeur se trouve un menu de navigation qui permet de passer rapidement d'un design à l'autre, d'une intégration à l'autre et d'une configuration à l'autre.
En bas du panneau de gauche se trouvent plusieurs autres icônes permettant d'annuler et de rétablir les modifications, de passer à l'aperçu mobile, etc.
Ces paramètres facilitent la personnalisation de votre design afin d'atteindre les objectifs de votre page de destination. Par exemple, en cliquant sur l'en-tête d'une page, vous pouvez en modifier le contenu et la couleur et voir les changements 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 bibliothèque multimédia ou choisir une photo d'archive gratuite.
Continuez à personnaliser votre design jusqu'à ce que vous soyez satisfait de son aspect. N'oubliez pas de cliquer sur le bouton Enregistrer dans le coin supérieur droit.
Étape 4. Ajouter plusieurs cartes Google à votre page d'atterrissage
Ajouter plusieurs cartes Google à votre page d'atterrissage est facile avec le bloc Google Maps intégré à SeedProd.
Commençons par ajouter des colonnes pour 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 disposition en 3 colonnes.
Vous êtes maintenant prêt à ajouter Google Maps à chaque colonne.
Pour ce faire, cliquez sur le bloc Google Maps et faites-le glisser vers la première colonne.
En cliquant sur les paramètres du bloc, vous ouvrez un panneau dans lequel vous pouvez saisir l'emplacement choisi. Vous pouvez ensuite choisir le zoom de la carte, modifier l'alignement et ajuster la largeur.
En outre, vous pouvez choisir différents styles de bordures et ajuster l'espacement autour de votre carte personnalisée dans l'onglet Avancé.
Répétez cette étape pour chaque carte que vous souhaitez ajouter à votre page d'atterrissage.
Étape 5. Publier votre page d'atterrissage Google Maps
Lorsque vous êtes satisfait de l'aspect de votre page d'atterrissage, cliquez sur la flèche vers le bas à côté du bouton vert Enregistrer et cliquez sur Publier.
Une fenêtre s'affiche ensuite pour vous indiquer que votre page est publiée. Pour obtenir un aperçu en direct, cliquez sur le bouton Voir la page en direct .
Méthode 2. Ajouter manuellement plusieurs cartes Google Maps sur une 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.
En outre, l'intégration de cartes directement 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 à suivre pour intégrer manuellement plusieurs cartes Google à l'aide du code d'intégration.
Étape 1. Recherchez et partagez votre position dans Google Maps
Tout d'abord, rendez-vous sur Google Maps et saisissez la première adresse que vous souhaitez intégrer.
Après avoir trouvé votre position, cliquez sur l'icône Partager pour afficher les paramètres de partage de Google Maps.
Cliquez ensuite sur l'onglet Incorporer, 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. Si vous cliquez sur le bouton " Aperçu", vous pourrez voir à quoi ressemble votre carte.
Étape 3. Intégrer davantage de cartes Google Maps
Maintenant que vous savez comment ajouter une carte, vous pouvez en ajouter d'autres en suivant les mêmes étapes. Il vous suffit de choisir un autre emplacement de carte, de copier le code d'intégration et de l'ajouter dans un nouveau bloc HTML sur votre page WordPress.
Après avoir ajouté toutes vos cartes à la page, cliquez sur Publier. Lorsque vous prévisualiserez la page, vous verrez chaque carte intégrée sur un seul écran.
Comment ajouter plusieurs lieux à une carte dans WordPress ?
Vous savez maintenant comment ajouter plusieurs cartes Google Maps sur une page de WordPress. Mais que faire si vous souhaitez ajouter plusieurs épingles sur une seule carte et l'intégrer à votre site WordPress ?
Heureusement, vous pouvez le faire avec la méthode d'intégration de la carte que nous avons mentionnée plus haut. Cependant, il y a quelques étapes supplémentaires que nous soulignons ci-dessous.
Étape 1. Créer une carte Google Map personnalisée
Tout d'abord, allez sur Google Maps, ouvrez le menu et cliquez sur le lien "Vos lieux".
De là, cliquez sur l'onglet Cartes et cliquez sur "Créer une carte" en bas de la page.
Cliquez sur l'étiquette intitulée "Carte sans titre" et donnez un nom à votre carte. Répétez cette étape pour l'intitulé "Couche sans titre".
Étape 2. Épinglez vos emplacements sur la carte
Vous pouvez maintenant saisir votre emplacement dans la barre de recherche pour le rechercher sur la carte. 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 lieu que vous souhaitez ajouter à votre carte.
Étape 3. Partagez 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. Cliquez donc sur l'icône "Partager".
Mettez maintenant les paramètres suivants sur la position "on" :
- Toute personne disposant de ce lien peut consulter
- Laissez les autres chercher et trouver cette carte sur l'internet
Après avoir partagé votre carte, cliquez sur les trois 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.
Désormais, lorsque vous cliquerez sur Publier et que vous prévisualiserez votre page, vous ne verrez qu'une seule carte avec plusieurs marqueurs personnalisés.
Foire aux questions sur l'intégration 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 carte qui se connecte via l'API Google Maps, ou si vous souhaitez créer une carte personnalisée à l'aide de l'API JavaScript.
Le fait d'afficher plusieurs cartes Google Maps sur une même page risque-t-il de ralentir mon site web ?
Chaque carte intégrée charge son propre iframe ; par conséquent, l'ajout de plusieurs cartes peut allonger le temps de chargement de la page. Je recommande de ne pas dépasser 3 ou 4 cartes par page. Si vous en avez besoin de plus, envisagez plutôt d'utiliser une seule carte comportant plusieurs repères. Vous pouvez également ajouter l'attribut 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 ma carte Google Maps intégrée ?
La méthode d'intégration standard offre des options limitées. Vous pouvez choisir entre les tailles « petite », « moyenne », « grande » ou « personnalisée » lorsque vous copiez le code d'intégration. Pour bénéficier d'un plus grand contrôle sur les couleurs des repères, les fenêtres d'informations et le style de la carte, utilisez d'abord Google My Maps pour créer une carte personnalisée, puis intégrez-la. Le bloc Google Maps de SeedProd vous permet également de régler le zoom, l'alignement et les bordures.
L'utilisation de Google Maps est-elle gratuite sur les sites WordPress ?
Oui, l'intégration de Google Maps à l'aide d'un iframe est entièrement gratuite et sans aucune limite d'utilisation. Si vous utilisez l'API Google Maps via un plugin, Google vous offre 200 $ de crédits gratuits chaque mois. Cela correspond à environ 28 000 chargements de cartes, ce qui est largement suffisant pour la plupart des sites de petites entreprises.
Vous connaissez maintenant deux façons simples d'ajouter plusieurs cartes Google Maps sur une page dans WordPress. Si vous souhaitez avoir 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 facile.
Avec SeedProd, vous pouvez ajouter des cartes, des coordonnées et tout autre élément dont vous avez besoin en quelques clics - aucun codage n'est nécessaire. Commencez dès aujourd'hui et construisez une page professionnelle en quelques minutes.
Les guides WordPress suivants peuvent également vous être utiles :
- Comment ajouter un CSS personnalisé dans WordPress
- Comment ajouter une ombre de boîte dans WordPress
- Comment ajouter une galerie aux pages et aux articles de WordPress
- Comment masquer les titres de page dans WordPress
- Comment modifier les marges dans WordPress
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
