Créer un ID de carte Google Maps

PLUS Un ID de carte (en anglais « Map ID ») est un identifiant sous lequel Google enregistre dans le cloud le style de votre carte et sa configuration. Vous ne concevez donc plus la carte dans le code de votre site, mais dans la Google Cloud Console — votre site transmet seulement l’ID de carte. Depuis 2024, Google gère les styles de carte Google personnalisés exclusivement de cette manière ; l’ancien style au format JSON n’est plus pris en charge par Google avec les marqueurs de carte actuels.

À quoi WP-ImmoMakler utilise l’ID de carte

• Style de carte individuel : les couleurs, les libellés et les points d’intérêt affichés sur vos cartes.
• Mise en évidence des zones de codes postaux : la surface colorée que WP-ImmoMakler dessine à la place d’un rayon lorsqu’un bien n’a pas d’adresse exacte. Cette fonctionnalité nécessite un ID de carte pour lequel les calques d’éléments correspondants sont activés — voir Activer les zones de codes postaux.
• Cartes statiques : l’ID de carte est également transmis à l’image d’aperçu de la boîte de consentement et aux cartes des exposés PDF.

Tant que vous n’enregistrez pas votre propre ID de carte, WP-ImmoMakler dessine les cartes avec un ID de carte fourni par défaut dans le style standard de Google. Vous n’avez donc rien à configurer tant que l’apparence par défaut vous convient et que vous ne souhaitez pas mettre en évidence les zones de codes postaux.

Prérequis

• Un projet Google Cloud avec un compte de facturation associé et l’API Maps JavaScript activée — voir Créer des clés API Google Maps.
• Vous avez besoin du rôle Éditeur ou Propriétaire dans ce projet, sinon vous ne pouvez pas créer d’ID de carte.
• L’ID de carte et la clé API doivent se trouver dans le même projet Google Cloud. Google n’accepte pas un ID de carte provenant d’un autre projet — c’est la cause la plus fréquente d’une carte qui reste grise après la saisie de l’ID de carte.

Créer un ID de carte

1. Ouvrir la gestion des cartes

   Accédez à la page Gestion des cartes dans la Google Cloud Console et sélectionnez votre projet en haut de page — le même projet dans lequel se trouvent vos clés API Google Maps.

2. Créer un ID de carte

   Cliquez sur Créer un ID de carte et remplissez le formulaire :

   • Nom : un nom explicite, par exemple le nom de votre site.
   • Description (facultative) : à quoi sert l’ID de carte.
   • Type de carte : JavaScript. C’est la plateforme que WP-ImmoMakler utilise pour dessiner les cartes dans le navigateur de vos visiteurs.
   • Type de rendu : Vectoriel. La mise en évidence des zones de codes postaux ne fonctionne qu’avec des cartes vectorielles ; l’option Raster est certes le réglage par défaut de Google, mais elle ne peut pas dessiner ces surfaces.

   Vous pouvez laisser activées ou désactiver les options Inclinaison et Rotation — WP-ImmoMakler n’utilise ni l’une ni l’autre.

3. Enregistrer

   Cliquez sur Enregistrer. L’ID de carte apparaît alors dans la liste sous la forme d’une chaîne de lettres et de chiffres. Vous saisirez cette valeur plus tard dans WP-ImmoMakler.

Créer et associer un style de carte

Un ID de carte fraîchement créé affiche d’abord le style standard de Google. Vous définissez votre propre apparence dans un style de carte, que vous associez ensuite à l’ID de carte.

1. Créer un style

   Ouvrez la page Styles de carte et cliquez sur Créer un style. Choisissez l’un des styles Google comme point de départ (Clair ou Sombre, éventuellement Monochrome) et cliquez sur Personnaliser pour modifier les couleurs, les libellés et la visibilité de certains éléments de la carte, comme les points d’intérêt.

2. Enregistrer le style

   Cliquez sur Enregistrer et, dans la boîte de dialogue Enregistrer et publier le style de carte, donnez-lui un nom et, éventuellement, une description.

3. Associer le style à l’ID de carte

   Retournez dans la Gestion des cartes et ouvrez votre ID de carte. Cliquez sur Modifier dans la section Styles de carte, choisissez votre style, confirmez avec Terminé et enregistrez.

Note

Les modifications apportées à un style de carte s’appliquent automatiquement à tous les ID de carte qui lui sont associés — vous n’avez rien à adapter sur votre site. Selon Google, quelques heures peuvent toutefois s’écouler avant que les modifications ne soient visibles sur vos cartes.

Activer les zones de codes postaux

La mise en évidence colorée des zones de codes postaux n’est pas dessinée par WP-ImmoMakler, mais par Google lui-même : les surfaces proviennent des calques d’éléments de Google (en anglais « feature layers »), que vous activez par style de carte. WP-ImmoMakler se contente d’indiquer quelles zones doivent être colorées.

