Comment ajouter une carte 3D à un site web immobilier
Planifiez, intégrez et vérifiez une carte de propriété 3D interactive avec un conteneur adaptatif, un accès domaine, le chargement différé, l'attribution et des tests mobiles.
Pour ajouter une carte 3D à un site web immobilier, publiez la présentation de l'emplacement, autorisez le domaine du site, copiez l'iframe HTTPS généré, placez-le dans un bloc d'intégration adaptatif et vérifiez-le sur le domaine public. Contrôlez l'affichage mobile, le chargement différé, l'attribution, le comportement lié au consentement et le chargement du widget sécurisé après le déploiement. Utilisez le guide spécifique à votre plateforme pour connaître les étapes exactes dans l'éditeur.
Prérequis pour les cartes 3D interactives
Avant d'intégrer une carte 3D interactive à votre site immobilier, vous devez rassembler les éléments nécessaires et vérifier la compatibilité technique. Contrairement aux simples images statiques ou aux fichiers vidéo passifs, une carte 3D interactive repose sur le rendu en temps réel d'images géospatiales sous licence. Cela signifie que l'environnement d'hébergement de votre site doit prendre en charge le rendu HTTPS sécurisé et autoriser les intégrations d'iframe personnalisées. Vous aurez besoin d'une adresse de propriété vérifiée, d'une liste de points d'intérêt environnants et d'un accès administrateur au système de gestion de contenu (CMS) de votre site.
De plus, vous devez sélectionner le modèle de présentation adapté à votre objectif marketing. Georivo prend en charge trois modèles principaux : Présentation de propriété, Vie de quartier et Guide d'arrivée. Le modèle Présentation de propriété se concentre sur les limites immédiates de la résidence. Le modèle Vie de quartier met en valeur les commodités locales, les écoles et les transports en commun. Le modèle Guide d'arrivée fournit des indications visuelles claires pour les visiteurs. Définir ces paramètres garantit que les mouvements de caméra et les éléments interactifs sont correctement programmés avant de générer le code d'intégration.
Il est également essentiel de vérifier la couverture de l'adresse et la disponibilité des images sur la plateforme avant de publier une présentation. Bien que l'imagerie géospatiale sous licence couvre la grande majorité des zones développées, effectuer cette vérification lors de la phase préliminaire garantit que l'intégration finale répondra à vos exigences de clarté visuelle et de précision avant son déploiement sur un site public.
- Une adresse de propriété vérifiée avec une couverture d'imagerie active.
- Un accès administrateur au CMS ou à l'éditeur HTML de votre site.
- Une liste claire des points d'intérêt à proximité à mettre en valeur.
- Un abonnement actif incluant les privilèges d'autorisation de domaine.
Publier et autoriser le domaine de votre site
La sécurité est une considération essentielle lors de l'intégration de contenu 3D interactif. Pour empêcher des tiers non autorisés de copier votre carte interactive et de l'afficher sur d'autres sites, le système utilise une sécurité liée au domaine. Avant que votre carte ne puisse se charger sur un site en production, vous devez explicitement autoriser le domaine cible dans votre tableau de bord. Cela crée une liaison sécurisée entre le serveur de rendu et votre hébergeur.
Pour autoriser votre domaine, accédez aux paramètres de partage de votre présentation d'emplacement terminée. Saisissez le nom de domaine exact où la carte sera hébergée, comme le site de votre agence ou la page de destination d'une annonce spécifique. Vous n'avez pas besoin d'inclure le chemin complet de la page, mais le domaine racine ou le sous-domaine doit correspondre. Une fois autorisé, la plateforme génère un lien de partage protégé et un extrait d'iframe personnalisé qui s'exécutera uniquement lorsqu'il sera chargé sur ce domaine spécifique.
Si votre processus de développement web implique un domaine de préproduction (staging), ce domaine doit également être ajouté à la liste autorisée dans votre tableau de bord. Sinon, la carte 3D interactive ne se chargera pas lors de vos phases de test interne. Notez que les environnements de prévisualisation locale qui n'utilisent pas un nom de domaine standard autorisé peuvent également rencontrer des blocages de chargement, ce qui fait de la configuration du domaine l'étape principale du processus de déploiement.
Copier et configurer le code d'intégration généré
Une fois l'autorisation du domaine terminée, la plateforme fournit un extrait de code iframe HTML standardisé. Cet extrait contient l'URL source HTTPS sécurisée, ainsi que des paramètres spécifiques qui contrôlent le comportement par défaut de la carte interactive. Par exemple, le code inclut des attributs pour autoriser le mode plein écran, activer les gestes tactiles et contrôler la lecture initiale de la caméra.
Copiez l'intégralité du bloc de code exactement tel qu'il a été généré. N'essayez pas de modifier manuellement les paramètres de l'URL source, car cela pourrait corrompre le jeton de sécurité ou désactiver des éléments essentiels de l'interface utilisateur. Si vous devez ajuster la trajectoire par défaut de la caméra ou mettre à jour les lieux d'intérêt mis en évidence, effectuez ces modifications dans l'éditeur du tableau de bord et republiez la présentation. L'iframe intégrée se mettra automatiquement à jour avec le nouveau contenu sans que vous n'ayez à remplacer le code sur votre site.
L'extrait de code généré inclut généralement des attributs standards tels que allowfullscreen pour permettre aux utilisateurs d'agrandir la carte 3D en plein écran, ainsi que des paramètres spécifiques de sandbox ou de permission qui garantissent une exécution sécurisée. Comprendre ces attributs aide les développeurs web à intégrer le code de manière fluide dans des modèles personnalisés ou des applications web complexes tout en respectant scrupuleusement les normes de sécurité web modernes.
Créer un conteneur adaptatif pour tous les appareils
Les acheteurs immobiliers parcourent les annonces sur une grande variété d'appareils, des grands écrans d'ordinateur aux écrans de téléphones portables. Par conséquent, votre carte 3D doit être placée dans un conteneur adaptatif qui ajuste automatiquement ses dimensions. Une largeur et une hauteur statiques entraîneraient un débordement de la carte sur les écrans mobiles ou la rendraient trop petite sur les ordinateurs.
Pour créer un conteneur adaptatif, utilisez un élément parent div avec un style CSS qui maintient un ratio d'aspect constant, tel que 16:9 ou 4:3. En définissant la largeur du conteneur à 100 pour cent et en utilisant padding-top pour définir le ratio d'aspect, vous garantissez que l'iframe s'adapte proportionnellement. Dans le CSS, définissez la largeur et la hauteur de l'iframe à 100 pour cent du conteneur parent, avec un positionnement absolu. Cette technique évite les décalages de mise en page et garantit une expérience interactive fluide pour chaque utilisateur.
Lors de la conception de la mise en page, réfléchissez à la manière dont le conteneur adaptatif interagit avec le contenu environnant, en particulier sur les appareils mobiles. Si le conteneur de la carte 3D interactive occupe toute la hauteur d'un écran mobile, les utilisateurs peuvent avoir des difficultés à faire défiler la page au-delà de la carte, car leurs gestes tactiles interagiront avec l'environnement 3D au lieu de faire défiler la page. Laisser des marges adéquates ou des zones de défilement tactiles sécurisées autour du conteneur adaptatif permet une navigation fluide sur les smartphones et les tablettes.
Optimiser les performances et le chargement différé
Les cartes 3D interactives nécessitent plus de ressources de navigation que le texte standard ou les images statiques car elles chargent dynamiquement l'imagerie géospatiale. Pour maintenir des vitesses de chargement de page rapides et une expérience utilisateur positive, vous devriez implémenter le chargement différé (lazy loading) pour l'iframe. Le chargement différé garantit que le navigateur ne télécharge les ressources de la carte 3D que lorsque l'utilisateur fait défiler la page jusqu'à la section où se trouve la carte.
Pour activer le chargement différé, ajoutez l'attribut loading=lazy à votre code iframe. La plupart des navigateurs modernes prennent en charge cet attribut de manière native. Pour les navigateurs plus anciens, vous pouvez utiliser des bibliothèques JavaScript légères pour différer le chargement de la source de l'iframe. En retardant l'initialisation de la carte 3D jusqu'à ce qu'elle soit nécessaire, vous préservez une bande passante précieuse pour le chargement initial de la page, ce qui améliore les performances de référencement naturel (SEO) de votre site et son ergonomie mobile.
Pour les sites web qui nécessitent la prise en charge de navigateurs plus anciens ou qui ont besoin de contrôles de chargement avancés, développeurs peuvent utiliser un chargement différé basé sur JavaScript. Cela consiste à placer une image de substitution ou un bloc de prévisualisation léger dans le conteneur de la carte et à le remplacer par l'iframe interactive réelle uniquement après une interaction de l'utilisateur, comme un clic ou un déclenchement au défilement. Cette approche garantit que l'empreinte du chargement initial de la page reste minimale, préservant des temps de chargement rapides sur les réseaux mobiles.
Limites et adéquation
Bien que les cartes 3D interactives offrent un moyen immersif de présenter l'emplacement des propriétés, elles présentent des limites techniques spécifiques et des critères d'adéquation. Ces visualisations reposent sur des images géospatiales sous licence et des mouvements de caméra programmés, ce qui signifie qu'elles ne remplacent pas directement les prises de vue réelles par drone des structures physiques existantes. Si une propriété est nouvellement construite ou subit d'importantes rénovations, l'imagerie satellite sous-jacente peut ne pas encore refléter ces changements physiques.
De plus, ces cartes interactives sont conçues pour la présentation d'emplacements, le contexte de quartier et l'aide à l'arrivée. Elles ne conviennent pas pour définir des limites juridiques, réaliser des relevés de terrain précis ou pour la navigation en temps réel. Les utilisateurs doivent vérifier la couverture de l'adresse et la disponibilité des images sur la plateforme avant de publier une présentation. De plus, comme les intégrations reposent sur une sécurité liée au domaine, elles ne se chargeront pas dans les environnements de prévisualisation locale ou sur les serveurs de préproduction non autorisés. Vous devez vous assurer que le domaine de production final est correctement répertorié dans vos paramètres de sécurité pour que les éléments interactifs fonctionnent.
Communiquer clairement ces limites aux visiteurs de votre site aide à gérer les attentes et préserve l'intégrité professionnelle de vos supports marketing. Les limites de propriété, les servitudes et les dimensions structurelles exactes doivent toujours être vérifiées à l'aide de documents juridiques officiels et de relevés professionnels. Distinguer la visualisation interactive des prises de vue réelles par drone est essentiel pour s'assurer que les clients comprennent la nature de l'expérience proposée.
Vérification publique et tests
Après d'avoir intégré la carte 3D sur votre site, vous devez effectuer un processus de vérification approfondi sur le domaine public en production. Ne vous fiez pas uniquement au mode de prévisualisation de votre système de gestion de contenu, car les restrictions de sécurité se comportent souvent différemment au sein des tableaux de bord d'administration. Ouvrez l'URL finale dans une fenêtre de navigation privée pour vous assurer qu'aucun identifiant d'administration mis en cache n'affecte le test.
Lors de votre vérification, testez la carte sur ordinateur et sur appareil mobile. Vérifiez que les mouvements de caméra programmés se lancent automatiquement s'ils sont configurés, et que les utilisateurs peuvent passer en mode d'exploration libre. Assurez-vous que les commandes tactiles sont intuitives sur les écrans mobiles, permettant aux utilisateurs de déplacer, zoomer et faire pivoter l'environnement 3D sans faire défiler accidentellement la page au-delà du conteneur de la carte. Enfin, confirmez que toutes les attributions et mentions de droits d'auteur requises sont visibles et lisibles.
Lors de la vérification publique, vous devez également vous assurer que toutes les attributions et mentions de droits d'auteur requises sont visibles et lisibles dans le lecteur iframe. Conformément aux directives de la plateforme et aux conditions d'utilisation de Google Maps Platform, ces attributions ne doivent pas être bloquées, rognées ou masquées par des éléments superposés personnalisés du site. De plus, si votre site utilise une bannière de consentement aux cookies ou de gestion de la confidentialité, vérifiez que le comportement de chargement de l'iframe respecte les choix de consentement de l'utilisateur et n'exécute pas de scripts non autorisés avant l'obtention du consentement.
Résolution des problèmes d'intégration courants
Si votre carte 3D intégrée ne se charge pas correctement, la cause la plus fréquente est une non-correspondance de domaine. Si la console du navigateur affiche une erreur de sécurité ou d'autorisation, vérifiez que le domaine en production correspond exactement au domaine autorisé dans votre tableau de bord. N'oubliez pas que les sous-domaines, comme la différence entre www et le domaine racine, doivent être pris en compte dans vos paramètres de sécurité.
Un autre problème fréquent est la distorsion de la mise en page, où la carte apparaît écrasée ou coupée. Cela est généralement dû à des règles CSS conflictuelles dans le thème de votre site. Inspectez le conteneur parent pour vous assurer qu'il n'y a pas de restrictions de hauteur fixe ou de conflits de marges internes (padding). Si les éléments interactifs ne répondent pas aux gestes tactiles sur les appareils mobiles, vérifiez qu'aucun élément de superposition transparent, tel que des blocs de texte ou des boutons flottants, ne bloque le conteneur de l'iframe.
Si les gestes tactiles ne répondent pas du tout, vérifiez la propriété CSS pointer-events sur l'iframe et ses conteneurs parents. Parfois, les éléments parents ont pointer-events défini sur none, ou des éléments adjacents chevauchent la zone d'interaction de l'iframe. Rétablir le comportement par défaut de pointer-events garantit que les utilisateurs peuvent interagir de manière transparente avec l'environnement 3D sur tous les appareils tactiles.
| Plateforme | Méthode d'intégration | Ratio d'aspect recommandé | Prise en charge du chargement différé |
|---|---|---|---|
| WordPress | Bloc HTML personnalisé | 16:9 | Natif ou extension |
| Webflow | Composant d'intégration | 16:9 ou 4:3 | Attribut natif |
| Wix | Widget iframe HTML | Conteneur adaptatif | Géré par la plateforme |
| Squarespace | Bloc de code | 16:9 | Attribut natif |
| Custom HTML | Balise iframe directe | Ratio d'aspect CSS | Natif ou différé via JS |
Processus d'intégration de la carte 3D étape par étape
- Vérifiez la couverture de l'adresse de la propriété et sélectionnez votre modèle de présentation dans le tableau de bord.
- Programmez les mouvements de caméra, mettez en valeur les principaux lieux à proximité et enregistrez vos modifications.
- Ajoutez le domaine de votre site cible à la liste autorisée dans le panneau des paramètres de sécurité.
- Générez et copiez le code d'intégration de l'iframe HTTPS sécurisé depuis la boîte de dialogue de partage.
- Collez le code copié dans l'outil de création de votre site ou dans votre conteneur HTML personnalisé.
- Appliquez des styles CSS adaptatifs pour vous assurer que le conteneur s'adapte correctement sur les écrans mobiles.
- Vérifiez l'intégration en production dans une fenêtre de navigation privée sur un domaine public.
Contrairement aux vidéos passives ou aux prises de vue réelles par drone, les cartes 3D interactives permettent aux acheteurs d'explorer un quartier à leur propre rythme, instaurant une confiance immédiate et une excellente compréhension de l'espace.
Questions fréquentes
Pourquoi ma carte 3D affiche-t-elle une erreur de restriction de domaine ?
Cette erreur se produit lorsque le domaine du site web qui héberge l'intégration ne figure pas dans vos domaines autorisés. Pour résoudre ce problème, connectez-vous à votre tableau de bord, accédez aux paramètres de la présentation et ajoutez le nom de domaine exact de votre site à la liste autorisée.
Puis-je utiliser ces cartes 3D sur plusieurs sites web ?
Oui, vous pouvez autoriser plusieurs domaines pour une seule présentation d'emplacement. Cela vous permet d'afficher votre carte 3D interactive sur différents domaines autorisés où vos annonces sont diffusées.
En quoi une carte 3D interactive diffère-t-elle de prises de vue réelles par drone ?
Une carte 3D interactive utilise des images géospatiales sous licence pour construire un environnement 3D photoréaliste, permettant aux utilisateurs de zoomer, de se déplacer et d'explorer les lieux à proximité en temps réel. Les prises de vue réelles par drone sont des fichiers vidéo statiques préenregistrés qui ne peuvent pas être manipulés ou explorés de manière interactive par le visiteur.
L'intégration d'une carte 3D va-t-elle ralentir la vitesse de chargement de mon site web ?
Par défaut, le code de l'iframe prend en charge le chargement différé (lazy loading) natif. Cela garantit que les ressources de la carte 3D ne se chargent que lorsqu'un visiteur fait défiler la page jusqu'à cette section, préservant ainsi la vitesse de chargement initial de votre page.
Ces cartes 3D fonctionnent-elles sur les navigateurs mobiles ?
Oui, les cartes interactives sont entièrement optimisées pour les gestes tactiles mobiles, permettant aux utilisateurs de naviguer de manière fluide dans l'environnement 3D sur smartphones et tablettes.
Quelles sont les exigences d'attribution pour les cartes 3D ?
Toutes les attributions de droits d'auteur et de plateforme requises sont directement intégrées dans le lecteur de l'iframe, conformément aux conditions d'utilisation de Google Maps Platform. Vous n'avez pas besoin d'ajouter de mentions textuelles supplémentaires sur votre site, mais vous ne devez pas bloquer ou masquer l'attribution intégrée.