Kartblock: Visa en plats utan att dölja adressen

Ett kartblock hjälper en besökare att förstå var en verklig plats finns och att gå från läsning till navigering. Dess beständiga innehåll är den verifierade adressen i HTML; den visuella kartan är ett valfritt orienteringshjälpmedel. Standardimplementeringen reserverar kartområdet, visar en lättviktig statisk reserv och laddar en godkänd interaktiv leverantör först efter att besökaren efterfrågar det.

National Gallery
Trafalgar Square, London WC2N 5DN, Storbritannien
Kartan är inte laddad. Öppna platsen i din kartapp, eller aktivera Ladda interaktiv karta när du behöver inspektera omgivande gator.

Denna renderade fasad är användbar innan någon tredjepartsförfrågan. Den namnger platsen, exponerar adressen som markerbar text, förklarar det oladdade tillståndet och ger två tydliga vägar: öppna en extern karta eller ladda den inbäddade medvetet.

Varför detta element är viktigt

Platsfrågor är praktiska. En besökare kan överväga om en bransch är tillräckligt nära, kolla vilken sida av en järnvägslinje den ligger på, hitta rätt entré eller jämföra kollektivtrafik med parkering. En karta minskar det mentala arbetet med att översätta en okänd adress till rumsligt sammanhang. Den kan göra närliggande landmärken och gatuförhållanden synliga snabbare än ett stycke text.

Den bekvämligheten gör inte kartan till sanningens källa. Besökare kan kopiera en adress, skicka den till någon annan eller läsa den med hjälpmedel. Kartbilder kan inte pålitligt stödja dessa handlingar, och svag data, integritetsinställningar eller leverantörsfel kan blockera dem. Adressen måste förbli användbar utan kartan.

En inbäddad karta kan lägga till en iframe, JavaScript, typsnitt, bilder och tredjepartsförfrågningar. Dessa resurser konkurrerar med sidans svar och kan avslöja en IP-adress eller initiera lagring som kräver samtycke. En besökare som aldrig använder kartan bör inte betala den kostnaden.

Maskinell extraherbarhet innebär att programvara kan identifiera platsen utan att tolka kartpixlar eller exekvera leverantören. Sökmotorrobotar, AI-system, skärmläsare, översättningsverktyg och lokala datapipelines behöver ett platsnamn, fullständig postadress, koordinater där så är reglerat, och en stabil destinationslänk i HTML eller strukturerade fält. En iframe-URL är inte en pålitlig adress. Leverantörsetiketter kan ändras och nålar kan vara något felplacerade. Samma verifierade platsregistrering bör mata den synliga adressen, kartmarkören, navigeringslänken och eventuell berättigad strukturerad data.

Skrivreglerna för element har företräde: välj ett typat element efter syfte, inte utseende. Om syftet är rumslig orientering kring en verifierad plats, använd ett kartblock. Om syftet är att publicera kontaktuppgifter, använd ett block för öppettider och kontakt eller NAP-block och låt kartan använda samma adresspost. Om syftet är att boka en tid, använd ett bokningsblock .

När du ska använda det

Använd ett kartblock när det hjälper läsaren att se platsen i dess omgivning för att slutföra en platsberoende uppgift. Typiska användningsområden inkluderar en butik, kontor, klinik, lokal, upphämtningsplats, utställningslokal, hotell, sevärdhet, bransch, evenemangsingång eller serviceområdesgräns. Det är särskilt användbart när entrén skiljer sig från postadressen, närliggande vägar är förvirrande, tillgänglighetsvägar behöver förklaring, eller kollektivtrafik och parkering påverkar besöket.

Bekräfta markören mot den faktiska entrén eller servicepunkten istället för att acceptera leverantörens första geokodningsresultat. För en plats inuti en större byggnad, ange våning, enhet eller entré i text.

Närbesläktade fall skapar ofta attraktiva men oanvändbara kartor:

