StoryMap JS

1.StoryMap JS

StoryMap JS is a free tool to help you tell stories on the web that highlight the locations of a series of events. StoryMap JS has three methods of creating story maps: Google Maps within the StoryMap maker, Gigapixel, and SnapMap.


StoryMap JS can tell stories with large photographs, works of art, historic maps, and other image files. Learn more.


SnapMap is a tool to help you quickly create a StoryMap. It places your 20 most recent geo-tagged Instagrams on a map that can be shared instantly. You can also edit it in StoryMap’s authoring tool, adding media from other sources.

2.Setting up StoryMap

  1. Go to and click on Make a storymap now


  2. Connect with you Google Account and accept the connection between your Google Account and KnightLab StoryMap JS.
  3. Select Map. Gigapixel is when you can use a picture (e.g. historic map, photograph, piece of art) as the background and then create a “map” on top of it.
  4. Add a title to your map.
  5. The following screen is your title slide. 15582406901_a89be91935_b.jpg
  6. There are two areas where you can add content. There is a place to add and Headline and Description and a place to add Media through either uploading a file or inserting a URL. These can be pictures or videos.
  7. You can also add a background image to the slide, or change the background color by clicking the “Slide Options” button in the bottom right hand corner.
  8. After you add some content, you can preview your slide by switching to preview mode at the top of the screen. 15398937138_0b94aa4bed_c.jpg

3.Creating a Story in StoryMap JS

  1. Once your title slide is done, you can add a new slide by clicking “Add Slide” on the left side of the screen.15585905542_a69df1d3bd_c.jpg
  2. You can add in your Headline, description, and media like before on the title slide, but you can also nowadd a point on the map.
  3. To add a point on the map, enter in a place in the search box on the map, press enter. A point will be dropped onto the place that you searched for.
  4. If you want to zoom in or out on your point, you can click the + or – button in the upper left hand side of the map.
  5. Continuing adding slides to create your story.
  6. As you will see, in the Preview mode, your points will be connected as you add slides with different points.15582407341_3937acbc26_c.jpg
  7. Make sure to regularly Save your work by clicking the save button at the top of the screen.
  8. You can further customize your StoryMap, such as changing the style of the map by clicking Optionsnext to the Save button.15585059455_c07c583817_z.jpg

4.Sharing or Embedding Your StoryMap

  1. To share a link or to embed your StoryMap, click the Share button in the top right hand corner of the screen.

2. To embed this timeline into UMWBlogs (or another WordPress site), first create a new post or page to contain the embedded StoryMap, then switch the WordPress editor from Visual to Text mode. Paste the code from the StoryMap JS website into the WordPress editor, then publish your page or post.

Embedded in a post


Suggest Edit