Hiển thị độ chính xác Geolocation HTML5 trên Google Maps

API Geolocation HTML5 trả về position.coords.accuracy (bán kính độ chính xác tính bằng mét). Để hiển thị trực quan trên Google Maps, vẽ một Circle với bán kính bằng giá trị này.

Mã mẫu hoàn chỉnh

function showPosition(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var accuracy = position.coords.accuracy; // mét

  var center = new google.maps.LatLng(lat, lng);

  // Marker vị trí trung tâm
  var marker = new google.maps.Marker({
    position: center,
    map: map,
    title: "Vị trí của bạn"
  });

  // Vẽ vòng tròn độ chính xác
  var accuracyCircle = new google.maps.Circle({
    center: center,
    radius: accuracy,
    map: map,
    fillColor: "#0000FF",
    fillOpacity: 0.1,
    strokeColor: "#0000FF",
    strokeOpacity: 0.5,
    strokeWeight: 1
  });

  // Zoom map vừa đủ chứa vòng tròn
  map.fitBounds(accuracyCircle.getBounds());
}

Giải thích

• accuracy là bán kính (radius) của vùng tin cậy 95% (theo spec W3C).
• Circle của Google Maps API vẽ hình tròn trên mặt phẳng bản đồ (Mercator projection).
• fitBounds() tự động điều chỉnh zoom/center để vòng tròn hiển thị trọn vẹn.

Mã trong bài gốc thiếu khai báo biến map và có lỗi cú pháp (thiếu giá trị cho map:, icon:...). Đoạn mã trên đã được sửa lỗi và hoàn chỉnh.