wiggomaps

Indlejr Wiggo Maps

Kopiér indlejringen til din hjemmeside. Kortvisningen kræver ingen API-nøgle.

Dit domæne skal være tilladt i Maps-konfigurationens embed_origins. Brug kun markører, som brugeren har adgang til at se.

Den valgte startstil følger med i alle kodeeksempler. Stilvælgeren er skjult i det indlejrede kort.

Indlejr kortet med HTML

Indsæt denne kode, hvor kortet skal vises. Den viser kortet uden egne markører.

<iframe
    src="https://maps.wiggo.dk/?embed=1&style=light"
    title="Wiggo-kort"
    style="width:100%;height:600px;border:0;display:block"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin">
</iframe>

Indlejr med egne markører

Kopiér koden direkte til din side. Udskift data-lat, data-lng og data-label. Sæt data-zoom="false" for at deaktivere zoomknapper, musehjul, dobbeltklik og pinch-zoom. Kortet kan stadig flyttes. data-zoom-level vælger startniveauet fra 0 til 19. Maksimalt zoomniveau er 19. Højere tal viser flere detaljer. Udelad attributten for automatisk zoom. Scriptet skal kun indsættes én gang og understøtter flere kort på samme side. Ingen download af JavaScript eller API-nøgle er nødvendig. Dit domæne skal stadig være tilladt i embed_origins.

<div data-wiggo-map
     data-lat="52.514722"
     data-lng="13.239444"
     data-label="Olympiastadion Berlin"
     data-style="light"
     data-zoom="true"
     data-zoom-level="14"
     style="height:400px;width:100%;margin-top:20px">
</div>
<script src="https://maps.wiggo.dk/assets/embed.js" defer></script>

Flere markører på samme kort

Tilføj punkter i data-markers (JSON med numeriske koordinater). Kortet tilpasser automatisk udsnittet til alle markører. Et valgfrit data-zoom-level (0–19, maks. 19) tilsidesætter det automatiske startzoom og kan skjule punkter uden for udsnittet. data-markers har forrang over data-lat og data-lng.

Ved dynamisk HTML fra PHP skal JSON-attributten escapes med htmlspecialchars(json_encode($markers, JSON_THROW_ON_ERROR), ENT_QUOTES, 'UTF-8'). Scriptet skal kun indlæses én gang pr. side.

<div data-wiggo-map
     data-style="light"
     data-zoom="true"
     data-markers='[
         {"id":"berlin","lat":52.514722,"lng":13.239444,"label":"Olympiastadion Berlin"},
         {"id":"kobenhavn","lat":55.6761,"lng":12.5683,"label":"Rådhuspladsen, København"}
     ]'
     style="height:500px;width:100%">
</div>
<script src="https://maps.wiggo.dk/assets/embed.js" defer></script>