Kaartblokken: Een locatie tonen zonder het adres te verbergen

Een kaartblok helpt een bezoeker begrijpen waar een echte plek zich bevindt en van lezen over te schakelen naar navigatie. De duurzame inhoud bestaat uit het geverifieerde adres in HTML; de visuele kaart is een optioneel oriëntatiehulpmiddel. De standaardimplementatie reserveert het kaartgebied, toont een lichte statische fallback en laadt een goedgekeurde interactieve provider pas nadat de bezoeker erom vraagt.

National Gallery
Trafalgar Square, London WC2N 5DN, Verenigd Koninkrijk
Kaart niet geladen. Open de locatie in uw kaart-app, of activeer Interactieve kaart laden wanneer u de omliggende straten wilt bekijken.

Deze weergegeven facade is nuttig vóór enig extern verzoek. Het benoemt de plek, toont het adres als selecteerbare tekst, legt de niet-geladen status uit en biedt twee duidelijke routes: open een externe kaart of laad bewust de ingesloten kaart.

Waarom dit element ertoe doet

Locatievragen zijn praktisch. Een bezoeker overweegt misschien of een vestiging dichtbij genoeg is, controleert aan welke kant van een spoorlijn deze ligt, zoekt de juiste ingang of vergelijkt openbaar vervoer met parkeren. Een kaart vermindert het mentale werk van het vertalen van een onbekend adres naar ruimtelijke context. Het kan nabijgelegen herkenningspunten en straatrelaties sneller zichtbaar maken dan een alinea.

Dat gemak maakt de kaart niet tot de bron van waarheid. Bezoekers kunnen een adres kopiëren, naar iemand anders sturen of lezen met ondersteunende technologie. Kaarttegels kunnen die handelingen niet betrouwbaar ondersteunen en zwakke data, privacyinstellingen of providerstoringen kunnen ze blokkeren. Het adres moet bruikbaar blijven zonder de kaart.

Een ingesloten kaart kan een iframe, JavaScript, lettertypen, afbeeldingen en externe verzoeken toevoegen. Die middelen concurreren met het antwoord van de pagina en kunnen een IP-adres vrijgeven of opslag initiëren die aan toestemming is onderworpen. Een bezoeker die de kaart nooit gebruikt, mag die kosten niet betalen.

Machine-uitleesbaarheid betekent dat software de locatie kan identificeren zonder kaartpixels te interpreteren of de provider uit te voeren. Zoekcrawlers, AI-systemen, schermlezers, vertaalhulpmiddelen en lokale datapijplijnen hebben een plaatsnaam, volledig postadres, coördinaten (waar van toepassing) en een stabiele bestemmingslink in HTML of gestructureerde velden nodig. Een iframe-URL is geen betrouwbaar adres. Providerlabels kunnen veranderen en markers kunnen enigszins verkeerd geplaatst zijn. Hetzelfde geverifieerde locatierecord moet het zichtbare adres, de kaartmarker, navigatielink en eventuele in aanmerking komende gestructureerde gegevens voeden.

De schrijfregels voor elementen hebben voorrang: kies een getypeerd element op basis van doel, niet uiterlijk. Als het doel ruimtelijke oriëntatie rond één geverifieerde plek is, gebruik dan een kaartblok. Als het doel is om contactgegevens te publiceren, gebruik dan een openingsuren- en contactblok of NAP-blok en laat de kaart hetzelfde adresrecord gebruiken. Als het doel is om een tijd te reserveren, gebruik dan een boekingsblok .

Wanneer gebruiken

Gebruik een kaartblok wanneer het zien van de plek in zijn omgeving de lezer helpt bij het voltooien van een locatieafhankelijke taak. Typische toepassingen zijn een winkel, kantoor, kliniek, locatie, afhaalpunt, showroom, hotel, attractie, vestiging, evenementeningang of servicegebiedsgrens. Het is vooral nuttig wanneer de ingang afwijkt van het postadres, omliggende wegen verwarrend zijn, toegankelijkheidsroutes uitleg nodig hebben, of openbaar vervoer en parkeren het bezoek beïnvloeden.

