Google maps jQuery plugin microformats example

April 2011

August 2010

Using jquery with Google maps

Download jQuery 1.4.X or higher and jQuery UI 1.8.X or higher or use Googles or Microsofts CDN.

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#map_canvas').gmap({'callback': function(map) {
			$('#map_canvas').gmap('loadMetadata', 'microformat', 'vevent', function(index, item, data) {
					var clone = $(item).clone().addClass('ui-dialog-vevent').append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
					$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': new google.maps.LatLng(data.latitude.title, data.longitude.title), 'title': data.summary.text, 'icon':new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/music-rock.png') }, function(map, marker) {
						$(item).find('.summary').click( function() {
							$(marker).triggerEvent('click');
							return false;
						}); 
					}).click(function() {
						map.panTo( $(this).get(0).getPosition());
						$(clone).dialog({ 'modal': true, 'width': 530, 'title': data.summary.text, 'resizable': false, 'draggable': false });
						$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 'position': $(this).get(0).getPosition() });
					});
				}
			);
		}});
	});
</script>

More Google maps and jQuery examples