How to best display HTML5 geolocation accuracy on a google map

Question

I'd like to:

1. gather the latitude, longitude and accuracy of a user using HTML5
2. display that in a google map as a dot
3. change the size of the dot and indeed scale of the map to reflect the accuracy of the position.

This should be possible, but I have yet to see anyone implement this.

Answer 1

Should be possible. According to this article the HTML5 position object returns the accuracy property in meters.

The google map api has the ability to draw circles given a center point (lat, lng) and a radius in meters.

I am thinking something like this:

var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;

var centerPosition = new google.maps.LatLng(latitude, longitude);

var marker = new google.maps.Marker({
   position: centerPosition,
   map: //your map,
   icon: //the dot icon
});

var circle = new google.maps.Circle({
    center: centerPosition,
    radius: accuracy,
    map: //your map,
    fillColor: //color,
    fillOpacity: //opacity from 0.0 to 1.0,
    strokeColor: //stroke color,
    strokeOpacity: //opacity from 0.0 to 1.0
});

//set the zoom level to the circle's size
map.fitBounds(circle.getBounds());