Eine Karte einbetten

Deine Karte ist immer über ihre eigene URL erreichbar, was an sich schon praktisch ist. Manchmal möchtest du die Karte aber interaktiv auf deiner eigenen Website zeigen. In dieser Anleitung erfährst du, wie das geht.

Standard-Embed

Die einfachste Möglichkeit zum Einbetten ist bereits für dich vorbereitet, sowohl für die vollständige Karte als auch für einen bestimmten Ort. Den Embed-Code findest du unter Karte teilen.

Embed-Code für das Teilen einer Karte in Wolf Maps

Unten siehst du den Standard-Embed-Code aus dem Share-Panel. Du kannst ihn in den Code deiner Website einfügen, um die vollständige Karte auf deiner Website anzuzeigen. Tipp: Passe Breite und Höhe an dein Layout an.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b?zoom=1" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

Spezifisches Embed

Manchmal möchtest du nicht die ganze Karte zeigen, sondern nur eine bestimmte Auswahl. Zum Beispiel in einem Blogartikel, in dem du eine bestimmte Kategorie hervorhebst. So geht es.

1. Basis-Embed-Code

Starte mit dem Standard-Embed-Code aus Karte teilen.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b?zoom=1" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

2. Karte filtern

Wähle auf der Karte die Kategorie oder das Tag aus, das in deinem Embed sichtbar sein soll.

Filter für ein spezifisches Embed auswählen

3. URL in der Adressleiste

Wenn zwei Kategorien ausgewählt sind, wie im Beispiel oben, kann die URL in deiner Adressleiste so aussehen:

https://wolfmaps.com/kaart/duurzame-stadsgids-groener-groningen-a7b997b?preview=true**&c=37bda7b&c=e7b2e9b**#14.95/53.21785/6.56805

4. Nur den Filterteil kopieren

Kopiere aus dieser URL nur diesen Teil: &c=37bda7b&c=e7b2e9b. Füge ihn dann hinter deinen Standard-Embed-Code ein, wie unten gezeigt.

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b**&c=37bda7b&c=e7b2e9b**" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>

5. Extra: Koordinaten und Zoomstufe

In Schritt 3 siehst du auch zusätzliche URL-Daten. Vor dem ersten Slash steht die Zoomstufe, danach folgen die Koordinaten. Wenn du diesen Teil ebenfalls übernimmst, sehen Besucher genau denselben Kartenausschnitt wie du.

#14.95/53.21828/6.56791

Dann sieht dein Embed so aus:

<iframe width="560" height="315" src="https://wolfmaps.com/embed/a7b997b#14.95/53.21828/6.56791" title="Sustainable City Guide - Groener Groningen" allow="geolocation *" frameBorder="0"></iframe>