Google maps jQuery plugin load markers 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>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.microformat.js"></script>

This example can be recreated using the following code, using the "bind" event:

$('#map_canvas').gmap().bind('init', function() {
	$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
		var lat = result.location[0].geo[0].latitude['value-title'];
		var lng = result.location[0].geo[0].longitude['value-title'];
		var latlng = new google.maps.LatLng(lat, lng);
		$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'content': result.description }, 
			function(map, marker) {
				$(item).click(function() {
					$(marker).triggerEvent('click');
					return false;
				});
			}
		).click( function() {
			$('#map_canvas').gmap('openInfoWindow', {'content': $(this)[0].content}, this ); 
		});														 
	});
});

The same code as above, using the callback function:

$('#map_canvas').gmap({'callback':function() {
	var self = this;
	self.microformat('.vevent', function(result, item, index) {
		var lat = result.location[0].geo[0].latitude['value-title'];
		var lng = result.location[0].geo[0].longitude['value-title'];
		var latlng = new google.maps.LatLng(lat, lng);
		self.addMarker({ 'bounds':true, 'position': latlng, 'content': result.description }, 
			function(map, marker) {
				$(item).click(function() {
					$(marker).triggerEvent('click');
					return false;
				});
			}
		).click( function() {
			self.openInfoWindow({'content': $(this)[0].content}, this ); 
		});														 
	});
}});

The same code as above, without the constructor:

$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
	var lat = result.location[0].geo[0].latitude['value-title'];
	var lng = result.location[0].geo[0].longitude['value-title'];
	var latlng = new google.maps.LatLng(lat, lng);
	$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'content': result.description }, 
		function(map, marker) {
			$(item).click(function() {
				$(marker).triggerEvent('click');
				return false;
			});
		}
	).click( function() {
		$('#map_canvas').gmap('openInfoWindow', {'content': $(this)[0].content}, this ); 
	});														 
});

The HTML used in this example looks like this:

<div class="vevent">
	<a href="/spinaltap" class="url summary">Spinal Tap</a>
	<span class="description">After their highly-publicized search for a new drummer, Spinal Tap kicks ...</span>
	When:
	<span class="dtstart">
		Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span>
	</span>-
	<span class="dtend">
		9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span>
	</span>
	Where:
	<div class="location vcard">
		<span class="fn org">Warfield Theatre</span>,
		<span class="adr">
			<span class="street-address">982 Market St</span>,
			<span class="locality">San Francisco</span>,
			<span class="region">CA</span>
		</span>
		<span class="geo">
			<span class="latitude">
				<span class="value-title" title="37.774929" ></span>
			</span>
			<span class="longitude">
				<span class="value-title" title="-122.419416"></span>
			</span>
		</span>
	</div>
</div>  

The callback function will, with an HTML like above, return an object as seen below:

{	
	@type: "vevent"
	description: "After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest ..."
	dtend: {
		@type: "dtend"
		value-title: "2015-10-15T21:00-08:00"
	}
	dtstart: {
		@type: "dtstart"
		value-title: "2015-10-15T19:00-08:00"
	}
	location: [
		{
			@type: "vcard"
			adr: [
				{
					fn: "Warfield Theatre"
					geo: [
						{
							@type: "geo"
							latitude: {
								@type: "latitude"
								value-title: "37.774929"
							}
							longitude: {
								@type: "longitude"
								value-title: "-122.419416"
							}
						}
					]
					org: "Warfield Theatre"
				}
			]
		}
	]
	summary: "Spinal Tap"
	url: [
		"/spinaltap"
	]
}

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

If you want to learn more about using Microformats; read about rich snippets and structured data