Menu
From the share tab on the openstreetmap page, I can export a map view as HTML e.g.:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&layer=mapnik" style="border: 1px solid black"></iframe> <br/><small><a href="https://www.openstreetmap.org/#map=17/46.23438/6.05463">View Larger Map</a></small> I would like to embed this in a README.md page on github e.g.
Searching around, the closest to embedding iframes in markdown was the gitlab guide. Following which I tried the <figure class="video_container"> tag, but don't see that working either on gitlab or github.
# how to find us? we will be here: <figure class="video_container"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&layer=mapnik" style="border: 1px solid black"></iframe> </figure> Am I missing something, or is this something better left to real HTML and beyond what markdown can/should do?
775
An <iframe> is just an HTML tag, and Markdown supports inline HTML. You should be able to just use it.
Go to google maps, search your location, go to 'share' and copy the embed link; paste it into your markdown file and voila!
Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for.
Embedding an <iframe> into GitHub-flavored Markdown (GFM) is not supported. Here's the official stance on it from their specs:
6.11 Disallowed Raw HTML (extension)
GFM enables the tagfilter extension, where the following HTML tags will be filtered when rendering HTML output:
<title><textarea><style><xmp><iframe><noembed><noframes><script><plaintext>[...] These tags are chosen in particular as they change how HTML is interpreted in a way unique to them [...], and this is usually undesireable in the context of other rendered Markdown content.
All other HTML tags are left untouched.
Similar to solutions mentioned for videos in other answers, you could embed a screenshot of your map, and make it a link to the URL of your OSM map section:
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
