Embedded Map

Embedded Map

What Problem Does This Solve?

App or site requires an interactive map to perform a simple task.

Why Use This Pattern?

Maps have become an increasingly common way to visualize data on web sites and it’s easier than ever for content providers like newspapers or blogs to utilize them. While site providers oftentimes don’t have the time, resources, or technology to create their own data and maps, they rely on third-party providers to make and embed this content.

When to Use This Pattern

Embedded maps are commonly used on multi-page sites like company websites, news sites, blogs, or magazines to highlight locations, relationships between objects, or statistical data. The spatial content becomes part of the article or story and supports basic interactions like displaying an Info Popup with additional information about a marker, swiping between two data layers, or calculating driving directions.

Another popular use that rely heavily on embedded maps is StoryMaps[1]. They use magazine style layouts to tell immersive digital stories and the location of events, places of interest, movement or routes are crucial part of the big picture.

What’s the Solution?

Different to a Reference Map, an Embedded Map is typically larger, often spanning the full width or even full height of a screen and responds to scroll and swipe interactions. These gestures can be used to trigger actions that tie content and map display together. As users scroll down the page a map comes into view, gets locked into place, becomes active, and optionally media starts to scroll by in a side panel or on top of the map.

Cartography and map style are important factors so that users get intrigued to look at the map and can understand key elements instantly. They are also crucial for sites with high brand-awareness. Try to match the color scheme and typography of the layers to the theme of the site.

Work around the following pitfalls that can deteriorate the experience:

  • Embedded content has the habit of breaking responsive layouts due to the fixed dimensions of an iframe or canvas. Whenever possible employ techniques[2] to resize containers as the browser windows changes.
  • To avoid unwanted panning behavior as site visitors, use their mouse wheel to scroll through the page consider disabling the scroll zoom functionality.
  • Make the map less than the full height of the current viewport to provide cues that scrolling will reveal more content.

Special Considerations

Embedded maps are often based on externally hosted content and maps that is consumed using the either the iframe or canvas HTML element. The provider of the map constructs this HTML code so that the author of the site can copy and paste it onto their own site to embed this control. Consider that the cartography of the embedded map will not match the style of the page.

Embedding a live map is not always the best approach and depends greatly on the nature of the application. For simple tasks like:

  • highlighting the location of an address, consider a static map image or a Reference Map
  • calculating and displaying directions, consider a link to a third-party map provider that can help to detect the origin and calculate the complete route given the destination is prepopulated. This works especially well on mobile devices that can make use of native applications and sensors.


UNHCR Storymap
UNHCR StoryMap showing a sidecar interaction as the user scrolls through the app
Erasmus features an embedded map but indicates that there is more content below the fold


[1] ArcGIS StoryMaps, https://storymaps.arcgis.com/ (accessible: 11/10/2020)

[2] McCollin, Rachel: Making Embedded Content Work In A Responsive iFrame – https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Leave a Reply