1. Ajouter des calques d’éléments

   Ouvrez votre style sur la page Styles de carte et dépliez le sélecteur Calques d’éléments. Activez :

   • Code postal (POSTAL_CODE) — pour les biens dont seule la zone de code postal est connue.
   • Localité (LOCALITY) — pour les biens dont seule la localité est connue.

   N’activez que ces deux calques. Chaque calque supplémentaire coûte du temps de chargement sans que WP-ImmoMakler l’utilise.

2. Enregistrer

   Cliquez sur Enregistrer. L’activation s’applique au style de carte, pas à l’ID de carte — elle ne prend donc effet qu’une fois le style associé à votre ID de carte comme décrit ci-dessus.

Non disponible dans tous les pays

Google ne fournit les limites de zones que pour certains pays. Pour l’Allemagne, les zones de codes postaux et les localités sont toutes deux disponibles ; pour la Suisse, seules les zones de codes postaux ; pour l’Autriche, ni l’une ni l’autre. Dans les pays non couverts, la mise en évidence reste désactivée et WP-ImmoMakler dessine à la place le rayon en cas de localisation approximative.

Note

Les calques d’éléments ne peuvent être activés que dans un style de carte clair. Si vous souhaitez utiliser un style sombre, associez également un style clair avec les calques activés au même ID de carte — les calques seront alors aussi disponibles pour le style sombre.

Renseigner l’ID de carte dans WP-ImmoMakler

1. Saisir l’ID de carte

   Saisissez l’ID de carte dans le back-office de votre site (wp-admin) sous WP-ImmoMakler → Intégrations → Les cartes, dans le champ ID de la carte Google Maps (Map-ID), et enregistrez. Sur la même page, sous Test de l’affichage de la carte, vous trouverez une carte de test dessinée avec exactement les réglages qui s’appliquent aussi sur votre site.

2. Choisir Google Maps comme fournisseur de cartes

   La mise en évidence n’est proposée qu’avec Google Maps. Vérifiez dans le Customizer, sous WP-ImmoMakler → Cartes, que le Fournisseur de cartes est bien réglé sur Google Maps.

3. Activer la mise en évidence

   Activez dans le Customizer, sous WP-ImmoMakler → Cartes, l’option Mettre en évidence les zones de codes postaux. La surface est colorée dans la couleur de vos marqueurs, et la carte dézoome suffisamment pour montrer toute la zone.

4. S’assurer que le géocodage passe par Google

   WP-ImmoMakler détermine la zone à laquelle appartient un bien à partir du géocodage Google lors de l’enregistrement du bien ; les biens existants sont complétés progressivement en arrière-plan. Assurez-vous, sous WP-ImmoMakler → Intégrations → Services de géolocalisation, que Google est bien réglé comme service de géocodage et que la clé API côté serveur est renseignée. Les autres services de géocodage ne fournissent pas l’identifiant de zone Google nécessaire à cet effet.

Effet sur l'image d'aperçu et les cartes PDF

Dès qu’un ID de carte est enregistré, WP-ImmoMakler le transmet également aux cartes statiques — l’image d’aperçu de la boîte de consentement et les cartes des exposés PDF. Leur apparence provient alors de votre style de carte : le réglage Type de carte et la coloration en niveaux de gris ne s’y appliquent plus. Google associe en outre chaque ID de carte à un seul type de carte lors de sa création. Après l’enregistrement, vérifiez donc aussi l’image d’aperçu et un exposé PDF, en plus de la carte elle-même.

Si la mise en évidence n’apparaît pas

Si le rayon semi-transparent continue d’apparaître sur la page détaillée à la place de la surface colorée, examinez ces points dans l’ordre :

• L’ID de carte se trouve-t-il dans le même projet Google Cloud que votre clé API côté navigateur ?
• Le type de rendu de l’ID de carte est-il bien Vectoriel et non Raster ? Si ce n’est pas le cas, créez un ID de carte avec le type de rendu Vectoriel et saisissez celui-ci.
• Le style de carte comportant les calques d’éléments activés est-il bien associé à cet ID de carte ?
• Le bien se trouve-t-il dans un pays pour lequel Google fournit les zones (voir ci-dessus) ?
• Le bien dispose-t-il seulement d’une localisation approximative ? Pour un bien avec une adresse complète, la carte n’affiche volontairement que le marqueur — ni rayon ni surface ne sont alors visibles.
• La modification du style de carte remonte-t-elle à moins de quelques heures ? Les modifications de style de Google mettent du temps à se propager partout.

Si votre carte ne trouve pas le calque activé, WP-ImmoMakler dessine à la place le rayon — la carte reste donc utilisable dans tous les cas.

Cela pourrait aussi vous intéresser

• Créer des clés API Google Maps
• Carte des biens immobiliers
• Services de géolocalisation
• Utiliser WP-ImmoMakler avec Complianz