Google maps jQuery plugin load markers with microdata 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— Oct 15, 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="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.microdata.js"></script>

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

$('#map_canvas').gmap().bind('init', function() {
	$('#map_canvas').gmap('microdata', 'http://data-vocabulary.org/Event', function(result, item, index) {
		var lat = result.location[0].geo[0].latitude;
		var lng = result.location[0].geo[0].longitude;
		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.microdata('http://data-vocabulary.org/Event', function(result, item, index) {
		var lat = result.location[0].geo[0].latitude;
		var lng = result.location[0].geo[0].longitude;
		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('microdata', 'http://data-vocabulary.org/Event', function(result, item, index) {
	var lat = result.location[0].geo[0].latitude;
	var lng = result.location[0].geo[0].longitude;
	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 itemscope itemtype="http://data-vocabulary.org/Event">
​	<a href="/spinaltap" itemprop="url">
		<span itemprop="summary">Spinal Tap</span>
	</a>
	<span itemprop="description">
		After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest ...
	</span>
	When:
	<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>—
	<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>
	Where:
	​<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/​Organization">
		​<span itemprop="name">Warfield Theatre</span>
		​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
			<span itemprop="street-address">982 Market St</span>, 
			<span itemprop="locality">San Francisco</span>, 
			<span itemprop="region">CA</span>
		</span>
		<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">
			<meta itemprop="latitude" content="37.774929" />
			<meta itemprop="longitude" content="-122.419416" />
		</span>
	</span>
</div>

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

{	
	@type: "Event",
	description: "After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest ...",
	endDate: "2015-10-15T19:00-08:00",
	location: [
		{
			@type: "​Organization"
			address: [
				{
					@type: "Address"
					locality: "San Francisco"
					region: "CA"
					street-address: "982 Market St"
				}
			]
			geo: [
				{
					@type: "​Geo"
					latitude: "37.774929"
					longitude: "-122.419416"
				}
			]
			name: "Warfield Theatre"
		}
	],
	startDate: "2015-10-15T19:00-08:00",
	url: "/spinaltap",
	summary: "Spinal Tap"
}

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 microdata; read about rich snippets and structured data