Comment intégrer un widget de carte sur n'importe quel site

Commencez par le générateur (le seul vrai travail)

Tout commence dans le générateur d'intégration de carte. Le géocodage a lieu une seule fois, là — le code que vous copiez contient des coordonnées fixes. Une panne du géocodeur ou une « normalisation d'adresse » ne pourra donc jamais déplacer votre épingle plus tard. Saisissez l'adresse, regardez l'épingle se poser, puis faites-la glisser sur votre entrée réelle avant de copier : ces dix secondes de glissement font la différence entre « la bonne rue » et « la bonne porte ».

Vous voulez voir une configuration à plusieurs établissements terminée avant de créer la vôtre ? Ouvrez la démo du générateur — elle charge un exemple d'entreprise à trois établissements, avec adresses, épingles numérotées en couleur et panneau des lieux en direct dans l'aperçu, prêt à explorer.

WordPress : shortcode de l'extension ou iframe brute ?

Les deux méthodes donnent exactement le même widget — choisissez selon vos goûts.

Méthode extension (recommandée) : téléchargez whatismylocation-widget.zip → wp-admin ▸ Extensions ▸ Ajouter ▸ Téléverser une extension → Activer. Ajoutez ensuite un bloc Code court :

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Les attributs reprennent les options du générateur : theme, marker, zoom, height, directions, et pour les établissements pins="lat,lng,Label~Address|…" avec panel= et motion= (voir le tableau de référence ci-dessous). La section WordPress du générateur produit le shortcode complet pour vous — rien à taper.

Méthode sans extension : collez l'iframe du générateur dans un bloc HTML personnalisé. Même widget, aucune extension à mettre à jour ; en contrepartie, le balisage est plus long dans votre contenu et vous ne pourrez plus modifier les attributs ensuite.

Squarespace, Shopify, Notion — et les autres

Hors WordPress, le travail se résume généralement à un collage : ajoutez l'élément HTML/intégration de votre plateforme (Wix Embed HTML, bloc Code de Squarespace, Embed de Webflow) et déposez-y l'iframe. Une différence rend le widget de carte plus simple que le widget de localisation : il n'a pas besoin de l'attribut allow="geolocation", car il ne demande jamais rien aux visiteurs — il n'y a donc rien de fragile à préserver quand un constructeur de pages réécrit votre HTML.

Squarespace : ajoutez un bloc Code et collez. Un détail à connaître d'emblée : les blocs Code exigent le plan Business ou supérieur — avec le plan Personal, le bloc affiche votre code en texte brut au lieu de l'exécuter.

Shopify mérite mieux qu'un simple collage : nous fournissons une section de thème prête à l'emploi — un seul fichier dans votre thème vous donne un panneau de réglages natif, où les établissements sont des blocs que l'on réordonne par glisser-déposer, sans application ni clé API.

Notion et Google Sites intègrent par URL, pas par HTML. Ils n'acceptent pas du tout un extrait iframe. Appuyez plutôt sur Copier l'URL du widget dans le générateur et collez-la dans le bloc /embed de Notion ou dans Intégrer ▸ Par URL de Google Sites. Le widget est une page autonome complète : il s'affiche parfaitement dans les deux cas.

Salesforce Experience Cloud (sites communautaires publics) : déposez l'iframe dans un composant HTML Editor. Demandez ensuite à votre administrateur d'ajouter whatismylocation.ai sous Configuration ▸ URL de confiance avec la directive CSP frame-src, sinon Salesforce bloque le cadre en silence. Les équipes qui codent peuvent encapsuler la même URL dans un Lightning Web Component d'une dizaine de lignes :

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Plusieurs établissements : le panneau des lieux

Jusqu'à 10 lieux tiennent dans une seule intégration. Dans le mode Avancé du générateur, placez chaque épingle, donnez-lui un libellé et une adresse, puis appuyez sur Ajouter un lieu. Les visiteurs obtiennent un panneau des lieux — un accordéon à côté de la carte sur ordinateur, une bande de cartes défilables sur téléphone — avec des épingles numérotées : choisir un établissement fait voler la carte jusqu'à lui et affiche son adresse avec son propre lien « Itinéraire ».

• panel= choisit la disposition : auto (par défaut — sur le côté dans les iframes larges, en bande dans les étroites), side, bottom, ou none pour de simples épingles avec bulles.
• motion= définit l'animation de changement : smooth (le vol par défaut), fade, lively ou none. Les visiteurs qui ont activé « réduire les animations » dans leur système obtiennent toujours la version instantanée, quel que soit votre choix.
• open=no démarre avec toutes les entrées repliées ; la carte s'ajuste automatiquement à tous les établissements et votre zoom devient le maximum.

Référence des options

Dépannage WordPress

Le shortcode s'affiche littéralement sur la page. Ce bloc ne traite pas les shortcodes. Dans l'éditeur de blocs, utilisez un bloc Code court (pas un bloc de code ni préformaté) ; dans Elementor, utilisez son widget Shortcode, dans Divi un module Code. Avec l'éditeur classique : saisissez-le dans l'onglet Visuel, en texte simple.

Rien ne s'affiche du tout. Affichez le code source de la page et cherchez whatismylocation. Un commentaire HTML signalant l'absence de lat/lng signifie que les coordonnées manquent ou sont invalides — copiez le shortcode complet depuis le générateur plutôt que de taper les attributs à la main.

L'iframe disparaît à l'enregistrement (méthode sans extension). WordPress supprime les iframes pour les rôles qui n'ont pas la capacité unfiltered_html — sur un multisite, cela inclut les administrateurs par défaut — et certaines extensions de sécurité font de même. Le shortcode de l'extension est la solution propre : il ne dépend pas du droit de votre rôle d'enregistrer des iframes brutes.

La carte est grise / les tuiles ne se chargent pas. Les tuiles viennent de tile.openstreetmap.org ; un bloqueur de publicités très agressif ou un réseau d'entreprise peut les bloquer (l'encart s'affiche quand même). Vérifiez sur un autre réseau, ou sur un téléphone en données mobiles.

Pas de panneau des lieux. Le panneau apparaît à partir de 2 épingles — un lieu unique reçoit l'encart classique. Vérifiez aussi que panel="none" n'est pas défini.

L'animation de changement ne se joue pas. C'est presque toujours le réglage système « réduire les animations » du visiteur (ou le vôtre) — le widget le respecte volontairement et change instantanément. Ce n'est pas un bug, et les autres visiteurs voient bien le préréglage que vous avez choisi.

Les modifications n'apparaissent pas. Une extension de cache (ou le cache de l'hébergeur) sert l'ancienne page. Videz le cache de la page après avoir modifié les attributs du shortcode — le widget lui-même n'a rien à mettre en cache.