Google maps jQuery streetview with microformats example

Spinal Tap After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. When: Oct 15, 7:00PM - 9:00PM Where:
Warfield Theatre, 982 Market St, San Francisco, CA

Using jquery with Google maps

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

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jQuery.ui/"></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', { 
				'position': new google.maps.LatLng(lat, lng), 
				'title': result.summary,  
		function(map, marker) {
			$(item).find('.summary').click( function() {
				return false;
		}).click(function() {
			map.panTo( $(this).get(0).getPosition());
				'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()