Google maps jQuery plugin geolocation 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>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.extensions.js"></script>

$('#map_canvas').gmap().bind('init', function(evt, map) {
	$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
		if ( status === 'OK' ) {
			var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
			$('#map_canvas').gmap('addShape', 'Circle', { 
				'strokeWeight': 0, 
				'fillColor': "#008595", 
				'fillOpacity': 0.25, 
				'center': clientPosition, 
				'radius': 15, 
				'clickable': false 
			});
		}
	});   
});

$('#map_canvas').gmap({'callback': function() {
	var self = this;
	self.getCurrentPosition(function(position, status) {
		if ( status === 'OK' ) {
			var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			self.addMarker({'position': clientPosition, 'bounds': true});
			self.addShape('Circle', { 
				'strokeWeight': 0, 
				'fillColor': "#008595", 
				'fillOpacity': 0.25, 
				'center': clientPosition, 
				'radius': 15, 
				'clickable': false 
			});
		}
	});   
}});

$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
	if ( status === 'OK' ) {
		var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
		$('#map_canvas').gmap('addShape', 'Circle', { 
			'strokeWeight': 0, 
			'fillColor': "#008595", 
			'fillOpacity': 0.25, 
			'center': clientPosition, 
			'radius': 15, 
			'clickable': false 
		});
	}
});

There are many ways of writing this snippet, please refer to the sample code section in the wiki.