English | Deutsch

Map-Integration — Embed Tours & Maps into your Website

With komoot you can embed Tours and maps into your website or blog easily. Similar to a YouTube video the maps are embedded via an so-called iFrame. You can choose between a single Tour or a overview map with all your tours.

Embed a Tour:

Go to a Tour page and hit the 'Share It' button. There you find the feature 'Add your Tour to your websiteW where you can copy the HTML-code for your website. With width and height you can customize the size of the map:

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


Embed a Overview Map

You can also embed all your tours in a single map. Simple exchange the source ( src="..." ) of your iFrame with your profile link follofed by '?embed':

<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

Some blog and content management systems remove or change HTML code when you save your posts and this might break your map integration. In some systems is is possible to disable this feature. For WordPress, there are a number of plugins that will help you to integrate iFrames.

Linking your Map

You can also use a single map and provide a nav by linking several Tours. Therefore you simply name your iFrame - e.g. with name="komoot_map" and provide a target for your links.
HTML code for a example navigation:
<ul>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed" target="komoot_map">Tour 1</a></li>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed" target="komoot_map">Tour 2</a></li>
       <li><a href="https://www.komoot.de/tour/
TOUR-ID/embed"
 target="komoot_map">Tour 3</a></li> 
</ul>


HTML code for the map Karte:
<iframe name="komoot_map"" width="650" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.komoot.de/user/NUTZER-ID?embed"></iframe>

Feedback and Knowledge Base