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