Cách sử dụng HTML5 Geolocation API với Google Maps

API Geolocation của HTML5 cho phép bạn chia sẻ vị trí với các trang web. JavaScript có thể lấy vĩ độ và kinh độ, gửi đến máy chủ backend để thực hiện các tác vụ nhận biết vị trí như tìm doanh nghiệp địa phương hoặc hiển thị vị trí trên bản đồ. Tọa độ geolocation chỉ định vị trí địa lý của thiết bị.

Chúng ta sẽ sử dụng phương thức getCurrentPosition() để lấy vị trí hiện tại. Để sử dụng HTML5 Geolocation với Google Maps, bạn cần thiết lập API key cho Google Static Maps API.

Truy cập Google Cloud Console để lấy API key miễn phí cho Google Maps. Thêm key này vào mã để Geolocation hoạt động với nó.

Ví dụ

Bạn có thể chạy mã sau để hiển thị vị trí hiện tại sử dụng HTML5 Geolocation với Google Maps:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      function showLocation(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var latlongvalue = position.coords.latitude + "," + position.coords.longitude;
        var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" 
                     + latlongvalue + "&zoom=14&size=400x300&key=YOUR_API_KEY";
        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 khả dụng!");
        }
      }
      function getLocation(){
        if(navigator.geolocation){
          var options = {timeout: 60000};
          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="Vị trí của bạn"/>
    </form>
  </body>
</html>

Lưu ý: Thay YOUR_API_KEY bằng API key thực tế của bạn từ Google Cloud Console.