Google maps jQuery plugin load markers with microdata example

Psy-Trance innovators Infected Mushroom have become one of the biggest electronic bands on the planet. Twice ranked among the world’s 10 best DJs by the bible of the scene, the U.K.’s DJ Magazine, the Israel-bred, L.A. based duo bring a frenetic rock energy to the form. Their explosive show, featuring guitars, live drums, intensely passionate vocals and an ambitious multimedia backdrop, ranks among the genre’s most unpredictably joyous events. And their recordings continually venture where other electronic acts fear to tread. When: Where: Beyond Wonderland 689 S E St, San Bernardino, CA Event website: http://www.beyond-wonderland.com/ Buy tickets at http://www.beyondwonderland.com/SOCAL/tickets.php

Starscape 2011 is the thirteenth annual Starscape Festival, and will be held on Saturday June 4, 2011 at Fort Armistead Park in Baltimore, MD. The event features five stages of music and entertainment, mixing live acts, djs, and visual performances. The event begins at 2 p.m. on Saturday afternoon, and runs continuously through until 6 a.m. on Sunday morning, culminating in the sunrise over the Chesapeake Bay. When: Where: Starscape Festival Fort Armistead Park, Baltimore, MD Event website: http://www.starscapefestival.com/ Buy tickets at http://www.starscapefestival.com/

Using jquery with Google maps

Download jQuery 1.4.X or higher and jQuery UI 1.8.X or higher or use Googles or Microsofts CDN.

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#map_canvas').gmap({ 'center': new google.maps.LatLng(39.2083424, -76.53943019999997), 'navigationControl': false, 'streetViewControl': false, 'callback': function () {
                $('#map_canvas').gmap('loadMetadata', 'microdata', 'http://data-vocabulary.org/Event', function(i, item, result) {
                    var latlng = new google.maps.LatLng(result.properties.location[0].properties.geo[0].properties.latitude[0], result.properties.location[0].properties.geo[0].properties.longitude[0]);
                    $('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': latlng, 'animation': google.maps.Animation.DROP }, function(map, marker){
                        var content = '<div class="iw"><img class="iw-photo shadow-all" src="'+result.properties.photo[0]+'"/><h1 class="iw-summary">'+result.properties.summary[0]+'</h1><p class="iw-description">'+result.properties.description[0]+'</p><div class="clear"><div></div>';
                        var iw = $('#map_canvas').gmap('addInfoWindow', { 'position':marker.getPosition(), 'content': content }, function(iw) {
                            $(marker).click(function() {
                                iw.open(map, marker);
                                map.panTo(marker.getPosition());
                            });																												  
                        });
                        $(item).addClass('clickable');
                        $(item).click(function() {
                            $(marker).triggerEvent('click');
                            return false;
                        });
                    });																	 
                });
            }
        });
	});
</script>

More Google maps and jQuery examples

Author: Johan Säll Larsson Göteborg, Sweden