jQuery UI Map Current Position Marker with Accuracy

Question

Is it possible in a PhoneGap application using jQuery UI Map, to set the current position as a blue dot with the blue radius around it for the accuracy as it happens with the native Google Maps application in Android ?

If so, how can I achieve that

Answer 1

Found a work around by create a Circle overlay with the accuracy value found inside position object

Here is the full code (don't forget to add the reference to this file jquery.ui.map.overlays.js)

function locSuccess(position) {

//Set the current position as a Google Maps object
var newPoint = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

//Get the marker with the current position
var myPos = $('#map_canvas').gmap('get', 'markers')['myPos'];

//If there is no marker (first time position)
if(!myPos) {
    //Create a new marker
    $('#map_canvas').gmap('addMarker', {
        'id':'myPos',
        'position':newPoint,
        'icon' : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    });
    //Create the accuracy circle 
    $('#map_canvas').gmap('addShape', 'Circle', { 'strokeColor': "#86A9F4", 'strokeOpacity': 0.85, 'strokeWeight': 2, 'fillColor': "#C2D0F1", 'fillOpacity': 0.25, 'center': newPoint, 'radius': position.coords.accuracy });
} else {
    //If there is already a marker, update the position
    myPos.setPosition(newPoint); 
    //Update the circle radius and position (I only have 1 Circle, but this code should be improved)
    var circlePos = $('#map_canvas').gmap('get', 'overlays > Circle')[0];
    circlePos.setCenter(newPoint);
    circlePos.setRadius(position.coords.accuracy);
}

    $('#map_canvas').gmap('refresh');
}