Cách hiển thị vị trí hiện tại trên Google Maps bằng HTML5 Geolocation

Kết hợp HTML5 Geolocation API với Google Maps Static API để hiển thị bản đồ tĩnh tại vị trí người dùng.

Chuẩn bị: Lấy API Key miễn phí tại Google Cloud Console → APIs & Services → Credentials → Create API Key. Bật Maps Static API.

Ví dụ hoàn chỉnh

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function showLocation(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var latlong = lat + "," + lon;
        var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
          + latlong + "&zoom=14&size=400x300&key=YOUR_API_KEY_HERE";
        document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";
      }
      function errorHandler(err) {
        if (err.code == 1) alert("Lỗi: Truy cập bị từ chối!");
        else if (err.code == 2) alert("Lỗi: Vị trí không xác định!");
      }
      function getLocation() {
        if (navigator.geolocation) {
          var options = {timeout: 60000, enableHighAccuracy: true};
          navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
        } else {
          alert("Trình duyệt không hỗ trợ Geolocation!");
        }
      }
    </script>
  </head>
  <body>
    <div id="mapholder"></div>
    <form>
      <input type="button" onclick="getLocation();" value="Lấy vị trí & Hiện bản đồ"/>
    </form>
  </body>
</html>

Lưu ý: Thay YOUR_API_KEY_HERE bằng key thật. Static Map API có giới hạn miễn phí hàng ngày. Để bản đồ tương tác (zoom, pan), dùng Maps JavaScript API thay vì Static.