Google maps jQuery plugin load markers with RDFa 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="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.rdfa.js"></script>

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

$('#map_canvas').gmap().bind('init', function() {
	$('#map_canvas').gmap('rdfa', 'v: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.rdfa('v: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('rdfa', 'v: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 xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event"> 
	<a href="/spinaltap" rel="v:url" property="v:summary">Spinal Tap</a> 
	<span property="v:description">After their highly-publicized search for a new drummer, Spinal Tap kicks ...</span>
	When: 
	<span property="v:startDate" content="2015-10-15T19:00-08:00">Oct 15, 7:00PM</span>—
	<span property="v:endDate" content="2015-10-15T21:00-08:00">9:00PM</span>
	Where: 
	<span rel="v:location">
		<span typeof="v:Organization">
			<span property="v:name">Warfield Theatre</span>,
			<span rel="v:address">
				<span typeof="v:Address">
					<span property="v:street-address">982 Market St</span>, 
					<span property="v:locality">San Francisco</span>, 
					<span property="v:region">CA</span>
				</span>
			</span>
			<span rel="v:geo">
				<span typeof="v:Geo">
					<span property="v:latitude" content="37.774929" ></span>
					<span property="v:longitude" content="-122.419416" ></span>
				</span>
			</span>
		</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 RDFa; read about rich snippets and structured data