Comment intégrer une carte Google Maps en utilisant le module Embed Code d'Odoo
Copiez le code d'intégration iframe de Google Maps, ouvrez l'éditeur de site Web d'Odoo, faites glisser le bloc Embed Code de la section Contenu dynamique sur votre page, collez l'iframe dans l'éditeur du bloc,...
Pour intégrer une carte Google Maps dans Odoo à l'aide du module Embed Code intégré, obtenez d'abord l'extrait iframe de Google Maps, puis ajoutez le bloc Embed Code à votre page dans l'éditeur de site Web et collez le code. La carte s'affiche sur le site en direct sans développement personnalisé.
Comment fonctionne le bloc Embed Code
Le bloc Embed Code est une fonctionnalité de base de l'application Odoo Website. Il stocke tout extrait HTML que vous y collez. Lorsqu'un visiteur charge la page, Odoo affiche directement cet extrait dans la mise en page. Aucun traitement côté serveur n'est effectué. Le bloc agit comme un conteneur pour HTML brut, incluant les iframes, scripts ou styles personnalisés.
Ce bloc est parfait pour les intégrations de tiers comme Google Maps, des vidéos YouTube ou des widgets de réservation. Vous n'avez pas besoin de modifier les fichiers de template ou d'écrire du code Python. Le bloc respecte la grille responsive de la page. Vous pouvez le placer dans des colonnes, des sections ou n'importe quel conteneur.
Odoo ne nettoie pas l'extrait. Vous pouvez donc coller n'importe quel HTML valide. Mais soyez vigilant. Un code malveillant pourrait endommager votre site. Colllez toujours du code provenant de sources fiables comme Google Maps.
Prérequis
- Une instance Odoo avec l'application Website installée (standard dans Odoo Online, Odoo.sh et sur site).
- Un accès éditeur à la page où vous souhaitez afficher la carte.
- Un lien d'intégration Google Maps — aucune clé API n'est requise pour l'iframe de base "Intégrer une carte".
Guide étape par étape (avec détails du pack de sources)
- Obtenez le code d'intégration de Google Maps. Ouvrez Google Maps dans un navigateur, recherchez l'adresse ou l'endroit, cliquez sur Partager → Intégrer une carte, choisissez une taille (petite, moyenne, grande ou personnalisée), puis cliquez sur Copier le HTML. Le presse-papier contient maintenant une balise
<iframe>. - Connectez-vous à votre compte Odoo et accédez au module "Website". Depuis le tableau de bord, cliquez sur Website. Naviguez ensuite vers la page que vous souhaitez modifier et cliquez sur le bouton Modifier pour ouvrir le panneau d'édition.
- Localisez le module Embed Code. Dans le panneau d'édition, faites défiler le panneau Blocs jusqu'à atteindre la section Contenu dynamique. Le bloc est intitulé Embed Code.
- Faites glisser le bloc sur la page. Déposez-le à l'endroit où la carte doit apparaître — à l'intérieur d'une colonne, d'une section ou directement sur la grille.
- Une fois le module placé, cliquez sur le bouton "Modifier" situé dans le panneau de droite pour saisir le code. Une fenêtre contextuelle apparaît.
- Dans la fenêtre contextuelle qui s'affiche, collz l'extrait de code fourni par Google Maps dans la zone désignée, puis cliquez sur "Enregistrer" pour appliquer les changements. Le bloc contient maintenant l'iframe.
- Facultatif : Ajustez la visibilité. Toujours dans le panneau de droite, ouvrez la section Visibilité. Vous pouvez activer Masquer sur ordinateur ou Masquer sur mobile si la carte ne doit s'afficher que sur certains appareils. Cliquez sur Enregistrer à nouveau.
- Publier. Quittez l'éditeur et cliquez sur Publier (ou Enregistrer si la page est déjà en direct). Visitez l'URL de face pour confirmer que la carte se charge.
Obtenir un iframe Google Maps propre
La boîte de dialogue "Intégrer une carte" produit un iframe avec une largeur et une hauteur fixes. Pour les mises en page responsive, remplacez les dimensions en pixels par width="100%" et une hauteur raisonnable (par exemple, height="400"). Exemple :
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>L'ajout de loading="lazy" repousse le chargement de la carte jusqu'à ce que le visiteur la fasse défiler, améliorant ainsi les scores de vitesse de page.
Problèmes courants et corrections rapides
- La carte affiche "Cette page ne peut pas charger Google Maps correctement." L'attribut src de l'iframe peut être tronqué. Recopiez l'intégrale du code d'intégration de Google Maps ; l'URL est longue et facile à tronquer.
- La carte est trop petite ou dépasse sur mobile. Assurez-vous que l'iframe a
width="100%"et que la colonne/section parente n'a pas de largeur fixe en pixels qui force un dépassement. - Bloc introuvable dans Contenu dynamique. Dans Odoo 17+, le bloc s'appelle toujours Embed Code. Si vous utilisez un thème personnalisé qui masque les blocs de base, vérifiez la liste des blocs du thème ou basculez temporairement vers le thème par défaut pour vérifier.
- Avertissement de contenu mixte HTTPS. Les URLs d'intégration de Google Maps sont en HTTPS. Si votre site Odoo fonctionne en HTTP localement (par exemple,
localhost), le navigateur peut bloquer l'iframe. Utilisez un domaine valide avec SSL pour les tests.
Scénarios d'utilisation pratiques pour le bloc Embed Code
Page de contact – Affichez l'emplacement de votre bureau. Glissez la carte près du formulaire de contact. Les visiteurs peuvent voir exactement où vous êtes.
Page d'événement – Intégrez une carte du lieu. Les participants peuvent obtenir des directions sans quitter votre site.
Localisateur de magasins – Si vous n'aviez qu'un seul emplacement, l'intégration statique fonctionne parfaitement. Pour plusieurs emplacements, vous avez besoin d'une solution personnalisée.
Annonce immobilière – Placez une carte de la propriété. Utilisez Street View si disponible.
Page d'information touristique – Affichez des points d'intérêt. Utilisez plusieurs blocs d'intégration pour différents endroits.
Limitations et quand utiliser un module personnalisé
- Pas de repères dynamiques ou d'itinéraires. L'iframe statique affiche un seul emplacement. Pour plusieurs repères, directions ou styles personnalisés, vous avez besoin de l'API Maps JavaScript et d'un module personnalisé.
- Pas de contrôle côté serveur. L'iframe se charge entièrement depuis Google ; vous ne pouvez pas filtrer les couches de carte ou restreindre le zoom depuis Odoo.
- Consentement aux cookies. L'iframe définit des cookies Google. Si vous utilisez une bannière GDPR stricte, la carte peut ne pas se charger avant que le visiteur n'accepte les cookies marketing/analitiques.
- Limites de taux. L'endpoint d'intégration gratuit est généreux mais pas illimité. Les sites à fort trafic (millions de chargements de carte/mois) devraient migrer vers l'API Maps JavaScript avec un compte de facturation.
| Besoin | Approche recommandée | Effort |
|---|---|---|
| Emplacement statique unique, zéro code | Bloc Embed Code + iframe Google Maps (cet article) | Faible |
| Plusieurs emplacements, liste filtrable | Module Odoo personnalisé utilisant l'API Maps JavaScript | Moyen–Élevé |
| Bouton d'itinéraire, repères personnalisés, clustering | API Maps JavaScript + widget personnalisé | Élevé |
| Localisateur de magasins avec géolocalisation | Module dédié de localisation de magasins (OCA/web_widget_google_maps ou tiers) | Moyen |
Faits clés
| Élément | Détail |
|---|---|
| Nom du bloc Odoo | Embed Code |
| Emplacement du bloc | Panneau Blocs → Contenu dynamique |
| Étape de configuration | Cliquer sur Modifier dans le panneau de droite → coller l'iframe → Enregistrer |
| Options de visibilité | Masquer sur ordinateur, Masquer sur mobile |
| Source Google Maps | Partager → Intégrer une carte → Copier le HTML |
| Clé API requise | Non (pour l'iframe d'intégration de base) |
| Astuce responsive | Définir l'iframe width="100%" et une hauteur fixe |
Foire aux questions
Une clé API Google Cloud est-elle nécessaire pour l'intégration de base ?
Non. L'iframe "Intégrer une carte" fonctionne sans clé API. Les clés sont uniquement requises pour l'API Maps JavaScript, l'API de géocodage ou l'API Places.
Puis-je intégrer un panoramique Street View au lieu d'une carte ?
Oui. Dans Google Maps, ouvrez Street View, cliquez sur Partager → Intégrer une carte, et copiez cette iframe. Le même bloc Embed Code le gère.
Pourquoi la carte n'apparaît-elle pas dans l'aperçu de l'éditeur backend ?
L'éditeur d'Odoo nettoie parfois les iframes dans l'aperçu en direct. Publiez la page et affichez l'URL de face ; la carte s'y affichera.
Comment centrer la carte sur une coordonnée au lieu d'une adresse ?
Dans Google Maps, cliquez avec le bouton droit sur l'emplacement exact → "Ici ?" → copiez la latitude/longitude du bas de la carte → recherchez ces coordonnées → Partager → Intégrer une carte.
Je peux restreindre la carte à certains niveaux de zoom ?
Non avec l'iframe d'intégration. L'API Maps JavaScript prend en charge les options minZoom et maxZoom, qui nécessitent un module personnalisé.
Le code d'intégration survivra-t-il aux mises à jour d'Odoo ?
Oui. Le bloc Embed Code est une fonctionnalité de base de Website. Votre iframe collée est stockée dans le contenu de la page (ir.ui.view) et est préservée lors des mises à jour de version.
Et si j'ai besoin de la carte dans un template de page produit ou de formulaire de contact ?
Modifiez le template QWeb pertinent (par exemple, website_sale.product ou website.contact) en mode développeur, insérez un <iframe> directement dans l'XML, ou créez un champ calculé qui renvoie le HTML de l'iframe et affichez-le avec t-out="0". Cela dépasse le bloc Embed Code sans code.
Puis-je intégrer plusieurs cartes sur une seule page ?
Oui. Faites glisser plusieurs blocs Embed Code sur la page. Chaque bloc contient une iframe. Assurez-vous que l'attribut src de l'iframe inclut des IDs d'emplacement uniques pour éviter les doublons.
La carte fonctionne-t-elle sur les appareils mobiles ?
Oui. L'iframe est responsive si vous définissez width="100%". Google Maps ajuste automatiquement l'affichage pour les petits écrans.
Comment faire charger la carte plus rapidement ?
Ajoutez loading="lazy" à l'iframe. De plus, définissez une image de substitution basse résolution jusqu'à ce que la carte se charge. Mais le code d'intégration ne prend pas en charge les images de substitution personnalisées.
Lecture et sources de comparaison supplémentaires
Ces sources externes fournissent un contexte supplémentaire pour évaluer le sujet. Leur inclusion ne constitue pas une approbation.
Lecture et sources de comparaison supplémentaires
Ces sources externes fournissent un contexte supplémentaire pour évaluer le sujet. Leur inclusion ne constitue pas une approbation.
En savoir plus
Visitez le site Web pour plus d'informations.
Ready to Take the Next Step?
See how our verified tools and services help you put this guide into practice.