Så bäddar du in en kartwidget på vilken webbplats som helst

Börja i byggaren (det enda riktiga arbetet)

Allt börjar i kartbyggaren. Geokodningen sker en gång, där — kodsnutten du kopierar bär fasta koordinater, så ett avbrott hos geokodaren eller en ”adressnormalisering” kan aldrig flytta din nål i efterhand. Skriv adressen, se nålen landa och dra den sedan till din faktiska entré innan du kopierar: den där dragningen på tio sekunder är skillnaden mellan ”rätt gata” och ”rätt dörr”.

Vill du se en färdig uppsättning med flera filialer innan du bygger din egen? Öppna byggarens demo — den laddar ett exempelföretag med tre filialer, med adresser, färgade numrerade nålar och platspanelen live i förhandsvisningen, klar att peta på.

WordPress: kortkod via tillägget eller ren iframe?

Båda vägarna slutar i exakt samma widget — välj efter tycke.

Via tillägget (rekommenderas): ladda ner whatismylocation-widget.zip → wp-admin ▸ Tillägg ▸ Lägg till nytt ▸ Ladda upp tillägg → Aktivera. Lägg sedan till ett Kortkod-block:

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

Attributen ser ut som byggarens alternativ: theme, marker, zoom, height, directions, och för filialer pins="lat,lng,Label~Address|…" med panel= och motion= (se referenstabellen nedan). Byggarens WordPress-avsnitt skapar hela kortkoden för dig — inget att skriva själv.

Utan tillägg: klistra in iframen från byggaren i ett Egen HTML-block. Samma widget, inget tillägg att uppdatera. Nackdelen är längre kod i innehållet och ingen redigering via attribut senare.

Squarespace, Shopify, Notion — och resten

Utanför WordPress är jobbet oftast en enda inklistring: lägg till plattformens HTML- eller inbäddningselement (Wix Embed HTML, Squarespace-blocket Code, Webflow Embed) och släpp in iframen. En skillnad gör kartwidgeten enklare än platswidgeten: den behöver inget allow="geolocation"-attribut, eftersom den aldrig frågar besökaren om något — så det finns inget ömtåligt att bevara när en sidbyggare skriver om din HTML.

Squarespace: lägg till ett Code-block och klistra in. En sak är värd att veta direkt: Code-block kräver Business-planen eller högre — på Personal-planen visas din kod som vanlig text i stället för att renderas.

Shopify förtjänar bättre än en inklistring: vi levererar en färdig temasektion — en fil i ditt tema ger dig en inbyggd inställningspanel där filialerna är block du drar för att ordna om, utan app och utan API-nyckel.

Notion och Google Sites bäddar in via URL, inte HTML. De accepterar inte en iframe-kodsnutt alls — tryck i stället på Kopiera widgetens URL i byggaren och klistra in den i Notions /embed-block eller i Google Sites Embed ▸ By URL. Widgeten är en helt fristående sida, så den renderas perfekt i båda fallen.

Salesforce Experience Cloud (offentliga community-sidor): släpp iframen i en HTML Editor-komponent — låt sedan din administratör lägga till whatismylocation.ai under Setup ▸ Trusted URLs med CSP-direktivet frame-src, annars blockerar Salesforce ramen tyst. Team som bygger med kod kan slå in samma URL i en Lightning Web Component på ungefär 10 rader:

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

Flera filialer: platspanelen

Upp till 10 platser ryms i en inbäddning. I byggarens läge Avancerat placerar du varje nål, ger den en etikett och en adress och trycker på Lägg till plats. Besökarna får en platspanel — ett dragspel vid sidan av kartan på dator, ett svepbart kortband på mobil — med numrerade nålar: väljer man en filial flyger kartan dit och visar dess adress med en egen länk för vägbeskrivning.

• panel= väljer layouten: auto (standard — vid sidan i breda iframes, kortband i smala), side, bottom eller none för enkla nålar + popup-fönster.
• motion= bestämmer växlingsanimationen: smooth (standard, flyger dit), fade, lively eller none. Besökare som har ”reducera rörelse” aktiverat i systemet får alltid den direkta versionen, vad du än väljer.
• open=no startar med alla poster ihopfällda. Kartan anpassas automatiskt till alla filialer och din zoom blir maxvärdet.

Referens för alternativ

Felsökning i WordPress

Kortkoden visas som ren text på sidan. Det blocket bearbetar inte kortkoder. Använd ett Kortkod-block i blockredigeraren (inte ett kod- eller förformaterat block); i Elementor använder du widgeten Shortcode, i Divi en Code-modul. Använder du den klassiska redigeraren: skriv den i fliken Visuell som vanlig text.

Ingenting visas alls. Visa sidans källkod och sök efter whatismylocation. En HTML-kommentar om saknad lat/lng betyder att koordinaterna saknas eller är ogiltiga — kopiera hela kortkoden från byggaren i stället för att skriva attributen för hand.

Iframen försvinner när du sparar (utan tillägg). WordPress tar bort iframes för användarroller som saknar behörigheten unfiltered_html — på multisite gäller det administratörer som standard — och vissa säkerhetstillägg gör samma sak. Kortkoden från tillägget är den rena lösningen: den kräver inte att din roll får spara rena iframes.

Kartan är grå / rutorna laddas inte. Kartrutorna kommer från tile.openstreetmap.org; en mycket aggressiv annonsblockerare eller ett företagsnätverk kan blockera dem (överläggskortet visas ändå). Kontrollera på ett annat nätverk eller på en mobil med mobildata.

Ingen platspanel. Panelen visas från 2 nålar och uppåt — en enskild plats får det klassiska överläggskortet. Kontrollera också att panel="none" inte är satt.

Växlingsanimationen spelas inte upp. Nästan alltid är det besökarens (eller din egen) systeminställning ”reducera rörelse” — widgeten respekterar den medvetet och växlar direkt. Det är ingen bugg, och andra besökare ser fortfarande den animation du valt.

Ändringar syns inte. Ett cachetillägg (eller webbvärdens cache) visar den gamla sidan. Rensa sidcachen efter att du ändrat kortkodens attribut — själva widgeten har inget att cacha.