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:
—
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