Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment ajouter plusieurs cartes Google Maps sur une page dans WordPress

Comment ajouter plusieurs cartes Google Maps sur une page dans WordPress 

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : Turner John
image du réviseur Turner John
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Voulez-vous ajouter plusieurs cartes Google Maps sur une page dans WordPress ?

L'ajout de plusieurs cartes sur une page permet aux visiteurs d'avoir un aperçu de tous vos emplacements physiques. Ils peuvent ainsi choisir l'établissement le plus proche lorsqu'ils visitent votre entreprise.

Dans cet article, nous allons vous montrer comment ajouter facilement plusieurs cartes Google Maps sur une page de WordPress.

Pourquoi ajouter plusieurs cartes Google Maps sur une page dans WordPress ?

Il y a de nombreuses raisons d'ajouter plusieurs cartes à votre site WordPress.

La raison la plus évidente est de répertorier plusieurs sites, par exemple des magasins situés dans des régions différentes. Si vous organisez plusieurs événements, vous pouvez créer des cartes pour chacun d'entre eux et les afficher sur la même page.

Vous pensez peut-être qu'il est difficile d'intégrer plus d'une carte sur une page WordPress. En réalité, il existe plusieurs méthodes qui facilitent le processus.

Nous vous présentons ci-dessous deux méthodes que même les débutants peuvent appliquer facilement. Commençons par la première option.

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 meilleur constructeur de pages WordPress

SeedProd est un constructeur visuel de pages d'atterrissage WordPress qui vous permet de créer des pages à fort taux de conversion sans écrire de code. Il est livré avec des centaines de modèles de pages d'atterrissage réactives que vous pouvez personnaliser dans l'éditeur drag-and-drop.

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

entrez votre clé de 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.

Créez votre première page d'atterrissage seedprod

De là, vous accéderez au tableau de bord de la page d'atterrissage de SeedProd.

Modes de page d'atterrissage de SeedProd

Sur cette page, il y a plusieurs modes de page d'atterrissage, y compris :

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.

créer une nouvelle page d'atterrissage

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.

Modèles de pages d'atterrissage SeedProd

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.

Entrez un nom pour votre page d'atterrissage google maps

Cliquez ensuite sur le bouton Enregistrer et commencer à modifier la page pour lancer votre modèle.

Étape 3. Personnalisez votre page d'atterrissage

Le constructeur de pages d'atterrissage de SeedProd (drag and drop)

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.

seedprod header navigation

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.

Contrôles de la conception de SeedProd

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.

personnaliser les titres des pages d'atterrissage

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.

personnaliser l'image de votre page d'atterrissage

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.

Ajoutez le bloc de colonnes à votre page d'atterrissage

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.

Ajoutez le bloc google maps à votre page d'atterrissage

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.

Ajoutez votre emplacement Google Maps dans le panneau des paramètres du bloc.

En outre, vous pouvez choisir différents styles de bordures et ajuster l'espacement autour de votre carte personnalisée dans l'onglet Avancé.

Paramètres avancés du blocage de la carte Google

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.

Publier plusieurs cartes Google sur une page WordPress

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 .

plusieurs google maps sur une page WordPress

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 pour intégrer plusieurs cartes Google manuellement avec le 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.

Trouvez votre position sur Google Maps

Après avoir trouvé votre position, cliquez sur l'icône Partager pour afficher les paramètres de partage de Google Maps.

Cliquez sur l'icône 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".

Copier le code d'intégration de google maps

É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é.

Ajouter le bloc HTML personnalisé dans WordPress

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.

aperçu de l'intégration de google map

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

Ajouter plusieurs cartes Google à une page dans 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.

Publication de plusieurs cartes google maps sur une seule page dans WordPress

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

Vos lieux dans Google Maps

De là, cliquez sur l'onglet Cartes et cliquez sur "Créer une carte" en bas de la page.

Créer une nouvelle carte Google

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

Modifier le titre et la description de la carte

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

Ajouter plusieurs emplacements sur Google Map

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
Rendre vos cartes Google Maps publiques

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

Cliquez sur le lien "embed" de mon site

À partir de là, vous pouvez copier le code d'intégration personnalisé de Google Maps.

Copier le code d'intégration 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.

Placez le code d'intégration de Google Maps dans un bloc HTML personnalisé

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.

Google Map avec plusieurs marqueurs de localisation dans WordPress

Et c'est tout !

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter plusieurs cartes Google Maps sur une page dans WordPress. Vous pourriez aussi aimer ce guide sur la création d'une table de prix verticale dans WordPress.

Nous vous remercions de votre lecture. N'hésitez pas à nous suivre sur Twitter, Facebook et YouTube pour découvrir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.