Google Maps Slider with jQuery

Download Demo

I’m sure it’s partly me getting better at JavaScript, but I found the API quite well done and easy to work with. 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.

I 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, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

HTML

<li data-geo-lat=“41.9786″ data-geo-long=“-87.9047″><h3>O’Hare Airport</h3><p>Flights n’ stuff</p><p class=“longdesc”><strong>About:</strong> O’Hare International Airport has been voted the “Best Airport in North America” for 10 years by two separate sources: Reaaders of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine’s 2009 “America’s Favorite Cities” ranked Chicago’s Airport System (O’Hare and Midway) the second-worst for delays, New York City’s airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p></li>

Google Maps Slider with jQuery