Tollset Map

Manuel, documentation :

Manuel – Page “Nos formateur·rices” avec carte (Toolset Views + Maps)

Objectif

Mettre en place une page “Nos formateur·rices” qui affiche automatiquement la liste des fiches (CPT) et une carte avec un marqueur par fiche.

Prérequis

  • CPT et slug confirmés : formateurs-praticien
  • Champ d’adresse Toolset de type Address (pas texte), slug : adresse
  • Au moins une fiche publiée avec une adresse complète (rue, NPA, ville, pays)
  • Plugins actifs : Toolset Types, Views, Maps
  • En cas de conflit, désactiver provisoirement d’autres plugins de cartes (ex. MapPress) pendant l’installation

Choisir le fournisseur de cartes

Option A : OpenStreetMap (sans clé API, recommandé)

  1. WordPress → Toolset → Paramètres → Cartes
  2. Sélectionner OpenStreetMap → Enregistrer
  3. En bas : Données mises en cache → supprimer toutes les lignes → Enregistrer
  4. Ouvrir une fiche, Mettre à jour pour regéocoder

Option B : Google Maps (avec clé API, pour autocomplétion et styles)

B1. Créer un projet et activer la facturation

  1. Aller sur console.cloud.google.com
  2. Créer un projet dédié (p. ex. ComVivance-Maps)
  3. Lier un compte de facturation au projet

B2. Activer les APIs

  1. API et services → Bibliothèque
  2. Activer : Maps JavaScript API, Geocoding API
  3. Optionnel : Places API (autocomplétion d’adresse)

B3. Créer deux clés API distinctes

  • Clé A (“Browser”) – pour l’affichage de la carte
    1. API et services → Identifiants → Créer des identifiants → Clé API
    2. Ouvrir la clé, appliquer :
      • Restrictions d’application : Sites Web (référents HTTP)
        Ajouter :
        https://comvivance.org/*
        https://www.comvivance.org/*
        (+ éventuels domaines de test)
      • Restrictions d’API : Maps JavaScript API uniquement
    3. Enregistrer
  • Clé B (“Server”) – pour le géocodage
    1. API et services → Identifiants → Créer des identifiants → Clé API
    2. Ouvrir la clé, appliquer :
      • Restrictions d’application : Adresses IP
        Ajouter l’IPv4 et l’IPv6 publiques de l’hébergement (Infomaniak)
        Astuces pour trouver l’IP : Manager Infomaniak → Détails hébergement, ou WordPress → Outils → Santé du site → Infos → Serveur, ou dig +short comvivance.org
      • Restrictions d’API : Geocoding API
        (+ Places API si autocomplétion)
    3. Enregistrer

B4. Coller les clés dans Toolset Maps

  1. WordPress → Toolset → Paramètres → Cartes
  2. Choisir Google Maps
  3. Clé front (navigateur) : coller la Clé A (Browser)
  4. Clé serveur / géocodage : coller la Clé B (Server)
  5. En bas : Données mises en cache → supprimer toutes les lignes → Enregistrer
  6. Ouvrir 2–3 fiches avec adresse complète et cliquer Mettre à jour pour forcer le géocodage

Créer la Vue “Nos formateur·rices”

Principe d’affichage

  • Une seule carte en haut (hors boucle)
  • Un marqueur par fiche dans la boucle

Shortcodes (robustes et recommandés)

Avant le contenu de la boucle :

[wpv-map-render map_id="map-formateurs" fitbounds="on"]

Dans la boucle :

<div class="formateur-card">

[wpv-post-featured-image size= »medium »]

<h3>[wpv-post-title]</h3> <p>[types field= »adresse »][/types]</p> <p><a href= »[wpv-post-url] »>Voir la fiche</a></p>

[wpv-map-marker map_id= »map-formateurs »
marker_id= »[wpv-post-id] »
marker_field= »adresse »]
<strong>[wpv-post-title]</strong><br>
[types field= »adresse »][/types]
[/wpv-map-marker]

</div>

Points d’attention

  • map_id doit être identique entre la carte et les marqueurs
  • marker_field doit correspondre exactement au slug du champ adresse (adresse)

Page de test (validation rapide)

Créer une page vierge et coller :

[wpv-map-render map_id="testmap" fitbounds="on"]

[wpv-items-found]
[wpv-loop-source post_type= »formateurs-praticien » posts_per_page= »100″]
[wpv-map-marker map_id= »testmap »
marker_id= »[wpv-post-id] »
marker_field= »adresse »]
<strong>[wpv-post-title]</strong><br>
[types field= »adresse »][/types]
[/wpv-map-marker]
[/wpv-loop-source]
[/wpv-items-found]

