Google maps jQuery basic example

Using jquery with Google maps

Download jQuery 1.8.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="js/jQuery.ui/jquery.ui.map.js"></script>
$('#map_canvas').gmap().bind('init', function(ev, map) {
	$('#map_canvas').gmap('addMarker', {'position': '55.693403,12.583046', 'bounds': true}).click(function() {
		$('#map_canvas').gmap('openInfoWindow', {'content': 'You are in Copenhagen !'}, 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': '55.693403,12.583046', 'bounds': true}).click(function() {
		self.openInfoWindow({'content': 'You are in Copenhagen !'}, 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': '55.693403,12.583046', 'bounds': true});
$marker.click(function() {
	$('#map_canvas').gmap('openInfoWindow', {'content': 'You are in Copenhagen !'}, this);
});
// If you dont add a constructor ($('#map_canvas').gmap({'some_option':'some_value'});) the plugin will auto initialize 
$('#map_canvas').gmap('addMarker', {'position': '55.693403,12.583046', 'bounds': true}).click(function() {
	$('#map_canvas').gmap('openInfoWindow', {'content': 'You are in Copenhagen !'}, this);
});