Google Maps Slider
Published by Chris Coyier
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.
I decided to play with it a little and try to build something.
I used jQuery to help out, but that's definitely not required.
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.
<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: Readers 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>
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.
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.