Sunday, May 01, 2011

Google Maps and jQuery

GMap3

GMap3 is a plugin for jQuery which allows users to create Google Maps with v3 of the maps API. The plug-in includes a number of options, including a right-click context menu (pictured above), marker clustering and Street View.

Sliding Information Window

This Google Maps and jQuery tutorial shows you how to create a nice sliding information window. If you follow this tutorial you can create a map with an information window that slides onto and off the map when you click on the map markers.

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.

________________

2 comments:

google earth street said...

I have couple of pages that I want to integrate with GMap3.Can I use this plugin with wordpress blogs and squidoo or hubpages?Thank you so much.

Anonymous said...

Your second link to the sitepoint article is broken, it should be:

http://blogs.sitepoint.com/embellishing-your-google-map-with-css3-and-jquery/