Как лучше всего отобразить точность геолокации HTML5 на карте Google

Question

Я бы хотел:

1. собрать широту, долготу и точность пользователя, используя HTML5
2. отобразить это на карте Google в виде точки
3. изменить размер точки и, действительно, масштаб карты, чтобы отразить точность положения.

Это должно быть возможно, но я еще не видел, чтобы кто-нибудь реализовал это.

Answer 1

Должно быть возможно. Согласно этой статье объект позиции HTML5 возвращает свойство точности в метрах.

API карты Google имеет возможность рисовать круги по центральной точке (широта, долгота) и радиусу в метрах.

Я думаю что-то вроде этого:

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());

Answer 2

    var circle;

    function initialize() {
       // Create the map.
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        var populationOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 100
        };
        // Add the circle for this city to the map.
        circle = new google.maps.Circle(populationOptions);
    }

Источник: Документация Google