Controleer de marker aan de hand van de werkelijke ingang of het servicepunt, in plaats van het eerste geocoderingsresultaat van de provider te accepteren. Vermeld voor een plek in een groter gebouw de verdieping, unit of ingang in tekst.

Net-misser-gevallen leiden vaak tot aantrekkelijke maar onnuttige kaarten:

• Een lijst van bediende steden: dit is een servicegebiedsverklaring, geen bewijs van een fysieke locatie. Plaats geen markers op stadscentra en impliceer kantoren.
• Een postadres zonder bezoekersmogelijkheid: publiceer de postgegevens en vermeld dat bezoeken niet mogelijk zijn. Een kaart zou een niet-ondersteunde aankomstactie impliceren.
• Een extern of online-only bedrijf: een statutaire zetel kan juridisch relevant zijn, maar wordt geen klantbestemming omdat een inbedding het kan lokaliseren.
• Stap-voor-stap routebeschrijving: link naar een navigatieprovider en geef routespecifieke opmerkingen. Een statische ingesloten kaart kan geen rekening houden met verkeer, wegafsluitingen of het startpunt van de bezoeker.
• Veel locaties: gebruik een locatiezoeker met een tekstuele resultatenlijst. Een wolk van markers kan geen individuele vestigingspagina’s vervangen.
• Bewijs van lokale aanwezigheid: een kaart is geen bewijs dat een team daar opereert. Ondersteun de bewering met consistente identiteit, adres, contact, openingstijden en vestigingsspecifieke inhoud.
• Decoratieve geografische context: als de locatie de taak niet beïnvloedt, laat de kaart dan weg. Een stadsgezicht of regionale omtrek hoort bij een ander visueel doel.

Waar plaatsen

Plaats de kaart direct na de plaatsnaam, het volledige adres en eventuele bezoekkritische kwalificatie. Op een locatiepagina is de gebruikelijke volgorde: introductie, adres- en contactgegevens, kaart, aankomstnotities, openingstijden, dan de bezoek- of boekingsactie. Als routebeschrijving het primaire antwoord is, vat deze dan samen vóór de kaart.

Houd het adres, de kaartfacade, de laadknop, de fallback-link, het bijschrift en de routebeschrijving in één gelabeld gebied. De bezoeker mag geen getuigenis of marketingsectie moeten doorkruisen om het adres te vinden dat bij de marker hoort. Een ‘Routebeschrijving’-link moet dezelfde coördinaten of plaats-ID gebruiken als de weergegeven marker.

Het blok mag in de buurt van openingstijden voor dezelfde vestiging staan, maar niet naast een tegenstrijdig adres, een andere kaart, een automatisch afspelende video of advertentie die als een bedieningselement is vormgegeven. Plaats het niet in een carrousel, accordeon, verplichte modal, verborgen tabblad of smalle tabelcel.

Zet de kaart niet tussen een waarschuwing en de instructie die het kwalificeert, of tussen een boekingsactie en de vereiste voorwaarden. Bedek nooit essentiële adrestekst, toestemmingstekst of de enige routebeschrijvingslink met kaarttegels. Behoud op mobiel deze leesvolgorde: plaatsnaam, adres, bezoekkwalificatie, fallback, laadknop, kaartgebied, dan routebeschrijving.

Anatomie

