Create Story Maps with the Google Maps API

Recently I have seen a number of story or narrative maps that use scrolling as the method to progress through the narrative. A really good example of this is Liminal Editions, a rip-roaring fictional tale with an accompanying map.

The New York Times has also recently created a couple of non-fictional maps (Riding the New Silk Road & The Russia Left Behind) that use scrolling to progress through a report and to update a map at the same time.

It is possible to use the jQuery Waypoints library to create something similar with Google Maps. Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element on a web page.

We can use the plug-in to create event handlers for functions in the Google Maps API, so that as the user scrolls to defined elements on a page we can execute a function in a Google Map. This enables us to create a story map, a sticky map that updates as the user scrolls down the page.


Have a look at this example Story Map to see the concept in action. As you scroll down this page we can move to different locations on the map, we can zoom in on locations, we could add markers to the map, we can change the map type and we can even load a Street View image.

This enables us to create story maps. To tell a story in the text and to move the map to relevant locations as the narrative progresses. We could also use the library to create journey maps. We could provide details, and even add photos and videos to the left hand column on the page and again move the map to the relevant locations when we need to.

It is also possible to use jQuery Waypoints with Google Maps Street View. Using the library with Street View allows us to create an application where we can walk up and down a street using the scroll wheel or scroll bar.


Have a look at this demo to get an idea of what is possible. For the purposes of this example I've added a visible overlay and added a hash '#' for each div element where I am loading a new Street View. If you wanted to replicate this in your own application then you would probably want to set the opacity of this overlay to zero so that the user wouldn't see it.