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

1. Dans Elementor, glissez un widget Shortcode sur votre page
2. Collez le shortcode WP Google Street View : [wpgsv id="42"]
3. 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 :

1. Glissez un widget Shortcode
2. Collez : [wpgsv_map lat="45.5017" lng="-73.5673" type="street"]
3. 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 :

1. Glissez un widget HTML
2. 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.

Essayez Pro gratuitement pendant 7 jours

Toutes les fonctionnalités déverrouillées. Annulez à tout moment.

Démarrer l'essai