Create Flush Maps Alongside The Google Maps Api

Recently I convey seen a divulge of even or narrative maps that utilisation scrolling every bit the method to progress through the narrative. Influenza A virus subtype H5N1 actually adept event of this is Liminal Editions, a rip-roaring fictional tale alongside an accompanying map.

The New York Times has likewise late created a distich of non-fictional maps (Riding the New Silk Road & The Russian Federation Left Behind) that utilisation scrolling to progress through a study together with to update a map at the same time.

It is possible to utilisation the jQuery Waypoints library to create something similar alongside Google Maps. Waypoints is a jQuery plugin that makes it slowly to execute a component division whenever you lot scroll to an chemical ingredient on a spider web page.

We tin give the axe utilisation the plug-in to create termination handlers for functions inwards the Google Maps API, hence that every bit the user scrolls to defined elements on a page nosotros tin give the axe execute a component division inwards a Google Map. This enables us to create a even map, a mucilaginous map that updates every bit the user scrolls downwards the page.


Have a await at this event Story Map to meet the concept inwards action. As you lot scroll downwards this page nosotros tin give the axe motion to dissimilar locations on the map, nosotros tin give the axe zoom inwards on locations, nosotros could add together markers to the map, nosotros tin give the axe modify the map type together with nosotros tin give the axe fifty-fifty charge a Street View image.

This enables us to create even maps. To state a even inwards the text together with to motion the map to relevant locations every bit the narrative progresses. We could likewise utilisation the library to create journeying maps. We could render details, together with fifty-fifty add together photos together with videos to the left mitt column on the page together with i time again motion the map to the relevant locations when nosotros involve to.

It is likewise possible to utilisation jQuery Waypoints alongside Google Maps Street View. Using the library alongside Street View allows us to create an application where nosotros tin give the axe walk upward together with downwards a street using the scroll cycle or scroll bar.


Have a await at this demo to survive an take in of what is possible. For the purposes of this event I've added a visible overlay together with added a hash '#' for each div chemical ingredient where I am loading a novel Street View. If you lot wanted to replicate this inwards your ain application together with then you lot would in all likelihood desire to ready the opacity of this overlay to nil hence that the user wouldn't meet it.