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
- Google maps with jQuery mobile example
- Microformats, Google streetview and jQuery dialog example
- Click and drag events with Google geo search example
- Import markers with JSON example
- Import markers with microformats example
- Import markers with RDFa example
- Import markers with Google Fusion tables
- Multiple maps on a single page example
- Google maps and jQuery example
- Filter markers example
- Marker Clusterer Utility