1. Plaatsnaam: identificeert de vestiging, locatie of bestemming die door de marker wordt vertegenwoordigd.
2. Volledig tekstadres: bevat elke adresregel, plaats, postcode en land die nodig zijn om de plek te onderscheiden.
3. Bezoekkwalificatie: vermeldt ingang, unit, verdieping, afspraakvereiste, bezoekersbeperking of toegankelijkheidsfeit wanneer dit de aankomst verandert.
4. Gereserveerd viewport: bepaalt breedte en beeldverhouding voordat interactieve bronnen worden geladen, waardoor lay-outverschuiving wordt voorkomen.
5. Statische fallback: biedt nuttige ruimtelijke context zonder scripts; het moet een echt gegenereerd asset zijn voordat het wordt gerefereerd.
6. Marker: vertegenwoordigt het geverifieerde aankomstpunt, niet slechts een postcode of administratief centrum.
7. Laadknop: is een echte knop met een specifieke toegankelijke naam, zoals ‘Interactieve kaart laden voor National Gallery.’
8. Providervermelding: noemt de externe partij en legt uit dat activering ermee verbinding kan maken.
9. Routebeschrijvingslink: opent een stabiele HTTPS-bestemming voor navigatie zonder dat de ingesloten speler nodig is.
10. Bijschrift of herkenningspuntnotitie: legt de nuttige conclusie van de kaart uit, zoals de ingang die naar een genoemde straat gericht is.
11. Locatierecord: levert beheerde coördinaten, plaats-ID en verificatiedatum aan de renderer.
12. Foutstatus: behoudt het adres, de routebeschrijvingslink en de poging opnieuw-optie als de provider niet kan laden.

Ontwerpvoorbeelden

Elke variant behoudt het adres in HTML, reserveert de kaartafmetingen en biedt een directe routebeschrijvingslink. Alleen het laadgedrag verandert.

Statische kaart met externe routebeschrijving — laagste kosten

Gebruik een geoptimaliseerde kaartafbeelding wanneer oriëntatie helpt, maar pannen en zoomen niet nodig zijn. Alternatieve tekst vermeldt de ruimtelijke conclusie; het bijschrift bevat herkenningspunten. Publiceer het pad pas nadat het asset bestaat.

Klik-om-te-laden interactieve kaart — standaard

Toon eerst een statische fallback of neutraal gereserveerd paneel. Een knop laadt het goedgekeurde iframe na expliciete activering. Dit beschermt de pagina-snelheid en maakt de externe verbinding intentioneel, terwijl pannen, zoomen en straatinspectie op aanvraag beschikbaar blijven.

Toestemmingsafhankelijke kaart

Gebruik dit wanneer het privacybeleid van de site toestemming vereist voordat contact met de provider wordt opgenomen. Leg de consequentie in duidelijke taal uit en bied de routebeschrijvingslink aan zonder dat toestemming nodig is. Weigeren mag het adres niet verbergen of voorkomen dat de rest van de pagina werkt.

Altijd-geladen interactieve kaart — gemeten uitzondering

Gebruik alleen wanneer interactie centraal staat, contact met de provider is toegestaan en veldmeting de kosten accepteert. Lazy loading kan nog steeds initialiseren terwijl de bezoeker nadert. Houd een server-gerenderde fallback omdat loading="lazy" providerstoring niet kan voorkomen.

Enkel-locatieblok in een locatiezoeker

Voor een pagina met meerdere locaties koppelt u de geselecteerde kaart aan een tekstuele resultatenlijst. Het laden van één geselecteerde vestiging houdt de interactie begrijpelijk; het wijzigen van de selectie werkt de plaatsnaam, het adres, de marker en de routebeschrijvingslink gezamenlijk bij. De lijst blijft bruikbaar zonder de kaart.

Parameters

‘Bron’ betekent waar de renderer de auteurswaarde verkrijgt. Het gezaghebbende locatiesysteem blijft verantwoordelijk voor het verifiëren van het werkelijke adres en de coördinaten.

De renderer moet provider-URL’s bouwen uit goedgekeurde identificatoren en numerieke coördinaten. Auteurs mogen geen willekeurige iframe-HTML, API-sleutels, toegangstokens of JavaScript in de body plakken. Zes decimalen lokaliseren een punt tot veel fijnere precisie dan een bezoeker normaal nodig heeft; behoud minder cijfers wanneer het publiceren van een exacte privé-ingang een veiligheids- of privacyrisico zou vormen.