• En lista över städer som betjänas: detta är ett serviceområdesuttalande, inte bevis på en fysisk plats. Placera inte nålar vid stadskärnor och antyd kontor.
• En postadress utan besökstillträde: publicera postdetaljerna och ange att besök inte är möjliga. En karta skulle antyda en icke-existerande ankomståtgärd.
• Ett distans- eller onlineföretag: ett registrerat kontor kan vara juridiskt relevant, men det blir inte en kunddestination bara för att en inbäddning kan lokalisera det.
• Sväng-för-sväng-vägbeskrivningar: länka till en navigeringsleverantör och tillhandahåll rutspecifika anteckningar. En statisk inbäddad karta kan inte ta hänsyn till trafik, avstängningar eller besökarens startpunkt.
• Många platser: använd en platssökare med en textbaserad resultatlista. Ett moln av nålar kan inte ersätta individuella branschsidor.
• Bevis på lokal närvaro: en karta är inte bevis på att ett team verkar där. Stöd påståendet med konsekvent identitet, adress, kontakt, öppettider och branschspecifikt innehåll.
• Dekorativ geografisk kontext: om platsen inte påverkar uppgiften, utelämna kartan. En stadssilhuett eller regional kontur hör till ett annat visuellt syfte.

Var du ska placera den

Placera kartan omedelbart efter platsnamnet, den fullständiga adressen och eventuell besökskritisk kvalificering. På en platssida är den vanliga sekvensen introduktion, adress och kontaktfakta, karta, ankomstinformation, öppettider, sedan besöks- eller bokningsåtgärden. Om vägbeskrivningar är det primära svaret, sammanfatta dem före kartan.

Håll adressen, kartfasaden, laddningskontrollen, reservlänken, bildtexten och vägbeskrivningsanteckningen i ett märkt område. Besökaren bör inte behöva korsa ett vittnesmål eller marknadsföringsavsnitt för att hitta adressen som hör till markören. En “Get directions”-länk måste använda samma koordinater eller platsidentifierare som den visade markören.

Blocket kan ligga nära öppettider för samma bransch, men inte bredvid en motstridig adress, en annan karta, autospelande video eller annons stilad som en kontroll. Placera den inte inuti en karusell, ett accordeon, en obligatorisk modal, en dold flik eller en smal tabellcell.

Placera inte kartan mellan en varning och instruktionen den kvalificerar, eller mellan en bokningsåtgärd och dess förutsättningar. Överlagra aldrig essentiell adresstext, samtyckestext eller den enda vägbeskrivningslänken på kartbilder. På mobil, bevara denna läsordning: platsnamn, adress, besökskvalificering, reserv, laddningskontroll, kartområde, sedan vägbeskrivningar.

Anatomi

1. Platsnamn: identifierar branschen, lokalen eller destinationen som markören representerar.
2. Fullständig textadress: inkluderar varje adressrad, ort, postnummer och land som behövs för att särskilja platsen.
3. Besökskvalificering: anger entré, enhet, våning, krav på tidsbokning, besöksbegränsning eller tillgänglighetsfakta när det påverkar ankomsten.
4. Reserverat vyport: fixerar bredd och bildförhållande innan interaktiva resurser laddas, vilket förhindrar layoutförskjutning.
5. Statisk reserv: ger användbart rumsligt sammanhang utan skript; det måste vara en verklig genererad tillgång innan den refereras.
6. Markör: representerar den verifierade ankomstpunkten, inte enbart en postkod eller administrativ mittpunkt.
7. Laddningskontroll: är en riktig knapp med ett specifikt tillgängligt namn, till exempel “Ladda interaktiv karta för National Gallery.”
8. Leverantörsmeddelande: namnger tredje parten och förklarar att aktivering kan ansluta till den.
9. Vägbeskrivningslänk: öppnar en stabil HTTPS-destination för navigering utan att kräva den inbäddade spelaren.
10. Bildtext eller landmärkesanteckning: förklarar kartans användbara slutsats, såsom entrén mot en namngiven gata.
11. Platsregistrering: tillhandahåller reglerade koordinater, platsidentifierare och verifieringsdatum till renderaren.
12. Felltillstånd: bevarar adressen, vägbeskrivningslänken och återförsöksmöjligheten om leverantören inte kan ladda.

