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.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