Google maps jQuery plugin basic example

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.