Syntax en codevoorbeelden

Deze draagbare voorbeelden beschrijven één canoniek inhoudsmodel. Een project moet de bijbehorende renderer implementeren en testen voordat auteurs de syntax in productie gebruiken.

Draagbare Markdown-richtlijn

:::map{variant=facade place-id="north-street-clinic" latitude=51.454514 longitude=-2.587910 zoom=16 aspect-ratio="4/3" provider=osm directions-url="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified=2026-08-27}
## North Street Clinic

18 North Street, Bristol BS1 3PR, Verenigd Koninkrijk

Gebruik de binnenplaatsingang naast de apotheek. Er is een drempelvrije toegang beschikbaar vanaf North Street.
:::

De eerste kop levert title; de volgende regel levert het gestructureerde adres; en de overige body levert het bijschrift of de aankomstnotitie.

Hugo shortcode-mapping

Gebruik alleen benoemde parameters. Deze notatie documenteert de beoogde adapter; het beweert niet dat er al een kaart-shortcode in deze repository bestaat.

{{< map variant="facade" placeId="north-street-clinic" latitude="51.454514" longitude="-2.587910" zoom="16" aspectRatio="4/3" provider="osm" directionsUrl="https://www.openstreetmap.org/directions?to=51.454514,-2.587910" verified="2026-08-27" >}}
## North Street Clinic

18 North Street, Bristol BS1 3PR, Verenigd Koninkrijk

Gebruik de binnenplaatsingang naast de apotheek. Er is een drempelvrije toegang beschikbaar vanaf North Street.
{{< /map >}}

De adapter moet de verhouding reserveren, het adres en de fallback op de server renderen en het iframe pas na de opgegeven trigger maken. Het mag nooit een provider-API-sleutel blootstellen in geschreven inhoud.

WordPress-blok

<!-- wp:amicited/map {"variant":"facade","placeId":"north-street-clinic","latitude":51.454514,"longitude":-2.587910,"zoom":16,"aspectRatio":"4/3","provider":"osm","directionsUrl":"https://www.openstreetmap.org/directions?to=51.454514,-2.587910","verified":"2026-08-27"} -->
<h2>North Street Clinic</h2>
<address>18 North Street, Bristol BS1 3PR, Verenigd Koninkrijk</address>
<p>Gebruik de binnenplaatsingang naast de apotheek. Er is een drempelvrije toegang beschikbaar vanaf North Street.</p>
<!-- /wp:amicited/map -->

Een native blok moet coördinaten als getallen opslaan, adresvelden gestructureerd houden, de provider valideren en een veilige server-side facade renderen. Editor-voorbeeld mag een statische weergave tonen in plaats van de volledige provider te initialiseren.

Goede en slechte voorbeelden

Goed

North Street Clinic
18 North Street, Bristol BS1 3PR, Verenigd Koninkrijk
Gebruik de binnenplaatsingang naast de apotheek. Er is een drempelvrije toegang beschikbaar vanaf North Street.
Interactieve kaart laden · Route openen in een kaart-app

Dit werkt omdat de bezoeker de locatie kan identificeren, kopiëren en ernaartoe navigeren zonder de inbedding. De ingangsnotitie lost een echte aankomstonduidelijkheid op. Het laden van de externe partij is een keuze en beide acties vermelden duidelijk wat er gebeurt.

Slecht

Vind ons hier!
[full-width interactive map with an unlabeled pin]

Dit faalt omdat ‘hier’ geen locatie identificeert, het adres alleen in providerpixels bestaat en de marker een postcode kan vertegenwoordigen in plaats van een ingang. De gretige kaart voegt kosten toe, zelfs voor bezoekers die hem niet gebruiken. Er is geen fallback, verificatiedatum, aankomstnotitie of toegankelijke navigatielink. Het toevoegen van een adres aan de title van het iframe zou het framelabel verbeteren, maar zou geen selecteerbare paginatekst creëren.

Schema-markup en toegankelijkheid

Een kaartblok heeft geen toegewezen Schema.org-type. Geverifieerde velden kunnen de juiste Organization, LocalBusiness-subtype, Place, PostalAddress of GeoCoordinates voeden wanneer de pagina die entiteit vertegenwoordigt. Gebruik één gedeeld locatierecord; het zichtbare adres, de marker, de canonieke vestigings-URL en JSON-LD moeten overeenkomen.

Voeg hasMap niet uitsluitend toe om de pagina vollediger te laten lijken. Bij gebruik moet het verwijzen naar een stabiele kaart-URL voor dezelfde locatie, niet naar een verlopen sessie-URL of een iframe-eindpunt met een zichtbare sleutel. Een servicegebiedsbedrijf zonder openbare klantlocatie moet zijn servicegebied eerlijk beschrijven en mag geen verzonnen bedrijfspanden of overdreven precieze privécoördinaten publiceren.

Toegankelijkheid begint met onafhankelijkheid van de kaart. Plaats de plaatsnaam en het volledige adres in HTML, gebruik <address> alleen voor relevante contactinformatie. Bied een normale routebeschrijvingslink. Beschrijf ingangen, herkenningspunten, openbaar vervoer, parkeren en drempelvrije toegang in tekst. Alternatieve tekst van statische kaarten moet de nuttige conclusie communiceren, niet elke straat opsommen.

De laadknop moet een toetsenbordbedienbare <button> zijn met zichtbare focus en een toegankelijke naam die aan de locatie is gekoppeld. Laden mag de focus niet onverwachts verplaatsen. Kondig na activering een korte status aan zoals ‘Interactieve kaart geladen’, behoud dan de focus op de initiërende knop of verplaats deze alleen wanneer de interface een gedocumenteerd toetsenbordinvoerpunt heeft. Geef elk iframe een unieke titel, bijvoorbeeld ‘Interactieve straatkaart voor North Street Clinic.’

Providerknoppen moeten bedienbaar blijven bij smalle breedtes en 200% zoom. Blokkeer de toetsenbordfocus niet binnen het iframe. Vertrouw niet op pinnkleur, sleepgebaren, hover of visuele straatlabels voor essentiële informatie. Als de kaart faalt of toestemming wordt geweigerd, houd het gereserveerde gebied dan stabiel en toon het adres, de aankomstnotitie, de externe routebeschrijvingslink en de optie om het opnieuw te proberen.

Schrijfregels

Begin met de officiële openbare plaatsnaam in twee tot tien woorden. Volg met het volledige postadres zoals opgeslagen in het beheerde locatierecord. Bekort geen unit, gebouw, plaats of postcode die nodig is om de juiste ingang te bereiken. Vermeld het land wanneer de pagina internationaal verkeer kan ontvangen of wanneer de plaatsnaam dubbelzinnig is.

Voeg één aankomstnotitie van 8–35 woorden toe, alleen wanneer deze verandert wat de bezoeker moet doen. Noem een duurzaam herkenningspunt of ingangsrelatie: ‘Gebruik de binnenplaatsingang naast de apotheek’ is nuttig; ‘U kunt ons niet missen’ is dat niet. Tijdsgevoelige wegafsluitingen, bouwroutes en tijdelijke ingangen hebben elders in het inhoudsysteem een eigenaar en controledatum nodig.

Gebruik één kaartblok voor één geselecteerde bestemming. Een locatiezoeker mag die bestemming wisselen, maar elke geselecteerde status moet de titel, het adres, de marker, het bijschrift en de link atomair bijwerken. Toon standaard één primaire marker. Secundaire herkenningspunten mogen alleen verschijnen wanneer ze de aankomst verklaren en visueel te onderscheiden zijn in tekst en knoppen.

Houd knoplabels letterlijk: ‘Interactieve kaart laden’, ‘Route openen’ en ‘Toegankelijke ingang bekijken.’ Vermijd vage labels zoals ‘Ontdekken’, ‘Meer zien’ of ‘Klik hier.’ Vermeld de provider vóór activering wanneer een verbinding privacygevolgen heeft.

Plaats nooit telefoonnummers, openingstijden, promotionele claims, recensies, prijzen, boekingsformulieren of lang parkeerbeleid in het interactieve canvas. Die feiten horen thuis in HTML en in hun eigen getypeerde elementen. Publiceer nooit een API-sleutel, de live locatie van een gebruiker, een privé-woningingang, verzonnen kantoorpins, ongeverifieerde servicegebieden of coördinaten gekopieerd van een ongecontroleerde geocoder. De kaart mag geen bezoekersmogelijkheid impliceren waar die niet bestaat.

Verifieer het adres en de marker bij publicatie, na een locatiewijziging en tijdens geplande controle. Providerwegen en -labels kunnen onafhankelijk veranderen; de organisatie blijft verantwoordelijk voor de juistheid van haar locatierecord en aankomstinstructies.

Posttypes die het gebruiken

Het postTypes-frontmatterveld is de bron voor deze implementatiematrix.

QA-checklist

• De plaatsnaam en het volledige adres verschijnen als selecteerbare server-gerenderde tekst buiten de kaart.
• De marker wijst naar het geverifieerde openbare aankomstpunt in plaats van een postcode of gebouwcentrum.
• Het adres, de coördinaten, de plaats-ID, de routebeschrijvingslink en gestructureerde gegevens komen uit hetzelfde beheerde record.
• Het blok legt eventuele unit, verdieping, ingang, afspraakregel of toegankelijkheidsroute uit die nodig zijn om aan te komen.
• De standaardimplementatie vermijdt externe verzoeken tot expliciete activering of geldige toestemming.
• Een altijd-geladen uitzondering heeft een gedocumenteerd doel, privacybasis en gemeten prestatiebudget.
• Breedte en beeldverhouding zijn gereserveerd voordat afbeelding, iframe of providercode wordt geladen.
• Elk statisch afbeeldingspad verwijst naar een echt goedgekeurd asset en heeft nuttige alternatieve tekst.
• De laadknop is een knop met een plaatspecifieke toegankelijke naam en zichtbare focus.
• Het iframe heeft, wanneer aangemaakt, een unieke beschrijvende titel en blokkeert de toetsenbordfocus niet.
• Het adres, de routebeschrijvingslink, de aankomstnotitie en de optie om opnieuw te proberen blijven bruikbaar wanneer scripts, toestemming of de provider falen.
• Essentiële informatie is niet afhankelijk van pinnkleur, hover, slepen, zoomen of kaartlabels.
• De lay-out werkt op smalle breedtes en 200% zoom zonder providerknoppen te bedekken.
• De pagina claimt geen openbaar kantoor, ingang of servicegebied dat de organisatie niet kan verifiëren.
• Geen API-sleutels, toegangstokens, gebruikerslocaties, privécoördinaten of willekeurige iframe-URL’s verschijnen in geschreven inhoud.
• Implementaties met meerdere locaties behouden een toetsenbordtoegankelijke tekstlijst en werken de geselecteerde vestiging atomair bij.
• Schema, indien aanwezig, beschrijft dezelfde echte entiteit en hetzelfde adres dat aan bezoekers wordt getoond.
• De verificatiedatum en controle-eigenaar voldoen aan het lokale gegevensonderhoudsbeleid van de site.

Een kaartblok slaagt wanneer het verliezen van de kaart het gemak verandert, niet de betekenis. De lezer weet nog steeds de locatie, hoe deze te bereiken en wat te verwachten; de provider blijft optioneel.