Deutsch | English

Karten-Integration — Touren & Karten für deine Webseite

Mit komoot kannst du ganz einfach Touren und Karten in deine Webseite oder deinen Blog einbinden. Wie bei einem YouTube Video erfolgt die Einbindung über einen sogenannten iFrame. Dabei kannst du zwischen einer einzelnen Tour mit Karte oder einer Übersichtskarte aller deiner Touren wählen:

Eine Tour einbinden

Wenn du den Button "Teilen" auf der Tour-Seite klickst, findest du dort die Funktion "Zeig deine Tour auf deiner Webseite" . Klickst du darauf, erhältst du den HTML-Code, mit dem du die Tour auf deiner Webseite einbinden kannst. Mit den Attributen width und height kannst du dabei die Größe anpassen:

<iframe src="https://www.komoot.de/tour/TOUR-ID/embed" width="640" height="440" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>


Eine Übersichtskarte einbinden

Du kannst auch alle deine Touren bei komoot als Übersichtskarte in deine Webseite einbinden. Dazu kannst du einfach als Quelle ( src="..." ) für das iFrame den Link zu deiner Seite bei komoot nehmen und ein ?embed anhängen:

<iframe width="650" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.komoot.de/user/NUTZER-ID?embed"></iframe>


WordPress & Co

Bei einigen Blog- und Content-Management-Systemen wird beim Speichern HTML-Code und damit ggf. auch dein iFrame wieder entfernt oder verändert. Die Karte wird dann nicht richtig angezeigt. Bei manchen Systemen gibt es die Möglichkeit, diese Funktion zu deaktivieren. Für WordPress gibt es eine ganze Reihe von Plugins, die dir helfen, iFrames einzubinden.

Ein Menü erstellen

Du kannst auch eine Karte nutzen, um mehrere Touren über ein Menü anzuzeigen.
Dazu musst du lediglich dem iFrame mit der Karte einen Namen geben - z.B. name="komoot_karte" . Dann kannst du ein Menü mit Links zu verschiedenen Touren erstellen. Bei den Links musst du jetzt nur noch die Karte als Ziel angeben - also target="komoot_karte".
HTML-Code für das Beispiel-Menü:
<ul>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed" target="komoot_karte">Tour 1</a></li>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed" target="komoot_karte">Tour 2</a></li>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed"
 target="komoot_karte">Tour 3</a></li> 
</ul>


HTML-Code für die Karte:
<iframe name="komoot_karte"" width="650" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.komoot.de/user/NUTZER-ID?embed"></iframe>

Feedback- und Wissensdatenbank