How to Make Google Maps Slider

Google Maps has a JavaScript API  now in it’s third version. Now in Google Maps v3 no longer requires applying for an API key which is nice.

For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.

Not only is it evented for dealing with things inside the map, but the objects you used to create the map and stuff inside it are full of methods for controlling them. This makes it easy to control the map with events that happen elsewhere on your page.

How to Make Google Maps Slider

Chris Coyier was play with it a little and try to build something. created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions. When one of these list items is hovered over, he apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

It’s all fairly straight forward and further commented to clarify. Adding/editing points is as simple as changing coordinates and text right in the HTML part.

Demo :
Download :
Requirements : Google Maps API

Tagged with: , ,