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.