Google maps jQuery plugin streetview with microformats example

Using jquery with Google maps

Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>

$('#map_canvas').gmap().bind('init', function(evt, map) {
	$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
		var clone = $(item).clone().addClass('ui-dialog-vevent');
		clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
		var lat = result.location[0].geo[0].latitude['value-title']; 
		var lng = result.location[0].geo[0].longitude['value-title'];
		$('#map_canvas').gmap('addMarker', { 
				'bounds':true, 
				'position': new google.maps.LatLng(lat, lng), 
				'title': result.summary,  
			}, 
		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': result.summary, 
				'resizable': false, 
				'draggable': false 
			});
			$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 
				'position': $(this).get(0).getPosition() 
			});
		});
	});
});

There are many ways of writing this snippet, please refer to the sample code section in the wiki.