Embed Your Flight Map on Your Website
Your flights, on your own site: an interactive map that your readers can pan, zoom and replay, right inside a blog post, a travel diary or a personal homepage. Make the map in My Flight Routes, copy the embed code from the Share menu, and paste it wherever your site accepts HTML. It is free, your visitors do not need an account, and nothing needs installing.
An embedded flight map inside a blog post. Press play to try the live map.
How to Embed Your Flight Map
- Add your flights: Type them in, click the airports on the map, import a CSV or scan your boarding passes.
- Sign in: Embeds come from saved share links, which need a free account. Your flights come with you when you sign up.
- Create a share link: Open Share on the map, choose Link and create it.
- Copy the embed code: Open Embed on a website under the link, pick a theme and a height, and copy the code.
- Paste it into your site: Anywhere that accepts HTML, such as the blocks listed below.
What the Code Looks Like
The snippet is a standard iframe followed by a one-line credit, so it works on any site that lets you add HTML:
<iframe
src="https://myflightroutes.com/share/s_yourMapId?embed=true"
title="Example of an embedded flight map"
width="100%"
height="500"
style="border:none;border-radius:8px"
loading="lazy"
allowfullscreen
></iframe>
<p style="margin:6px 0 0;font-size:13px">Flight map made with <a href="https://myflightroutes.com/">My Flight Routes</a></p>Where to Paste It
- WordPress: Add a Custom HTML block where the map should go and paste the code into it
- Squarespace: Add a Code block, paste the code and leave the display set to HTML
- Wix: Add Embed Code, choose Embed HTML, paste the code and resize the box to fit
- Ghost: Add an HTML card in the editor and paste the code
- Blogger: Switch the post to HTML view and paste the code where the map should appear
- Notion and other tools: Paste the share link itself, which most editors turn into a preview card
What Your Visitors Get
- A real map, not a picture: Visitors can pan, zoom and click any route for its details
- The replay: When your flights have dates, a play button draws your journey flight by flight
- Your map mode: Coloured by year, airline or countries? The embed opens in the mode you shared
- A theme that fits: Pick light or dark to match your site, or let it follow each visitor's setting
- A light footprint: The map only loads when a reader scrolls near it, so the rest of your page stays fast
Theme, Size and Credit
The embed shows your map the way you are looking at it, including its map mode and airport labels, and the code adds two choices: the theme (auto, light or dark) and the height (400, 500 or 650 pixels). The width always fills the space it is given, so the map fits a phone as well as a wide article. Under the map there is a short credit line linking back to My Flight Routes. You are free to remove it, but keeping it helps other travellers find the map.
Frequently Asked Questions
Is it free to embed my flight map?
Yes. Making the map, creating the share link and embedding it are all free. You need a free account to create the link, and the people who visit your site need nothing at all.
Does the embedded map update when I add flights?
No. An embed shows the flights you shared at the moment you created the link. To show newer flights, create a new share link and replace the code on your site.
Can I remove an embedded map?
Yes. Delete the share from your account settings and the map stops showing everywhere it was embedded, straight away. You can also just take the code off your page.
Will it slow down my website?
No. The map loads lazily, only when a reader scrolls close to it, and it runs in its own frame, so it does not touch the rest of your page.
What do visitors see about my flights?
Only what you chose to share: the routes and the details you included, such as dates and airlines. Nothing else from your account is shown, and shared maps are kept out of search results.
Can I change the size?
Pick a height when you copy the code, or change the height number in the code yourself. The width is set to fill the space available, which you can also change.
Ready to put your travels on your site? Add your flights and create your first embed.