Designexempel

Varje variant behåller adressen i HTML, reserverar kartans dimensioner och tillhandahåller en direkt vägbeskrivningslänk. Endast laddningsbeteendet ändras.

Statisk karta med externa vägbeskrivningar — lägst kostnad

Använd en optimerad kartbild när orientering hjälper men panorering och zoomning inte gör det. Alternativ text anger dess rumsliga slutsats; bildtexten bär landmärken. Publicera sökvägen först efter att tillgången finns.

Klicka-för-att-ladda interaktiv karta — standard

Visa först en statisk reserv eller neutral reserverad panel. En knapp laddar den godkända iframen efter explicit aktivering. Detta skyddar sidhastigheten och gör tredjepartsanslutningen avsiktlig samtidigt som panorering, zoom och gatugranskning finns tillgängliga på begäran.

Samtyckesstyrd karta

Använd detta när webbplatsens integritetspolicy kräver samtycke innan kontakt med leverantören. Förklara konsekvensen i klartext och erbjud vägbeskrivningslänken utan att kräva samtycke. Avböjande får inte dölja adressen eller förhindra resten av sidan från att fungera.

Alltid laddad interaktiv karta — uppmätt undantag

Använd endast när interaktion är central, kontakt med leverantör är tillåten och fältmätning accepterar kostnaden. Lat laddning kan fortfarande initieras när besökaren närmar sig. Behåll en serverrenderad reserv eftersom loading="lazy" inte kan förhindra leverantörsfel.

Enblockskarta inuti en lokaliserare

För en sida med flera platser, para ihop den valda kartan med en textbaserad resultatlista. Att ladda en vald bransch håller interaktionen begriplig; att ändra val uppdaterar platsnamn, adress, markör och vägbeskrivningslänk tillsammans. Listan förblir användbar utan kartan.

Parametrar

“Källa” betyder var renderaren hämtar det författade värdet. Det auktoritativa platsystemet förblir ansvarigt för att verifiera den faktiska adressen och koordinaterna.

Renderaren måste bygga leverantörs-URL:er från godkända identifierare och numeriska koordinater. Författare får inte klistra in godtycklig iframe-HTML, API-nycklar, åtkomsttoken eller JavaScript i brödtexten. Sex decimaler lokaliserar en punkt till mycket finare precision än en besökare normalt behöver; behåll färre siffror när publicering av en exakt privat entré skulle skapa en säkerhets- eller integritetsrisk.

Syntax och kodexempel

Dessa portabla exempel beskriver en kanonisk innehållsmodell. Ett projekt måste implementera och testa motsvarande renderare innan författare använder syntaxen i produktion.

Portabel Markdown-direktiv

:::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, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
:::

Den första rubriken tillhandahåller title; nästa rad tillhandahåller den strukturerade adressen; och resten av brödtexten tillhandahåller bildtexten eller ankomstanteckningen.

Hugo shortcode-mappning

Använd endast namngivna parametrar. Denna notation dokumenterar den avsedda adaptern; den påstår inte att en kart-shortcode redan finns i detta arkiv.

