Free embeds · One click to copy

Embeddable travel maps

Drop a live Atlas Ranger map into any blog post or page. The maps update automatically — no maintenance on your end. We only ask that you keep the small "Powered by Atlas Ranger" link.

How it works

Pick an embed below.Click "Copy embed code" — the iframe snippet is on your clipboard.
Paste into your CMS. Works in WordPress (Custom HTML block), Ghost (HTML card), Notion (paste as Embed), Substack (HTML/iframe), Webflow (Embed element), Squarespace (Code block), and plain HTML.
The map auto-resizes to your container width. Set height once via the iframe attribute; the embed adapts to mobile and desktop.
Data refreshes on its own. Aurora updates every 30 min, cherry blossom from JMA records, seasonality from Open-Meteo ERA5 reanalysis. Your post stays current without re-publishing.

Featured tools

Aurora Tonight Map

Live world map of northern lights visibility, powered by NOAA SWPC. Refreshes every 30 minutes — your readers always see current data.

Best for:Travel blogs · Aurora tour operators · Iceland / Norway / Alaska / Finland content

See live tool →Default height: 900px

↑ Live preview — exactly what visitors see when you embed this on your site.

Copy this code into your site

<iframe
  src="https://atlasranger.com/embed/aurora/tonight/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="900"
  frameborder="0"
  loading="lazy"
  title="Aurora Tonight Map by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/aurora/tonight/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Cherry Blossom Tracker

Interactive map showing Japan cherry blossom bloom stages city by city. 22 Japanese cities, drag a date scrubber to see bloom progression Okinawa → Hokkaido.

Best for:Japan travel guides · Sakura content · Spring trip planning posts

See live tool →Default height: 780px

↑ Live preview — exactly what visitors see when you embed this on your site.

Copy this code into your site

<iframe
  src="https://atlasranger.com/embed/japan/cherry-blossom-tracker/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="780"
  frameborder="0"
  loading="lazy"
  title="Cherry Blossom Tracker by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/japan/cherry-blossom-tracker/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Seasonality maps by country

One embed per country — the same interactive seasonality map shown on each country's guide page. Click-month, hover-city, scrub-the-year interactions all included. Default height 720px.

Best Time to Visit Japan

See live page →

Japan seasonality embed code

<iframe
  src="https://atlasranger.com/embed/japan/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Japan by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/japan/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Best Time to Visit Iceland

See live page →

Iceland seasonality embed code

<iframe
  src="https://atlasranger.com/embed/iceland/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Iceland by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/iceland/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Best Time to Visit Vietnam

See live page →

Vietnam seasonality embed code

<iframe
  src="https://atlasranger.com/embed/vietnam/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Vietnam by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/vietnam/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Best Time to Visit Thailand

See live page →

Thailand seasonality embed code

<iframe
  src="https://atlasranger.com/embed/thailand/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Thailand by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/thailand/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Best Time to Visit Spain

See live page →

Spain seasonality embed code

<iframe
  src="https://atlasranger.com/embed/spain/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Spain by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/spain/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

Best Time to Visit Bali

See live page →

Bali seasonality embed code

<iframe
  src="https://atlasranger.com/embed/bali/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe"
  width="100%"
  height="720"
  frameborder="0"
  loading="lazy"
  title="Best Time to Visit Bali by Atlas Ranger"
  style="border: 0; max-width: 100%;"
></iframe>
<p style="font-size: 12px; color: #6B7785; text-align: right; margin: 6px 0 0;">
  Map by <a href="https://atlasranger.com/bali/best-time-to-visit/?utm_source=embed-gallery&utm_medium=iframe" target="_blank" rel="noopener">Atlas Ranger</a>
</p>

CMS-specific instructions

WordPress (block editor)

Add a new block → Custom HTML → paste the embed code → Preview to verify it renders. (Avoid the Embed block — that one is for whitelisted services only.)

Ghost

In the editor, type /html to insert an HTML card → paste the embed code → click outside the card to render.

Substack

Click the image / embed icon in the toolbar → choose iframe→ paste the embed code → publish.

Notion

Type /embed → paste the URL portion of the embed (e.g. https://atlasranger.com/embed/aurora/tonight/) — Notion handles the iframe itself.

Webflow / Framer

Drag an Embed element onto your canvas → paste the full iframe code.

Squarespace

Add a Code Block (not Markdown) → paste the embed → save.

Plain HTML

Paste the snippet anywhere inside <body>. The iframe is self-contained and needs no external CSS or JavaScript on your end.

Embed terms

Free for any site — personal blogs, commercial sites, non-profits, news outlets, educational sites.
Keep the attribution link.The small "Powered by Atlas Ranger" link inside the embed must remain visible and clickable.
Don't re-publish as your own.Embed the live tool — please don't screenshot the map and present the data as yours.
Data freshness: aurora data refreshes every 30 minutes from NOAA. Cherry blossom + seasonality data refreshes when source publishers update their records.
Want a different embed? Email hi@atlasranger.com— if it's a destination we already cover, we'll add it.