This example shows a meta data mapping similar to the plugin jMapping.
-
Florida DrupalCamp - Feb 11 2012
-
DrupalCamp Singapore - Mar 03 2012
-
DrupalCon 2012 Denver - Mar 20 2012
-
DrupalCamp Nashville - Apr 28 2012
-
DrupalCamp Copenhagen 5.0 - May 11 2012
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>
$('#map_canvas').gmap().bind('init', function(ev, map) {
$("[data-gmapping]").each(function(i,el) {
var data = $(el).data('gmapping');
$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) {
$(el).click(function() {
$(marker).triggerEvent('click');
});
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').text() }, this);
});
});
});
There are many ways of writing this snippet, please refer to the sample code section in the wiki.