{{< 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, United Kingdom

Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
{{< /map >}}

Adaptern måste reservera förhållandet, rendera adressen och reserven på servern och skapa iframen först efter den deklarerade utlösaren. Den får aldrig exponera en leverantörs API-nyckel i författat innehåll.

WordPress-block

<!-- 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, United Kingdom</address>
<p>Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.</p>
<!-- /wp:amicited/map -->

Ett inbyggt block bör lagra koordinater som tal, hålla adressfält strukturerade, validera leverantören och rendera en säker serverside-fasad. Redigeringsförhandsvisning kan visa en statisk representation istället för att initiera den fullständiga leverantören.

Bra och dåliga exempel

Bra

North Street Clinic
18 North Street, Bristol BS1 3PR, United Kingdom
Use the courtyard entrance beside the pharmacy. Step-free access is available from North Street.
Load interactive map · Open directions in a map app

Detta fungerar eftersom besökaren kan identifiera, kopiera och navigera till platsen utan inbäddningen. Entréanteckningen löser en verklig ankomsttvetydighet. Att ladda tredje part är ett val, och båda åtgärderna anger tydligt vad som händer.

Dåligt

Hitta oss här!
[interaktiv karta i full bredd med omärkt nål]

Detta misslyckas eftersom “här” inte identifierar en plats, adressen finns endast inuti leverantörens pixlar och nålen kan representera en postkod snarare än en entré. Den ivriga kartan tillför kostnad även för besökare som inte använder den. Det finns ingen reserv, verifieringsdatum, ankomstanteckning eller tillgänglig navigeringslänk. Att lägga till en adress i iframens title skulle förbättra rametiketten men skulle inte skapa markerbar sidtext.

Schema-markup och tillgänglighet

Ett kartblock har ingen dedikerad Schema.org-typ. Verifierade fält kan mata lämplig Organization, LocalBusiness-subtyp, Place, PostalAddress eller GeoCoordinates när sidan representerar den enheten. Använd en delad platsregistrering; den synliga adressen, markören, kanoniska bransch-URL:en och JSON-LD måste överensstämma.

Lägg inte till hasMap enbart för att få sidan att se mer komplett ut. När den används, bör den peka på en stabil kart-URL för samma plats, inte en utgående sessions-URL eller en iframe-slutpunkt med exponerad nyckel. Ett serviceområdesföretag utan en offentlig kundplats bör beskriva sitt serviceområde ärligt och får inte publicera påhittade lokaler eller alltför precisa privata koordinater.

Tillgänglighet börjar med oberoende av kartan. Placera platsnamnet och den fullständiga adressen i HTML, använd <address> endast för relevant kontaktinformation. Tillhandahåll en vanlig vägbeskrivningslänk. Beskriv entréer, landmärken, kollektivtrafik, parkering och stegfri åtkomst i text. Alternativ text för statisk karta bör förmedla den användbara slutsatsen, inte lista varje gata.

Laddningskontrollen måste vara en tangentbordsoperabel <button> med synligt fokus och ett tillgängligt namn kopplat till platsen. Laddning får inte flytta fokus oväntat. Efter aktivering, meddela en kort status som “Interaktiv karta laddad,” behåll sedan fokus på den initierande kontrollen eller flytta den endast när gränssnittet har en dokumenterad tangentbordsingångspunkt. Ge varje iframe en unik titel, till exempel “Interaktiv gatukarta för North Street Clinic.”

Leverantörskontroller måste förbli användbara vid smala bredder och 200 % zoom. Fånga inte tangentbordsfokus inuti iframen. Förlita dig inte på nålens färg, draggester, hovring eller visuella gatunamn för väsentlig information. Om kartan misslyckas eller samtycke nekas, håll det reserverade området stabilt och exponera adressen, ankomstanteckningen, externa vägbeskrivningslänken och återförsöksåtgärden.

Skrivregler

Inled med det officiella offentliga platsnamnet på två till tio ord. Följ med den fullständiga postadressen enligt den reglerade platsregistreringen. Förkorta inte bort en enhet, byggnad, ort eller postkod som behövs för att nå rätt entré. Inkludera landet när sidan kan ta emot internationell trafik eller när stadsnamnet är tvetydigt.

Lägg till en ankomstanteckning på 8–35 ord endast när den ändrar vad besökaren bör göra. Namnge ett varaktigt landmärke eller entréförhållande: “Använd gårdsentrén bredvid apoteket” är användbart; “Du kan inte missa oss” är det inte. Tidskänsliga vägavstängningar, byggvägar och tillfälliga entréer behöver en ägare och granskningsdatum någon annanstans i innehållssystemet.

Använd ett kartblock för en vald destination. En lokaliserare kan växla den destinationen, men varje valt tillstånd måste uppdatera titel, adress, markör, bildtext och länk atomärt. Visa en primär markör som standard. Sekundära landmärken får visas endast när de förklarar ankomst och är visuellt särskiljbara i text och kontroller.

Håll kontrolletiketter bokstavliga: “Ladda interaktiv karta,” “Öppna vägbeskrivningar” och “Visa tillgänglig entré.” Undvik vaga etiketter som “Utforska,” “Se mer” eller “Klicka här.” Meddela leverantören före aktivering när en anslutning har integritetskonsekvenser.

Placera aldrig telefonnummer, öppettider, reklampåståenden, recensioner, priser, bokningsformulär eller långa parkeringsregler inuti den interaktiva canvasyta. Dessa fakta hör hemma i HTML och i sina egna typade element. Publicera aldrig en API-nyckel, en användares levande position, en privat bostadsentré, fabricerade kontorsnålar, overifierade serviceområden eller koordinater kopierade från en okontrollerad geokodare. Kartan får inte antyda besökstillträde där inget sådant finns.

Verifiera adressen och markören vid publicering, efter en platsändring och vid schemalagd granskning. Leverantörers vägar och etiketter kan ändras oberoende; organisationen äger fortfarande noggrannheten i sin platsregistrering och ankomstinstruktioner.

Posttyper som använder det

Fältet postTypes i front matter är källan för denna implementeringsmatris.

QA-checklista

• Platsnamnet och den fullständiga adressen visas som markerbar serverrenderad text utanför kartan.
• Markören pekar på den verifierade offentliga ankomstpunkten snarare än en postkod eller byggnadscentroid.
• Adressen, koordinaterna, platsidentifieraren, vägbeskrivningslänken och strukturerad data kommer från samma reglerade post.
• Blocket förklarar eventuell enhet, våning, entré, bokningsregel eller tillgänglighetsväg som behövs för att anlända.
• Standardimplementeringen undviker tredjepartsförfrågningar tills explicit aktivering eller giltigt samtycke.
• Ett undantag med alltid laddad karta har ett dokumenterat syfte, integritetsgrund och uppmätt prestandabudget.
• Bredd och bildförhållande är reserverade innan bild-, iframe- eller leverantörskod laddas.
• Eventuell statisk bildsökväg pekar på en verklig godkänd tillgång och har användbar alternativ text.
• Laddningskontrollen är en knapp med ett platsspecifikt tillgängligt namn och synligt fokus.
• Iframen, när den skapas, har en unik beskrivande titel och fångar inte tangentbordsfokus.
• Adressen, vägbeskrivningslänken, ankomstanteckningen och återförsöksvägen förblir användbara när skript, samtycke eller leverantören misslyckas.
• Väsentlig information är inte beroende av nålens färg, hovring, dragning, zoom eller kartetiketter.
• Layouten fungerar vid smala bredder och 200 % zoom utan att täcka leverantörskontroller.
• Sidan påstår inte ett offentligt kontor, entré eller serviceområde som organisationen inte kan verifiera.
• Inga API-nycklar, åtkomsttoken, användarplatser, privata koordinater eller godtyckliga iframe-URL:er förekommer i författat innehåll.
• Implementeringar med flera platser behåller en tangentbordstillgänglig textlista och synkroniserar den valda branschen atomärt.
• Schema, om det finns, beskriver samma verkliga enhet och adress som visas för besökare.
• Verifieringsdatumet och granskningsägaren uppfyller webbplatsens policy för underhåll av lokal data.

Ett kartblock lyckas när förlusten av kartan ändrar bekvämlighet, inte innebörd. Läsaren vet fortfarande platsen, hur man når den och vad man kan förvänta sig; leverantören förblir valfri.