Intégrer Google Maps sur votre site web permet aux utilisateurs d'accéder facilement aux informations de localisation, d'afficher une épingle de carte pour une adresse précise et de naviguer à l'aide de fonctionnalités telles que les itinéraires et Street View. Cela améliore également votre référencement local.
Intégrer Google Maps manuellement via le code
Suivez les étapes ci-dessous pour intégrer Google Maps, soit manuellement, soit via les widgets WordPress. Voici comment cela fonctionne :
- Ouvrir Google Maps
- Cliquez sur Partager et Intégrer une carte et copiez le code d’intégration
- Collez le code d'intégration dans le HTML de votre site Web.
Étape 1 : Ouvrez Google Maps
Aller à https://www.google.com/maps/ Et recherchez l’emplacement souhaité dans la barre de recherche. Vous pouvez localiser l’adresse de votre entreprise, afficher une destination ou passer à la vue satellite pour plus de détails.
Étape 2 : Générer le code d’intégration
- Cliquez sur Icône de partage dans l'interface de la carte.
- Dans le Fenêtre de partage, sélectionnez l’onglet « Intégrer une carte ».
- Copiez ce qui est fourni. code d’intégration (iframe).
Étape 3 : Collez le code d’intégration dans le HTML de votre site Web
- Ouvrez votre Code HTML Enregistrez le fichier avec n'importe quel éditeur de code, ou ouvrez votre page WordPress et sélectionnez un widget HTML.
- Repérez la section où vous souhaitez que la carte s'affiche et collez le code iframe.
- Enregistrez les modifications et actualisez votre page Web pour voir la carte intégrée.
Exemple de code d’intégration iframe :
Copier le codeCopiéUtilisez un navigateur différent<code id="dm-code-raw" class=" no-wrap language-markup"><iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></code>
Rendre la carte réactive
Pour garantir que la carte s'affiche correctement sur toutes les tailles d'écran, vous pouvez envelopper l'iframe dans un conteneur avec du CSS :
Copier le codeCopiéUtilisez un autre navigateur<code id="dm-code-raw" class=" no-wrap language-markup"><div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;"> <iframe src="https://www.google.com/maps/embed?..." style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div></code>
Intégrer Google Maps avec les constructeurs de pages WordPress
La plupart des constructeurs de pages WordPress, tels que Elementor, Divi ou WPBakery, incluent un Google Maps widget. Cette méthode simplifie le processus et élimine le besoin de codage manuel. Les widgets offrent souvent des options de personnalisation telles que les niveaux de zoom, le type de carte (par défaut, vue satellite, etc.), et la personnalisation des marqueurs.
Par exemple, dans Elementor, vous pouvez intégrer une carte Google Maps en utilisant :
- À la recherche de Cartes widget
- Traînant le Cartes widget sur votre page
- Saisissez le nom de votre établissement.
En tant qu'utilisateur de WordPress, vous pourriez également vouloir en savoir plus sur Comment faire du SEO sur WordPress!
Problèmes courants et dépannage
- Carte non affichée: Vérifiez à nouveau que le code iframe a été correctement copié et collé.
- Problèmes de clé API : Certaines fonctionnalités avancées peuvent nécessiter un clé API pour l'intégration.
- Restrictions du navigateur: Assurez-vous que votre site autorise les iframes et qu'il n'y a pas de plugins ou de scripts en conflit.
Questions fréquentes
Puis-je intégrer Google Maps sur mon site web gratuitement ?Oui, vous pouvez intégrer Google Maps gratuitement en utilisant le code d’intégration iframe fourni par Google Maps.
L’intégration de Google Maps améliore-t-elle le référencement ?Oui, l’intégration de Google Maps peut améliorer le référencement local en fournissant des données de localisation claires et en améliorant l’expérience utilisateur.
Conclusion
Intégrer Google Maps est un moyen simple d'améliorer votre site web. Que vous optiez pour du code manuel ou un widget WordPress, vous offrirez à vos visiteurs des informations précieuses sur l’emplacement et vous améliorerez les fonctionnalités de votre site. Pour les utilisateurs de WordPress, assurez-vous d'explorer notre tutoriel lié pour des instructions étape par étape sur l'utilisation des widgets Google Maps.
I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.
Cet article peut contenir des liens d'affiliation sur lesquels nous percevons une commission lors de l'achat d'un produit donné.
I’m an experienced SEO professional with over a decade of helping over 100 businesses rank higher online, especially local businesses, e-commerce stores and SaaS. As the co-founder of LPagery, I specialize in practical, proven strategies for regular SEO and Local SEO success.