Ajouter une carte Google Maps à un site WordPress est une tâche qui prend cinq minutes. Cela renforce la confiance, améliore votre SEO local et facilite l’achat pour vos visiteurs. Mais s’assurer qu’elle s’affiche correctement et qu’elle dispose des fonctionnalités dont vous avez besoin peut prendre des heures. Et si vous oubliez de prendre en compte les utilisateurs mobiles, vous risquez de ne pas remarquer que la carte est tronquée sur les petits écrans.
Ce guide vous présente trois options pour intégrer une carte Google Maps WordPress : un iFrame natif, une extension de carte et un widget gratuit. Nous aborderons également les problèmes et les compromis afin que vous puissiez choisir la solution la plus adaptée à vos besoins.
Trois options pour intégrer une carte Google Maps WordPress
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
iFrame natif |
Non |
Gratuit |
Non ; largeur/hauteur fixes |
Non |
Environ 5 minutes |
|
Extension WordPress |
Oui ; gratuit pour 10 000 chargements de carte/mois |
Gratuit pour les fonctionnalités de base ; payant pour les fonctionnalités avancées |
Dépend de l’extension |
Oui ; souvent payant |
Environ 15 à 25 minutes |
|
Widget Google Maps de Jotform |
Oui ; gratuit pour 10 000 chargements de carte/mois |
Widget gratuit ; inclut les fonctionnalités avancées |
Oui |
Oui ; gratuit |
Environ 15 minutes |
Option 1 : Utiliser un iFrame natif Google Maps
L’option iFrame Google Maps est le moyen le plus simple et le plus rapide d’afficher une carte sur votre site web. Vous recherchez votre entreprise sur Google Maps, cliquez sur Partager, copiez le code et collez-le sur une page WordPress. Nous vous proposons ici un guide pas à pas pour que tout soit opérationnel rapidement.
Cette simplicité finit par être une limite en soi. Vous ne pouvez pas personnaliser l’apparence de la carte, ajouter plusieurs marqueurs ni afficher des informations supplémentaires en plus de la vue par défaut. Vous devez également tester différentes tailles de carte et mises en page WordPress pour vous assurer que le résultat est utilisable sur mobile.
Comment intégrer un iFrame Google Maps
Avant de commencer, enregistrez votre entreprise sur la plateforme Google Business Profile. Cela vous permet d’afficher toutes vos informations sur Google Maps, y compris les horaires d’ouverture, les avis ou votre carte de restaurant. Si vous souhaitez simplement pointer vers une adresse qui ne vous appartient pas ou un lieu d’intérêt, passez directement à la première étape.
Récupérer le code d’intégration depuis Google Maps
- Rendez-vous sur google.com/maps et recherchez le nom de votre entreprise ou votre adresse.
- Vérifiez que vous avez sélectionné le bon marqueur en consultant les détails de l’entreprise sur le côté gauche de l’écran.
- Cliquez sur Partager.
- Une fenêtre contextuelle apparaît à l’écran. Cliquez sur l’onglet Intégrer une carte.
- Un aperçu de l’apparence de la carte sur votre site web s’affiche. La taille est réglée sur moyenne par défaut ; vous pouvez choisir d’afficher une carte petite ou grande, ou même sélectionner une taille personnalisée à l’aide du menu déroulant en haut à gauche.
- Après avoir sélectionné la taille, cliquez sur Copier le HTML. Le code iFrame est alors copié dans le presse-papiers.
Intégrer la carte dans WordPress (éditeur de blocs/Gutenberg)
- Dans WordPress, ouvrez la page ou l’article où vous souhaitez placer la carte.
- Cliquez sur l’icône + d’insertion de bloc, tapez HTML pour filtrer, puis cliquez sur HTML personnalisé pour ajouter le bloc à la page.
- Dans le nouveau bloc, cliquez sur Modifier le HTML.
- Collez le code iFrame dans la fenêtre. L’aperçu s’affiche sur le côté droit. Cliquez sur Mettre à jour pour terminer.
- La page affiche désormais la carte iFrame intégrée. Cliquez sur Publier ou Enregistrer pour la mettre en ligne sur votre site, puis consultez la page pour voir le résultat.
Si cette méthode ne correspond pas à la façon dont vous modifiez vos pages dans WordPress, découvrez comment ajouter du HTML avec l’un de ces éditeurs :
Option 2 : Installer une extension de carte WordPress dédiée
Par rapport à l’option 1, une extension WordPress dédiée offre davantage de personnalisation et de fonctionnalités. Vous l’installez sur votre site comme n’importe quelle autre extension, vous créez et collez votre clé API Google Maps dans les paramètres, puis vous ajoutez l’élément carte à une page.
Cette option ajoute une certaine complexité. L’obtention de la clé API Google Maps nécessite de créer un compte sur Google Cloud Platform, de configurer un compte de facturation et de suivre un processus de configuration technique. De plus, les extensions de carte fonctionnent sur un modèle freemium : elles proposent un plan gratuit correct avec des fonctionnalités de base, mais réservent les meilleures fonctionnalités derrière une licence unique ou un abonnement annuel.
Vous ajoutez une extension supplémentaire, alors testez la vitesse de votre site web une fois la configuration terminée. Si vous hébergez votre site sur un plan à bas coût, un trop grand nombre d’extensions peut considérablement ralentir l’ensemble, ce qui affecte l’expérience utilisateur et peut pousser les visiteurs à quitter votre site.
Le bon fonctionnement de la carte sur mobile dépend de l’extension et de la façon dont vous la configurez. Par exemple, WP Go Maps recommande de définir des valeurs spécifiques de hauteur et de largeur pour éviter un affichage trop compact.
Comment configurer une extension de carte WordPress
Pour cet exemple, j’utiliserai l’une des extensions Google Maps pour WordPress les plus populaires, WP Go Maps.
Configurer WP Go Maps
- Installez et activez WP Go Maps.
- Cliquez sur Passer l’introduction pour terminer la configuration.
- Cliquez sur Paramètres dans le menu de gauche.
- Dans l’onglet Général, sélectionnez Google Maps comme moteur de carte.
Obtenir votre clé API Google Maps
Pour récupérer les données cartographiques depuis la plateforme Google, vous devez d’abord créer un compte afin d’obtenir votre clé API.
- Rendez-vous sur le site web de Google Maps Platform et créez un compte.
- Vous serez redirigé vers un processus de configuration dans Google Cloud Platform. Créez un nouveau compte de facturation en définissant un nom, un pays et une devise.
- Ajoutez vos coordonnées et votre mode de paiement. Une fois terminé, cliquez sur le bouton Envoyer et activer la facturation.
Avec cette option, vous bénéficiez de 10 000 chargements de carte gratuits par mois ; au-delà, le tarif est de 7 $ par tranche de 1 000. Si vous restez en dessous de la limite, votre carte n’est jamais débitée, mais le compte de facturation est requis dans tous les cas. (En mars 2025, Google a remplacé son ancien crédit mensuel de 200 $ par une allocation gratuite distincte pour chaque API ; de nombreux tutoriels plus anciens mentionnent encore ce crédit, mais il n’existe plus.)
- Google vous posera quelques questions sur la façon dont vous prévoyez d’utiliser le service Maps. Répondez-y et cliquez sur Envoyer.
- Cliquez sur Clés et identifiants dans le menu de gauche.
- Cliquez sur le menu déroulant Créer des identifiants, puis sur Clé API.
- Dans la fenêtre modale qui apparaît, vous pouvez définir le nom et les autorisations de votre nouvelle clé API. Il n’est pas nécessaire de modifier ces paramètres ; faites défiler jusqu’en bas et cliquez sur Créer.
- Copiez la clé API.
Il est important de restreindre votre clé avant la mise en ligne de votre site. Une clé non restreinte dans le code source de votre page peut être copiée et utilisée pour faire grimper votre facture. Suivez les bonnes pratiques de Google pour les clés API afin de la limiter à votre domaine.
Terminer la configuration de l’extension dans WordPress
- Retournez sur la page de paramètres de l’extension WP Go Maps dans votre installation WordPress et collez la clé API dans le champ Clé API Google Maps. Cliquez ensuite sur le bouton Enregistrer les paramètres.
- Cliquez sur Cartes dans le menu de gauche.
- L’extension a déjà créé la première carte pour vous. Cliquez sur le bouton Modifier pour la visualiser.
- C’est ici que vous configurez l’affichage de votre carte sur votre site web. Cliquez sur l’onglet Marqueurs pour commencer à ajouter votre entreprise.
- Cliquez sur le menu à trois points et supprimez le marqueur de carte prédéfini.
- Cliquez sur Ajouter un marqueur en haut.
- Recherchez l’adresse de votre entreprise et sélectionnez-la lorsqu’elle apparaît dans la liste.
- Cliquez sur le bouton Ajouter un marqueur pour terminer.
- Votre entreprise est désormais marquée sur la carte. Vous pouvez personnaliser le niveau de zoom et d’autres paramètres visuels en revenant en arrière et en cliquant sur le bouton Paramètres. N’oubliez pas de cliquer sur Enregistrer la carte en bas de l’écran lorsque vous avez terminé.
- Lorsque vous êtes prêt à placer votre carte sur une page de votre site web, cliquez sur le bouton Obtenir le shortcode en bas à gauche. Le shortcode sera alors copié dans votre presse-papiers.
- Rendez-vous sur la page où vous souhaitez ajouter votre carte, cliquez pour ajouter un nouveau bloc et tapez Shortcode pour filtrer les options. Cliquez dessus lorsqu’il apparaît.
- Collez le shortcode dans le champ de saisie et cliquez sur Publier ou Enregistrer.
- Lorsque vous visitez la page, la carte affiche votre marqueur avec les paramètres que vous avez sélectionnés.
Option 3 : Ajouter un widget Google Maps gratuit et personnalisable (recommandé)
Le widget Google Maps de Jotform est une carte gratuite et entièrement personnalisable qui ne nécessite ni l’installation d’une extension ni le paiement d’une licence. Avec celui-ci, vous pouvez
- Ajouter un ou plusieurs emplacements affichés sur la même carte.
- Choisir le type de vue de la carte, y compris plan ou satellite.
- S’adapter à un thème clair ou sombre, avec un contrôle du rayon des coins pour les encadrés.
- Définir la taille, la mise en page et le niveau de zoom de la carte.
Par rapport aux iFrames natifs, ce widget est personnalisable, permet d’afficher plusieurs épingles sur la même carte et est responsive par défaut. Par rapport à une extension, il n’alourdit pas votre site web et ne nécessite pas un forfait payant pour débloquer toutes ses fonctionnalités.
Malgré ces avantages, le widget Google Maps de Jotform nécessite tout de même une clé API Google Maps. Vous devrez passer par les étapes de configuration et créer un compte de facturation auprès de Google.
Comment ajouter le widget Google Maps de Jotform à votre site web
- Rendez-vous sur la page du widget Google Maps de Jotform. Dans la plupart des cas, l’outil de configuration se charge automatiquement ; si ce n’est pas le cas, cliquez sur Créer un nouveau widget de site web pour commencer.
- Suivez ce guide pour obtenir votre clé API Google Maps. Il couvre toutes les étapes détaillées dans l’option 2, ainsi que la façon de restreindre votre clé pour la sécuriser. (N’oubliez pas que Google Maps autorise 10 000 chargements de carte gratuits chaque mois. Chaque tranche de 1 000 chargements supplémentaires coûte 7 $.) Une fois terminé, collez votre clé API Google Maps dans le champ de saisie.
- Ajustez les paramètres généraux selon vos préférences. Cela inclut l’apparence de la carte et le nombre d’emplacements que vous souhaitez y ajouter. Les captures d’écran ci-dessous utilisent les bureaux de Jotform à San Francisco et au Canada pour montrer une carte multi-épingles, mais vous pouvez ajouter un seul emplacement ou autant que nécessaire. Cliquez sur Continuer lorsque vous avez terminé.
- Modifiez les paramètres de style tels que le thème, la police ou le CSS personnalisé. Cliquez sur Continuer lorsque vous avez terminé.
- Personnalisez la mise en page et les fonctionnalités supplémentaires dans cette dernière étape. Cliquez sur Essayez-le gratuitement sur votre site web lorsque vous êtes prêt.
- Inscrivez-vous pour un compte Jotform gratuit ou connectez-vous à un compte existant. Le code d’intégration apparaît une fois la connexion terminée. Cliquez sur Copier le code.
- Ajoutez le code d’intégration à votre page avec un bloc HTML personnalisé, en suivant les étapes 7 à 11 de l’option 1 : insérez le bloc, collez le code, puis cliquez sur Publier ou Enregistrer.
- Ouvrez la page sur votre téléphone. Contrairement à l’iFrame natif de l’option 1, le widget se redimensionne automatiquement pour s’adapter à l’écran, de sorte que la carte qui était tronquée sur mobile s’affiche ici en intégralité.
Développez votre site WordPress avec des widgets intelligents et sans serveur
Intégrer des fonctionnalités intelligentes à votre site web implique généralement de payer de nouvelles extensions ou de se débattre avec du code. Jotform vous permet de passer outre tout cela : en plus du widget Google Maps, le répertoire de widgets de site web Jotform propose plus de 150 widgets gratuits et sans code, configurables simplement en collant un extrait HTML sur votre site web.
Ces options se combinent parfaitement avec le widget Maps :
- Widget Horaires d’ouverture : Ce widget affiche les horaires d’ouverture, y compris un statut en temps réel ouvert ou fermé que vous pouvez placer à côté de votre carte, afin que les visiteurs qui vous trouvent sur la carte sachent instantanément si vous êtes ouvert. Aucune clé API requise.
- Widget Prise de rendez-vous : Ajoutez une fonctionnalité de réservation à votre site web pour que les visiteurs puissent planifier un créneau avec vous. Ce widget permet d’ajouter des disponibilités, de lister vos types de services avec leur durée et leur tarification, et d’accepter des réservations sans avoir besoin d’un outil supplémentaire.
- Widget FAQ : Ce widget affiche les réponses aux questions fréquentes dans un accordéon avec fonction de recherche. Faire la même chose dans WordPress est facile, mais obtenir l’expérience soignée qu’offre ce widget impliquerait de manipuler du code ou d’installer encore une autre extension.
Si vous êtes sur un hébergement WordPress d’entrée de gamme, les extensions consomment des ressources serveur essentielles, ralentissant votre site web et offrant une mauvaise expérience utilisateur à vos visiteurs. Les widgets de Jotform fonctionnent sur l’infrastructure de Jotform, de sorte que la charge n’est pas gérée par votre site web. Cela libère des ressources serveur, rendant votre site web plus rapide et plus agréable à utiliser.
Vous souhaitez faire passer votre site WordPress au niveau supérieur ? Consultez
- Notre guide Comment utiliser WordPress pour apprendre à créer un site web professionnel sans investir dans une formation en conception web
- L’intégration WordPress de Jotform, qui simplifie votre collecte de données grâce à l’automatisation, aux paiements et aux fonctionnalités avancées sur une seule plateforme
FAQ
Oui, cela peut ralentir votre site web. Une carte Google Maps interactive charge une grande quantité de JavaScript, de 100 Ko à 2 Mo. Lors d’un test indépendant, une seule intégration a fait perdre 14 % au score de vitesse de la page, augmentant le temps nécessaire avant que le site soit prêt à interagir de 6,5 secondes. Pour éviter les ralentissements, chargez le script de la carte uniquement sur la page qui l’utilise, utilisez le chargement différé (lazy-load) pour l’iFrame, ou ajoutez une image de remplacement avec chargement au clic.
Oui, mais pas avec l’intégration iFrame de base. Pour placer plusieurs marqueurs, créez une carte dans Google My Maps : placez vos épingles, définissez la carte comme publique, copiez le code d’intégration et collez-le sur votre site web. Même si vous pouvez ajouter autant d’épingles que vous le souhaitez, vous ne pouvez pas personnaliser le style de la carte ni ajouter des panneaux de détails personnalisés. Si vous voulez plusieurs épingles et des fonctionnalités de personnalisation, le widget Google Maps de Jotform fait le travail (il nécessite simplement votre clé API Google Maps).
Oui. De nombreuses extensions WordPress Google Maps proposent des versions gratuites fonctionnelles qui couvrent les cartes de base, bien que les fonctionnalités avancées soient généralement réservées au forfait payant. Si vous préférez ne pas installer d’extension, l’iFrame natif de Google Maps et Google My Maps sont tous deux gratuits. Le widget Google Maps de Jotform est également gratuit, offrant la personnalisation et les cartes multi-épingles sans augmenter la charge serveur, mais il nécessite tout de même une clé API Google Maps.
Cet article s’adresse aux propriétaires de sites WordPress, aux commerces de proximité, aux agents immobiliers et aux organisateurs d’événements qui souhaitent comparer les différentes façons d’ajouter une carte interactive et adaptée au mobile avec des intégrations, des extensions ou des widgets personnalisables.
Envoyer un commentaire: