Aller au contenu

Utiliser le bloc Carte du quartier

Avec le bloc Gutenberg Carte des environs du bien immobilier individuel (immomakler/single-map), vous intégrez la carte d’un bien immobilier directement dans des templates de blocs ou dans n’importe quelle page. Le bloc correspond en termes de fonctionnalités et de rendu au widget Elementor du même nom, « Carte des environs du bien immobilier individuel ».

  • WordPress avec l’éditeur Gutenberg (à partir de WordPress 5.0)
  • WP-ImmoMakler (toute édition)
  • Un fournisseur de cartes doit être sélectionné dans le Customizer, sous WP-ImmoMakler → Cartes. Si aucune carte ne peut être dessinée avec celui-ci, la carte Embed Google Maps prend le relais, à condition qu’elle soit activée comme solution de secours
  • Le bien immobilier doit avoir une adresse ou des coordonnées géographiques enregistrées
  1. Modifier un bien ou ouvrir un template

    Ouvrez un bien immobilier existant dans l’éditeur ou un template basé sur des blocs pour le type de publication Bien immobilier (requiert un thème de blocs ou le Site Editor).

  2. Insérer le bloc

    Cliquez sur le symbole + et recherchez Carte du quartier, ou naviguez vers la catégorie Widgets. Insérez le bloc.

  3. Vérifier l’aperçu

    Dans l’éditeur, un aperçu en temps réel s’affiche avec les données d’un exemple de bien existant. La carte apparaît avec la fonctionnalité de consentement configurée. Sur la page réelle du bien, la carte de l’objet correspondant est affichée.

Dans le panneau de bloc Apparence, vous définissez la hauteur de la carte :

ParamètreDescription
UnitéUnité pour la hauteur de la carte : px, %, vh ou vw. Par défaut : px.
Hauteur de la carteHauteur de la carte dans l’unité sélectionnée. Par défaut : 350 px.

Plages disponibles selon l’unité :

UnitéMinimumMaximum
px1001200
%10100
vh10100
vw10100

La hauteur configurée est appliquée en CSS en ligne scoped aux sélecteurs de conteneur de carte .immomakler-map-iframe, .immomakler-map-iframe iframe.map et iframe.immomakler-map-iframe.

Classes CSS pour des personnalisations supplémentaires

Section intitulée « Classes CSS pour des personnalisations supplémentaires »

Pour une personnalisation plus poussée, vous pouvez utiliser vos propres règles CSS dans votre thème :

/* Enveloppe du bloc */
.wp-block-immomakler-single-map .immomakler-single-map { }
/* Conteneur de carte (iframe ou div de l'API JS) */
.immomakler-map-iframe { }
/* Élément iframe intégré */
.immomakler-map-iframe iframe.map { }