Google Street View dans Elementor : guide complet
Elementor est le constructeur de pages WordPress le plus populaire. WP Google Street View s'intègre de façon transparente via les shortcodes. Voici comment ajouter Street View et Google Maps à n'importe quelle page Elementor.
Méthode 1 : widget Shortcode
- Dans Elementor, glissez un widget Shortcode sur votre page
- Collez le shortcode WP Google Street View :
[wpgsv id="42"] - La carte s'affiche dans l'aperçu en direct
Cette méthode fonctionne avec n'importe quelle carte configurée dans l'admin WP Google Street View. Tous les paramètres (type, style, marqueurs, couches) sont appliqués.
Méthode 2 : shortcode inline avec coordonnées
Pour des intégrations rapides sans créer d'article WPGSV :
- Glissez un widget Shortcode
- Collez :
[wpgsv_map lat="45.5017" lng="-73.5673" type="street"] - Le panorama Street View s'affiche immédiatement
Méthode 3 : widget HTML
Si vous avez besoin de plus de contrôle sur le balisage environnant :
- Glissez un widget HTML
- Entrez le shortcode enveloppé dans un div pour le style personnalisé :
<div style="border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
[wpgsv id="42"]
</div>Considérations responsive
Les cartes WP Google Street View sont responsives par défaut lorsque la largeur est à 100%. Dans Elementor, le widget Shortcode hérite de la largeur de la colonne, donc les cartes s'adaptent automatiquement à la mise en page.
Combinaison avec les fonctionnalités Elementor
- Widget Onglets — Placez différentes cartes dans différents onglets (par exemple « Street View » et « Carte »)
- Accordéon — Affichez les cartes dans des sections dépliables pour économiser l'espace
- Popup — Déclenchez une popup de carte au clic sur un bouton avec le constructeur de popup d'Elementor Pro
- Loop Grid — Pour les sites de listings, utilisez des shortcodes dynamiques dans le Loop Grid pour afficher des cartes par annonce
Conseil de performance
Si vous avez plusieurs cartes sur une page Elementor, pensez à utiliser le chargement différé intégré d'Elementor pour les sections. Cela empêche toutes les cartes de se charger simultanément.