Embedding Story Maps into websites and blogs

Story maps combine ArcGIS Online web maps with applications and templates that incorporate text, multimedia, and interactive functions. Story maps inform, educate, entertain, and inspire people about a wide variety of topics. You can view examples of these popular applications at the Esri Storytelling with Maps website.

Story maps are easy to create using a variety of downloadable templates. Just author your ArcGIS Online web map (some templates use multiple web maps), download the template, and follow the instructions to insert your web map ID(s) and other elements. Some of the story map templates are also hosted directly on ArcGIS Online, and you’ll find several to choose from in the template gallery. See About web application templates for more information.

Once you’ve created a story map, or found one that’s publicly available, you can embed them in your website or blog. In this example we’ll use a publicly shared story map, one that uses the story map swipe template that compares two maps, in this case obesity and diabetes.

You can open the story map by clicking this URL: http://storymaps.esri.com/templates/swipe/

To embed the story map in a website or blog we can use an iframe tag. The iframe tag is supported in all major browsers including Internet Explorer, Chrome, Firefox, Safari, and Opera.

The iframe tag has several attributes that we’ll use to embed our story map; the URL above will be placed in the src attribute, and the height and width attributes will be used to size the embedded story map as needed to fit our website or blog. Other attributes are available, but not required, such as frameborder, scrolling, marginheight, and marginwidth. ¬†Once we create the HTML with our iframe and attributes, we can copy and paste it directly into our website or blog.

Here’s the completed HTML used to place the story map inside our blog with dimensions of 720 pixels by 600 pixels. The URL to the story map is highlighted, and is used in the src attribute:

Here’s the embedded story map as it appears in our blog:

Bear in mind that some templates will work better than others when placed into constrained website or blog dimensions. So adjust your website accordingly to provide the best results, or choose templates that look best within small dimensions.

(Note: At the time of this post, all story map templates are undergoing revision using responsive design techniques to adapt to different sizes.)

This entry was posted in ArcGIS Online, Story Maps and tagged , , . Bookmark the permalink.

Leave a Reply


  1. lorimar says:

    Good information for those stuck in map portals!
    Maps should be in a context (even though a story map can create the context).
    But I must say, I like the last piece of information the most – responsive design!
    Most applications work really well out of the box but this is really welcoming news!

  2. Hi Bern,
    Here is a nice website of one of our clients where I used a customized story map to embed into their website.

  3. george_kipp says:

    Hi Bern,

    Thanks for the useful article. I was able to embed a story map into a website about historic railroad depots in the Ozarks.


  4. sbunker says:

    I was having trouble embedding my Arc Gis maps and story maps into my Google site. I found that if I changed the beginning of the url from http to https, this fixed the problem.

  5. joa762 says:

    Hi -for the life of me neither I nor my IT team can embed a story map I’ve created in our news website for public viewing (it either eternally initializes or asks for the user to sign in when simply given the share URL). How can I solve this issue? Thanks!

  6. paulkel123 says:

    I am new to all of this so I’m not sure if your statement: “some templates work better than others when placed into constrained websites …” addresses my problem. I have created a story map with photos, and when i look at a photo inside arcgis online – where the story map is created – no matter the dimensions of the photo i can see the entire photo when i click on it. However, when i embed the story map into my website, the longer photos are truncated – to fit the fixed dimensions of the story map i guess. is there a command in html that will allow the entire photo to show up regardless of the size of the embedded story map? And would that command be put into the website, or in the creation stage inside arcgis online?

    • Bern Szukalski says:

      Sorry, I am not quite sure I understand what you are experiencing without more information. Which story map are you using? It seems you are storing your photos as items in your ArcGIS online account – is that the case? Is it wide aspect photos that are being truncated, or all? Can you share links? It may be easier if you just email me the details bszukalski@esri.com