[wpv-no-items-found]Aucun·e formateur·rice avec adresse.[/wpv-no-items-found]

CSS minimal (optionnel)

.formateur-card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 1rem;
  background: #fafafa;
  text-align: center;
}
.formateur-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}
.formateur-card h3 {
  margin-top: .5rem;
  font-size: 1.1rem;
}

Dépannage

Aucun marqueur s’affiche

  • Vérifier qu’au moins une fiche publiée contient une adresse complète
  • Toolset → Paramètres → Cartes → Données mises en cache : tout supprimer
  • Réouvrir une fiche et Mettre à jour pour regéocoder

Message “RefererNotAllowedMapError” (Google)

  • Ajouter le domaine manquant dans la Clé A (Browser) → Référents HTTP

Message “REQUEST_DENIED” (Google) côté serveur

  • La clé utilisée pour le géocodage est une clé referrer : remplacer par la Clé B (Server)
  • Ajouter toutes les IP (IPv4 et IPv6) de l’hébergement dans les restrictions d’IP de la Clé B

“ApiNotActivatedMapError”

  • Activer l’API manquante dans API et services → Bibliothèque

Carte centrée en Afrique

  • Aucun marqueur rendu : vérifier le champ adresse et le cache

Bonnes pratiques

  • Saisir des adresses normalisées : rue, numéro, NPA, ville, pays
  • Après correction d’adresse : vider le cache Toolset Maps, puis re-sauvegarder la fiche
  • Préférer les shortcodes pour carte et marqueurs : plus robustes que certains blocs

Annexes

Trouver l’IP du serveur

  • WordPress → Outils → Santé du site → Infos → Serveur
  • Manager Infomaniak → Hébergement → Détails → IPv4 et IPv6
  • Terminal/DNS : dig +short comvivance.org

Activer l’autocomplétion d’adresse (optionnel)

  • Activer Places API dans Google Cloud
  • Restreindre la Clé B (Server) à Geocoding API + Places API
  • Dans Toolset Forms (si utilisé), activer l’autocomplétion sur le champ Address

Basculer de Google Maps vers OpenStreetMap

  1. Toolset → Paramètres → Cartes → sélectionner OpenStreetMap
  2. Enregistrer
  3. Vider le cache d’adresses
  4. Réinsérer la carte si elle a été créée sous Google Maps

Chemin rapide – Création des 2 clés API Google Maps (avec liens)

Pré-requis (une seule fois)

Clé A — « Browser » (pour l’affichage de la carte)

  1. Ouvrir la page des identifiants :
    https://console.cloud.google.com/apis/credentials
  2. Bouton + Créer des identifiants → Clé API.
  3. Cliquer sur le nom de la clé créée pour l’éditer.
  4. Restrictions d’application → Sites Web (référents HTTP) → Ajouter :
    https://comvivance.org/*
    https://www.comvivance.org/*
    (ajoute aussi tes domaines de test/staging si besoin)
  5. Restrictions d’API → Limiter les clés → cocher Maps JavaScript API.
  6. Enregistrer.
  7. Utiliser cette clé dans Toolset → Paramètres → Cartes → Clé Google Maps (front/navigateur).

Clé B — « Server » (pour le géocodage)

  1. Ouvrir la page des identifiants :
    https://console.cloud.google.com/apis/credentials
  2. Bouton + Créer des identifiants → Clé API.
  3. Cliquer sur le nom de la clé pour l’éditer.
  4. Restrictions d’application → Adresses IP → Ajouter :
    • IPv4 publique de ton hébergement (Infomaniak).
    • IPv6 publique si fournie.
      (Où les trouver : Infomaniak Manager → Hébergement → Détails | ou WordPress → Outils → Santé du site → Infos → Serveur | ou dig +short comvivance.org)
  5. Restrictions d’API → Limiter les clés → cocher Geocoding API
    (+ Places API si tu utilises l’autocomplétion d’adresse).
  6. Enregistrer.
  7. Utiliser cette clé dans Toolset → Paramètres → Cartes → Clé serveur / géocodage.

Rappels utiles

  • Après avoir collé les clés dans Toolset :
    Toolset → Paramètres → Cartes → Données mises en cache → tout supprimer, puis Mettre à jour 1–2 fiches avec une adresse complète pour forcer le géocodage.
  • Erreur REQUEST_DENIED avec référent vide → la clé serveur n’autorise pas l’IP (ajoute IPv4/IPv6 exactes).
  • Erreur RefererNotAllowedMapError → ajouter le domaine manquant dans la clé Browser (référents HTTP).
  • Si tu veux éviter les clés : Toolset → Paramètres → Cartes → OpenStreetMap (aucune clé).