jQuery and Google Maps

jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. Over the years a number of JQuery demos and plugins have been developed to help you create Google Maps for your website. Here is a quick round-up of some of the best jQuery and Google Maps implementations:

Google Maps Slider

This nice Google Maps demo applies a mouseover event to a map sidebar. When you mouseover a listing in the sidebar the map pans to the selected location.

JQuery & Google Maps Tutorial

This is a great tutorial about how map developers can use JQuery to create custom Google Maps. I particularly like Step 7. of the tutorial which shows you how to replace the default information window in the Google Maps API with a custom information window.

Rotating Map Demo

Chris Heilmann has created his own rotating map demo using CSS3 and jQuery.

Use the 'L' and 'R' keys to rotate the map. Also try and pan the map for a little added fun.

Chris has posted a brief explanation on his blog Wait Till I Come! that will help you if you would like to replicate this effect in your own maps.

Google Maps Google Maps jQuery Plugin V1.01
Shawn Mayzes has created this jQuery Google Maps plugin. The plug-in includes a lot of features including custom map markers, geocoding and adding a Street View overlay.

imGoogleMaps 0.9 - Street View

imGoogleMaps is another jquery plugin with a full set of features. I have included it here because it is one of the few jQuery plugins that allow you to display Street View and a Street View control.


If you want to explore more jquery plugins Drag & Drop has a nice post, 10 jQuery Plugins for Easier Google Map Installation.