jQuery Waypoints & Google Maps

Creating a Scrolling Story Map

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. As the user scrolls to defined elements on the page we can execute a function in the Google Map.

For example, 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 when they are mentioned in the text. 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.

OK Let's Zoom in

The first thing we are going to do is zoom the Google Map!

We do this by adding a function in our map javascript to change the zoom level of the map.

Here is the relevant code:

$('.ad-unit').waypoint(function() { map.setZoom(13); });

Cool! Now lets change the location of the map. Scroll down some more on the page and we will change the map location to show London.

Change Location to London

The map should now have moved to London.

We did that by chnnging the latitude and longitude of the map. Here is the function we called to do this:

$('.movetolondon').waypoint(function() { map.setCenter( new google.maps.LatLng(51.508742,-0.112839)); });

Let's now chnge the map type to show a satellite view of London.

Change Map to Satellite View

The map should now have changed to be showing an aerial view of London.

Here is the function we called to change the map type:

$('.maptype').waypoint(function() { map.setMapTypeId(google.maps.MapTypeId.SATELLITE); });

If you now scroll back up the page you can see these map changes in reverse. This is also easy to achieve with jQuery Waypoints. All we need to do is to create similar event handlers that react when the user scrolls up to elements on the page.