Embedded Map

Embedded Map

What Problem Does This Solve?

Site requires an interactive map to perform a simple task.

When to Use This Pattern

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

What’s the Solution?

An externally hosted map can be consumed using the iframe HTML element. The provider of the map typically constructs this HTML code so that the author of the site can copy and paste it onto their own site to embed this control.

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. Whenever possible employ techniques[1] 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.

Why Use This Pattern?

Content providers like newspapers or blogs don’t have the time or resources to create data and maps. Oftentimes they rely on third-party references to provide this information so it can be embedded into an article or blog entry.

Special Considerations

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.

Consider that the cartography of the embedded map will not match the style of the page. This is of importance for sites with high brand-awareness. In these cases check if the use of custom basemaps is an option so that the color scheme and typography of the map matches the theme of the site.

[1] 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