Il y a quelques semaines, j'ai eu besoin d'intégrer une carte Google sur WordPress pour la page de destination d'un client local. Il voulait que les clients puissent trouver facilement son magasin physique, mais je ne voulais pas ralentir son site ni me battre avec du code.
Si vous vous êtes retrouvé dans la même situation, vous savez à quel point cela peut être frustrant. C'est pourquoi, dans ce tutoriel, je vais vous montrer trois façons simples d'ajouter Google Maps à WordPress. J'ai utilisé chaque méthode sur des projets réels, je vais donc vous expliquer ce qui fonctionne le mieux pour les pages de destination, les articles de blog et les intégrations ponctuelles.
Résumé des méthodes pour intégrer Google Maps dans WordPress :
Avant de commencer, quels sont les avantages d'intégrer des cartes interactives sur votre site ?
Pourquoi l'intégration de Google Maps dans WordPress est importante
Vous savez déjà qu'intégrer Google My Maps sur votre site est un excellent moyen de le rendre interactif. Mais il existe plusieurs autres avantages qui peuvent aider votre entreprise à se développer.
Par exemple, une carte Google intégrée peut :
- Aider les clients à trouver un magasin près de chez eux avec la vue Street View
- Indiquer aux participants l'emplacement physique d'un événement
- Illustrer des articles de blog qui discutent de lieux spécifiques
- Indiquer l'emplacement de votre siège social
Avec un peu de créativité, vous pouvez utiliser les cartes interactives de Google pour donner vie à votre site Web. Et par conséquent, servir à la fois la croissance de votre entreprise et vos clients potentiels.
Avez-vous besoin d'une clé API Google Maps ?
Avant d'intégrer une carte Google sur votre site WordPress, il est conseillé de créer une clé API Google Maps, que Google exige désormais. Pour obtenir une clé API Google, suivez les étapes ci-dessous.
1. Accédez à la console Google Cloud Platform. Vous pouvez créer un compte gratuit si vous n'en avez pas encore.
2. Sélectionnez un projet existant ou créez un nouveau projet
3. Choisissez l'API Maps Embed API et cliquez sur Activer sur l'écran suivant.
4. Accédez maintenant à la barre latérale Identifiants, cliquez sur l'option +Créer des identifiants et sélectionnez Clé API.
Vous devriez maintenant avoir une clé API active pour Google Maps.
Comment intégrer Google Maps dans WordPress (3 méthodes)
Plongeons maintenant pour vous montrer comment intégrer Google Maps dans WordPress.
Méthode 1 : Intégrer Google Maps dans les pages de destination WordPress avec SeedProd
La première méthode de ce tutoriel vous montre comment intégrer des 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.
Et le meilleur plugin de page de destination WordPress pour cette tâche est SeedProd.
SeedProd est un constructeur de pages de destination par glisser-déposer qui vous permet de créer des pages de destination et des thèmes WordPress à forte conversion sans écrire de code. Il est livré avec des centaines de modèles de page de destination réactifs que vous pouvez facilement personnaliser dans l'éditeur visuel front-end.
De plus, SeedProd dispose de tonnes de blocs de contenu intelligents pour ajouter du contenu convivial à votre page, notamment :
- Cartes Google
- Formulaires de contact
- Boutons d'appel à l'action
- Tableaux de prix
- Carrousels d'images
- Témoignages
- FAQ accordéons
- Texte dynamique
- Titres animés
- Formulaires d'inscription
- Et plus encore
En conséquence, vous pouvez créer rapidement des pages de destination sans avoir à engager un développeur.
Suivez les étapes ci-dessous pour apprendre à intégrer Google Maps dans les pages de destination WordPress avec SeedProd.
1. Téléchargez le plugin SeedProd Landing Page
La première étape consiste à télécharger le plugin SeedProd sur votre ordinateur. Bien que SeedProd propose une version gratuite pour créer des pages de destination gratuites dans WordPress, nous utiliserons la version pro – SeedProd Pro. De cette façon, nous pourrons utiliser les blocs de contenu avancés que nous avons mentionnés précédemment.
Alors cliquez sur le bouton ci-dessous pour commencer.
Ensuite, installez et activez SeedProd sur votre site Web. Si vous avez besoin d'aide pour cela, vous pouvez suivre 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.
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.
Après avoir copié votre clé, collez-la dans le champ Clé de licence sur votre écran d'accueil SeedProd et cliquez sur le bouton Vérifier la clé.
2. Créer une nouvelle page de destination
Maintenant, vous pouvez commencer à créer votre première page, alors faites défiler l'écran d'accueil et cliquez sur le bouton Créer votre première page. Après avoir cliqué sur ce bouton, vous accéderez au tableau de bord des pages de destination de SeedProd.
Sur cette page, vous verrez d'abord les différents modes de page de destination disponibles dans SeedProd, notamment :
- Bientôt disponible
- Mode Maintenance
- Connexion
- 404
Les modes de page de SeedProd vous permettent d'activer rapidement différentes pages de destination en un seul clic.
Par exemple, vous pouvez activer rapidement un écran de maintenance lorsque vous effectuez des mises à jour mineures. Ou vous pouvez activer un écran de connexion WordPress personnalisé pour accueillir les utilisateurs enregistrés.
Le principal avantage des modes de page est que vous n'aurez pas besoin d'installer de plugins WordPress séparés pour obtenir cette fonctionnalité. SeedProd intègre tout dans un seul plugin compact.
Sous la section des modes de page se trouve une liste de toutes les pages que vous créez avec SeedProd. Pour l'instant, vous ne verrez aucune page répertoriée.
Pour créer votre première page, cliquez sur le bouton Créer une nouvelle page de destination.
Cliquer sur le bouton vous amène à l'écran des modèles de pages de destination de SeedProd. Ici, vous verrez des centaines de modèles conçus par des professionnels que vous pouvez utiliser comme base pour la conception de votre page.
En haut se trouvent différents onglets pour filtrer les conceptions, tels que :
- Bientôt disponible
- Mode Maintenance
- Page 404
- Ventes
- Webinaire
- Page de capture de prospects
- Merci
- Connexion
Survolez avec votre souris n'importe quelle conception que vous aimez et cliquez sur l'icône de coche pour importer ce modèle.
Nous utiliserons le modèle Opportunités pour ce guide, que vous pouvez trouver sous le titre Lead Squeeze.
Après avoir cliqué sur l'icône de coche pour importer votre modèle, vous verrez un pop-up vous demandant d'entrer un nom de page de destination. Étant donné que le nom de votre page est automatiquement attribué à votre URL de page de destination, nommez-la de manière à ce qu'elle ait du sens pour vos visiteurs.
Vous pouvez facilement modifier ce paramètre plus tard si vous faites une erreur. Alors, allez-y et cliquez sur le bouton Enregistrer et commencer à modifier la page.
3. Personnalisez la conception de votre page
Lorsque vous importez votre conception, elle s'ouvre dans l'éditeur de page visuel de SeedProd. L'éditeur a une conception conviviale à 2 panneaux pour faciliter la personnalisation de votre page :
- Panneau de gauche : Blocs et sections de page pour construire et personnaliser votre page
- Panneau de droite : Aperçu de l'apparence 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, de vos intégrations et des paramètres de la page.
Et en bas du panneau de gauche se trouvent plusieurs autres icônes pour vous aider à naviguer sur votre page, notamment :
- Paramètres globaux : Contrôlez les couleurs, les polices et l'arrière-plan de votre page globalement
- Navigation dans la mise en page : Naviguez rapidement vers différentes parties de votre conception
- Historique des révisions : Prévisualisez et restaurez une ancienne version de votre conception
- Annuler et rétablir : Annulez les modifications de conception ou rétablissez-les rapidement
- Aperçu mobile : Prévisualisez la conception mobile de votre page de destination
Les paramètres ci-dessus facilitent la personnalisation de votre modèle pour l'adapter à votre image de marque, à votre contenu et à vos objectifs marketing.
Par exemple, cliquer sur un titre de page vous permet de modifier la couleur du texte et de voir plus rapidement les modifications en temps réel.
Ou, si vous souhaitez modifier les images par défaut, vous pouvez simplement cliquer sur une image pour voir les paramètres à gauche. Ensuite, vous pouvez la remplacer par une image de votre ordinateur, de votre médiathèque ou choisir une photo gratuite.
4. Intégrez le bloc de page de destination Google Maps
L'ajout d'un widget Google Maps à votre page de destination est simple.
Dans le panneau de gauche, cliquez sur le bloc Google Maps. Ensuite, vous pouvez le faire glisser sur la section de la page où vous souhaitez qu'il apparaisse.
Cliquer sur les paramètres du bloc Google Map vous permet d'entrer rapidement l'emplacement que vous souhaitez afficher. Vous pouvez ensuite choisir le niveau de zoom de la carte, modifier l'alignement et ajuster la largeur de la carte.
La sélection de l'onglet Avancé vous permet de choisir différents styles de bordure et d'ajuster l'espacement autour de votre carte personnalisée.
Continuez à personnaliser votre page de destination jusqu'à ce que vous soyez satisfait de son apparence. N'oubliez pas de cliquer sur le bouton vert Enregistrer dans le coin supérieur droit pour enregistrer vos modifications.
5. Configurez vos paramètres
Avec votre conception en place, il y a quelques paramètres que vous pouvez configurer avant de publier votre page de destination.
SeedProd vous permet de connecter facilement votre page de destination à votre liste d'e-mails. Alors, cliquez sur Connecter en haut de l'écran pour voir les services de marketing par e-mail populaires. Cela permet de demander facilement aux utilisateurs de s'abonner à votre newsletter et de les ajouter automatiquement à votre liste d'e-mails.
Après avoir connecté votre liste d'e-mails, cliquez sur l'onglet Paramètres de la page pour plus d'options.
SeedProd offre 5 paramètres que vous pouvez configurer, mais cela dépend souvent du type de page que vous créez et de votre plan SeedProd actuel.
- Général : Modifiez le nom et l'URL de votre page ou basculez entre publié et brouillon.
- SEO : Configurez vos paramètres SEO avec un plugin SEO WordPress.
- Analytique : Suivez les performances de votre page avec un plugin Google Analytics.
- Scripts : Ajoutez des scripts personnalisés à l'en-tête, au corps et aux pieds de page de votre page, tels que des pixels de suivi et de reciblage.
- Domaine personnalisé : Donnez à n'importe quelle page de destination un domaine personnalisé qui n'est pas connecté à votre site Web existant.
Après avoir configuré vos paramètres, enregistrez vos modifications et revenez à l'onglet Conception.
6. Publiez votre page de destination
Avant de publier votre page, il est important de vous assurer que votre conception est adaptée aux mobiles. Si ce n'est pas le cas, les utilisateurs mobiles auront du mal à naviguer sur votre page, et vous pourriez perdre des prospects et des conversions.
Heureusement, SeedProd inclut une option de prévisualisation mobile pour vérifier que votre page est adaptée aux mobiles. Cliquez simplement sur l'icône mobile en bas de votre écran.
À partir de là, vous pouvez voir à quoi ressemble votre page sur les appareils mobiles et modifier tout ce qui ne semble pas ou ne fonctionne pas correctement.
Lorsque tout semble correct, cliquez sur la flèche vers le bas à côté du bouton Enregistrer vert et cliquez sur Publier.
Ensuite, une fenêtre vous indiquera que votre page a été publiée.
Pour voir un aperçu en direct, cliquez sur le bouton Voir la page en direct.
Et voici un aperçu de l'apparence de votre carte Google :
Excellent travail ! Vous savez maintenant comment ajouter une carte Google à votre page de destination WordPress.
Mais que faire si vous devez ajouter la carte à vos articles WordPress ? Nous allons vous montrer comment faire cela ensuite.
Méthode 2 : Ajouter des cartes Google dans les articles et pages WordPress à l'aide d'un plugin
Nous recommandons cette méthode si les cartes jouent un rôle important dans votre entreprise et que vous devez les utiliser dans plusieurs articles et pages de votre site. Encore une fois, nous utiliserons un plugin WordPress, et cette fois, nous utiliserons MapPress Maps for WordPress, un plugin gratuit de cartes Google pour wp.
Alors, installez et activez le plugin sur votre tableau de bord WordPress pour commencer. Cliquez ensuite sur Modifier dans l'article ou la page où vous souhaitez intégrer la carte.
Dans votre article ou votre page, cliquez sur l'icône plus (+) dans l'éditeur de blocs (Gutenberg) pour ajouter un nouveau bloc WordPress. Ensuite, recherchez le bloc MapPress Map et cliquez dessus pour ajouter la carte à votre article.
Cliquez maintenant sur le bouton Bibliothèque de cartes, et sur l'écran suivant, sélectionnez Ajouter.
Sur l'écran suivant, vous pouvez taper l'emplacement de carte souhaité dans la barre de recherche et cliquer sur Enregistrer.
Ensuite, cliquez sur le lien Insérer dans l'article pour ajouter votre carte à votre éditeur WordPress.
Vous pouvez maintenant utiliser le panneau déroulant Paramètres de la carte sur le côté droit pour modifier la taille et le zoom de votre carte Google.
Ensuite, cliquez sur Mettre à jour ou Publier pour enregistrer vos modifications et prévisualiser l'apparence de votre nouvelle carte.
Méthode 3 : Intégrer manuellement une carte Google dans WordPress à l'aide d'un iFrame
Vous pouvez, bien sûr, ajouter une carte Google à votre site WordPress sans utiliser de plugin. Pour ce faire, vous devez visiter le site Web de Google Maps et rechercher l'emplacement que vous souhaitez afficher, comme votre localisateur de magasins.
À partir de là, cliquez sur l'icône de partage et sur l'onglet Intégrer une carte qui apparaît dans la fenêtre contextuelle. Cliquez ensuite sur le bouton Copier le code HTML.
Maintenant, cliquez sur Modifier dans n'importe quel article ou page dans WordPress. Dans l'éditeur de blocs WordPress, cliquez sur l'icône plus (+) pour ajouter un nouveau bloc et choisissez l'option HTML personnalisé, qui vous permet d'ajouter du code tel que des iframes, des shortcodes, et plus encore.
Ensuite, collez le code d'intégration de Google Maps dans le bloc HTML personnalisé et cliquez sur Mettre à jour pour enregistrer l'article.
Lorsque vous prévisualisez votre article, votre carte devrait ressembler à l'exemple ci-dessous.
FAQ sur l'intégration de Google Maps dans WordPress
Vous connaissez maintenant trois méthodes simples pour intégrer Google Maps dans WordPress. Vous pouvez utiliser un constructeur de pages de destination, un plugin ou une intégration manuelle avec un iframe.
Si vous souhaitez le moyen le plus rapide d'ajouter une carte à votre site et de contrôler la conception, je vous recommande d'utiliser SeedProd. C'est le même outil que j'utilise pour toutes les pages de destination de mes clients car il est rapide, flexible et fonctionne avec n'importe quel thème WordPress.
Prêt à essayer ? Commencez avec SeedProd dès aujourd'hui et ajoutez une carte Google entièrement personnalisée à votre site en quelques minutes sans toucher au code.
Si vous avez aimé cet article, vous aimerez peut-être aussi ce guide sur la façon de modifier le pied de page de votre WordPress. Alternativement, consultez ces meilleurs fournisseurs d'hébergement WordPress.
Merci de votre lecture. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.
