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) { $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this); }); });
// In the callback you can use "this" to call a function (e.g. this.get('map') instead of $('#map_canvas').gmap('get', 'map')) $('#map_canvas').gmap({'callback': function() { var self = this; // we can't use "this" inside the click function (that refers to the marker object in this example) self.addMarker({'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { self.openInfoWindow({'content': 'Hello World!'}, this); }); }});
$('#map_canvas').gmap({'some_option':'some_value'}); // Add the contructor // addMarker returns a jQuery wrapped google.maps.Marker object var $marker = $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}); $marker.click(function() { $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this); });
// If you dont add a constructor ($('#map_canvas').gmap({'some_option':'some_value'});) the plugin will auto initialize $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this); });
There are many ways of writing this snippet, please refer to the sample code section in the wiki.