Zo sluit je een kaartwidget in op elke website

Begin in de builder (het enige echte werk)

Alles begint bij de kaart-insluitbuilder. Geocoderen gebeurt daar, één keer — het fragment dat je kopieert bevat vaste coördinaten, dus een storing bij de geocoder of “adresnormalisatie” kan je pin later nooit verplaatsen. Typ het adres, kijk waar de pin landt en sleep hem naar je echte ingang voordat je kopieert: die sleepbeweging van tien seconden is het verschil tussen “de juiste straat” en “de juiste deur”.

Wil je een afgeronde opzet met meerdere vestigingen zien voordat je zelf begint? Open de demo van de builder — die laadt een voorbeeldbedrijf met drie vestigingen, met adressen, gekleurde genummerde pins en het locatiepaneel live in de preview, klaar om uit te proberen.

WordPress: shortcode van de plugin of een kale iframe?

Beide routes leiden tot exact dezelfde widget — kies wat je fijner vindt.

Route met plugin (aanbevolen): download whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Nieuwe plugin ▸ Plugin uploaden → Activeren. Voeg daarna een Shortcode-blok toe:

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

De attributen lezen als de opties in de builder: theme, marker, zoom, height, directions, en voor vestigingen pins="lat,lng,Label~Address|…" met panel= en motion= (zie de referentietabel hieronder). De WordPress-sectie van de builder genereert de volledige shortcode voor je — niets typen.

Route zonder plugin: plak de iframe uit de builder in een Aangepaste HTML-blok. Dezelfde widget en geen plugin om bij te werken; het nadeel is langere markup in je content en later geen bewerken via attributen.

Squarespace, Shopify, Notion — en de rest

Buiten WordPress is het meestal één keer plakken: voeg het HTML- of insluitelement van je platform toe (Wix Embed HTML, Squarespace Code-blok, Webflow Embed) en zet de iframe erin. Eén verschil maakt de kaartwidget makkelijker dan de locatiewidget: hij heeft geen allow="geolocation"-attribuut nodig, want hij vraagt bezoekers nergens om — er is dus niets kwetsbaars te bewaren wanneer een pagebuilder je HTML herschrijft.

Squarespace: voeg een Code-blok toe en plak. Eén ding om vooraf te weten: Code-blokken vereisen het Business-plan of hoger — op het Personal-plan toont het blok je code als platte tekst in plaats van hem weer te geven.

Shopify verdient meer dan plakken: wij leveren een kant-en-klare themasectie — één bestand in je thema geeft je een eigen instellingenpaneel met vestigingen als blokken die je kunt verslepen, zonder app en zonder API-key.

Notion en Google Sites sluiten in via een URL, niet via HTML. Ze accepteren een iframe-fragment helemaal niet — druk in plaats daarvan op Widget-URL kopiëren in de builder en plak die in het /embed-blok van Notion of bij Google Sites onder Embed ▸ By URL. De widget is een volledige zelfstandige pagina en wordt dus in beide gevallen perfect weergegeven.

Salesforce Experience Cloud (openbare communitysites): zet de iframe in een HTML Editor-component. Laat je beheerder daarna whatismylocation.ai toevoegen onder Setup ▸ Trusted URLs met de CSP-directive frame-src, anders blokkeert Salesforce het frame stilzwijgend. Teams die zelf code schrijven kunnen dezelfde URL in een Lightning Web Component van ongeveer 10 regels zetten:

<!-- 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';
}

Meerdere vestigingen: het locatiepaneel

Er passen maximaal 10 locaties in één insluiting. Zet in de modus Geavanceerd van de builder elke pin op zijn plek, geef hem een label en een adres en druk op Locatie toevoegen. Bezoekers krijgen een locatiepaneel — een accordeon naast de kaart op desktop, een swipebare kaartenstrip op de telefoon — met genummerde pins: kies je een vestiging, dan vliegt de kaart ernaartoe en verschijnt het adres met een eigen routelink.

• panel= kiest de indeling: auto (standaard — naast de kaart bij brede iframes, een strip bij smalle), side, bottom of none voor gewone pins met pop-ups.
• motion= bepaalt de animatie bij het wisselen: smooth (standaard: vliegen), fade, lively of none. Bezoekers die “beweging beperken” in hun systeem hebben ingesteld, krijgen altijd de directe versie, wat je ook kiest.
• open=no begint met alle items dichtgeklapt; de kaart past zich automatisch aan alle vestigingen aan en je zoom wordt het maximum.

Overzicht van de opties

WordPress: problemen oplossen

De shortcode staat als letterlijke tekst op de pagina. Dat blok verwerkt geen shortcodes. Gebruik in de blokeditor een Shortcode-blok (geen code- of preformatted-blok); gebruik in Elementor de Shortcode-widget en in Divi een Code-module. Werk je met de klassieke editor: typ hem als platte tekst op het tabblad Visueel.

Er verschijnt helemaal niets. Bekijk de bron van de pagina en zoek op whatismylocation. Een HTML-commentaar over een ontbrekende lat/lng betekent dat de coördinaten ontbreken of ongeldig zijn — kopieer de volledige shortcode uit de builder in plaats van de attributen met de hand te typen.

De iframe verdwijnt zodra je opslaat (route zonder plugin). WordPress verwijdert iframes bij gebruikersrollen zonder de rechten van unfiltered_html — op multisite geldt dat standaard ook voor beheerders — en sommige securityplugins doen hetzelfde. De shortcode van de plugin is de schone oplossing: die is niet afhankelijk van de vraag of jouw rol kale iframes mag opslaan.

De kaart is grijs / de tiles laden niet. De tiles komen van tile.openstreetmap.org; een heel agressieve adblocker of een bedrijfsnetwerk kan ze blokkeren (de overlay-card wordt dan nog wel weergegeven). Controleer het op een ander netwerk of op een telefoon met mobiele data.

Geen locatiepaneel. Het paneel verschijnt vanaf 2 pins — bij één locatie krijg je de klassieke overlay-card. Kijk ook of panel="none" niet is ingesteld.

De animatie bij het wisselen speelt niet. Bijna altijd komt dat door de instelling “beweging beperken” in het besturingssysteem van de bezoeker (of van jou). De widget respecteert die bewust en wisselt direct. Het is geen bug, en andere bezoekers zien nog steeds de preset die je koos.

Wijzigingen zijn niet te zien. Een cacheplugin (of de cache van je host) levert de oude pagina. Leeg de paginacache nadat je shortcode-attributen hebt aangepast — de widget zelf heeft niets te cachen.