HTML5 Geolocation

ในบทที่แล้ว เราได้สำรวจ HTML SVG เพื่อสร้างกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้บนเว็บเพจของเรา ในบทนี้ เราจะเปลี่ยนมาดูอีกหนึ่งความสามารถที่น่าสนใจของ HTML5 นั่นคือ Geolocation API ซึ่งช่วยให้เราเข้าถึงข้อมูลตำแหน่งทางภูมิศาสตร์ของผู้ใช้ได้โดยตรง ทำให้เราสามารถสร้างเว็บแอปพลิเคชันที่ตอบสนองต่อตำแหน่งของผู้ใช้ได้อย่างชาญฉลาด เช่น การแสดงแผนที่ร้านค้าใกล้เคียง, การคำนวณเส้นทางการเดินทาง, หรือการปรับเนื้อหาตามพื้นที่ที่ผู้ใช้อยู่

Geolocation API คืออะไร?

Geolocation API เป็นส่วนหนึ่งของ HTML5 ที่ช่วยให้เว็บแอปพลิเคชันสามารถเข้าถึงข้อมูลตำแหน่งทางภูมิศาสตร์ของผู้ใช้ได้ โดยข้อมูลนี้มักจะมาจาก GPS, Wi-Fi, หรือข้อมูลเครือข่ายมือถือ แล้วส่งกลับมาในรูปแบบของละติจูด (Latitude) และลองจิจูด (Longitude) ซึ่งเป็นพิกัดบนพื้นโลก

ข้อควรระวัง: การเข้าถึงข้อมูลตำแหน่งของผู้ใช้เป็นเรื่องที่ละเอียดอ่อนและเกี่ยวข้องกับความเป็นส่วนตัวอย่างมาก ดังนั้น ก่อนที่จะเริ่มใช้งาน Geolocation API เราต้องขออนุญาตจากผู้ใช้ก่อนเสมอ และอธิบายให้ชัดเจนว่าเราจะนำข้อมูลตำแหน่งไปใช้อย่างไร

การขออนุญาตเข้าถึงตำแหน่งจากผู้ใช้

ก่อนที่เราจะสามารถเข้าถึงข้อมูลตำแหน่งของผู้ใช้ได้ เราต้องขออนุญาตจากผู้ใช้ก่อน โดยเบราว์เซอร์จะแสดงป๊อปอัปให้ผู้ใช้เลือกว่าจะอนุญาตหรือปฏิเสธการเข้าถึงตำแหน่ง

โค้ด JavaScript ต่อไปนี้แสดงวิธีการขออนุญาตเข้าถึงตำแหน่ง:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    successCallback,
    errorCallback,
    options
  );
} else {
  alert("Geolocation is not supported by this browser.");
}

คำอธิบาย:

• navigator.geolocation: เป็นอ็อบเจ็กต์ที่ใช้ในการเข้าถึง Geolocation API
• navigator.geolocation.getCurrentPosition(): เป็นฟังก์ชันที่ใช้ในการขอข้อมูลตำแหน่งปัจจุบันของผู้ใช้ ฟังก์ชันนี้รับพารามิเตอร์ 3 ตัว:
  • successCallback: ฟังก์ชันที่จะถูกเรียกเมื่อการเข้าถึงตำแหน่งสำเร็จ
  • errorCallback: ฟังก์ชันที่จะถูกเรียกเมื่อเกิดข้อผิดพลาดในการเข้าถึงตำแหน่ง
  • options: อ็อบเจ็กต์ที่ใช้กำหนดค่าเพิ่มเติมในการเข้าถึงตำแหน่ง (เช่น ความแม่นยำ, ระยะเวลาในการรอข้อมูล)

การใช้ navigator.geolocation.getCurrentPosition()

เมื่อผู้ใช้อนุญาตให้เข้าถึงตำแหน่งแล้ว ฟังก์ชัน successCallback จะถูกเรียกพร้อมกับอ็อบเจ็กต์ position ที่มีข้อมูลตำแหน่งของผู้ใช้

ตัวอย่างโค้ดแสดงวิธีการดึงข้อมูลตำแหน่งจากอ็อบเจ็กต์ position:

function successCallback(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const accuracy = position.coords.accuracy;

  console.log("Latitude: " + latitude);
  console.log("Longitude: " + longitude);
  console.log("Accuracy: " + accuracy);

  // นำข้อมูลตำแหน่งไปใช้ประโยชน์ เช่น แสดงบนแผนที่
}

คำอธิบาย:

• position.coords.latitude: คือค่าละติจูดของตำแหน่ง
• position.coords.longitude: คือค่าลองจิจูดของตำแหน่ง
• position.coords.accuracy: คือค่าความแม่นยำของตำแหน่ง (ในหน่วยเมตร)

นอกจากนี้ อ็อบเจ็กต์ position.coords ยังมีคุณสมบัติอื่นๆ เช่น altitude (ความสูง), altitudeAccuracy (ความแม่นยำของความสูง), heading (ทิศทางการเคลื่อนที่), และ speed (ความเร็วในการเคลื่อนที่) ซึ่งคุณสามารถนำไปใช้ได้ตามความเหมาะสม

การจัดการข้อผิดพลาดในการเข้าถึงตำแหน่ง

การเข้าถึงข้อมูลตำแหน่งอาจไม่สำเร็จเสมอไป อาจมีสาเหตุหลายประการ เช่น ผู้ใช้ปฏิเสธการเข้าถึง, อุปกรณ์ไม่สามารถระบุตำแหน่งได้, หรือเกิดข้อผิดพลาดในการเชื่อมต่อ ดังนั้น เราจึงต้องเตรียมพร้อมสำหรับการจัดการข้อผิดพลาดเหล่านี้

ตัวอย่างโค้ดแสดงวิธีการจัดการข้อผิดพลาดในการเข้าถึงตำแหน่ง:

function errorCallback(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}

คำอธิบาย:

• error.code: คือรหัสข้อผิดพลาดที่ระบุสาเหตุของการเกิดข้อผิดพลาด
• error.PERMISSION_DENIED: ผู้ใช้ปฏิเสธการเข้าถึงตำแหน่ง
• error.POSITION_UNAVAILABLE: ไม่สามารถระบุตำแหน่งได้
• error.TIMEOUT: การเข้าถึงตำแหน่งใช้เวลานานเกินไป
• error.UNKNOWN_ERROR: เกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ

เราสามารถใช้รหัสข้อผิดพลาดเหล่านี้เพื่อแสดงข้อความแจ้งเตือนที่เหมาะสมให้กับผู้ใช้

ตัวเลือกในการเข้าถึงตำแหน่ง (Options)

เราสามารถกำหนดค่าเพิ่มเติมในการเข้าถึงตำแหน่งได้โดยการส่งอ็อบเจ็กต์ options เป็นพารามิเตอร์ตัวที่สามให้กับฟังก์ชัน navigator.geolocation.getCurrentPosition()

ตัวอย่างโค้ดแสดงวิธีการกำหนดค่า options:

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  options
);

คำอธิบาย:

• enableHighAccuracy: กำหนดว่าจะให้ความสำคัญกับความแม่นยำของตำแหน่งหรือไม่ (ค่าเริ่มต้นคือ false) หากตั้งค่าเป็น true อุปกรณ์จะพยายามใช้ GPS เพื่อระบุตำแหน่ง ซึ่งอาจใช้พลังงานมากขึ้น
• timeout: กำหนดระยะเวลาสูงสุดในการรอข้อมูลตำแหน่ง (ในหน่วยมิลลิวินาที) หากเกินระยะเวลาที่กำหนด ฟังก์ชัน errorCallback จะถูกเรียก (ค่าเริ่มต้นคือ Infinity)
• maximumAge: กำหนดระยะเวลาสูงสุดที่ข้อมูลตำแหน่งที่แคชไว้สามารถนำกลับมาใช้ได้ (ในหน่วยมิลลิวินาที) หากข้อมูลตำแหน่งที่แคชไว้มีอายุเกินกว่าที่กำหนด อุปกรณ์จะพยายามระบุตำแหน่งใหม่อีกครั้ง (ค่าเริ่มต้นคือ 0)

ความสำคัญของความเป็นส่วนตัวในการเข้าถึงข้อมูลตำแหน่ง

การเข้าถึงข้อมูลตำแหน่งของผู้ใช้เป็นเรื่องที่ละเอียดอ่อนและเกี่ยวข้องกับความเป็นส่วนตัวอย่างมาก ดังนั้น เราจึงต้องคำนึงถึงประเด็นเหล่านี้เสมอ:

• ขออนุญาตจากผู้ใช้เสมอ: ก่อนที่จะเข้าถึงข้อมูลตำแหน่งของผู้ใช้ เราต้องขออนุญาตจากผู้ใช้ก่อนเสมอ และอธิบายให้ชัดเจนว่าเราจะนำข้อมูลตำแหน่งไปใช้อย่างไร
• ใช้ข้อมูลตำแหน่งเท่าที่จำเป็น: เราควรใช้ข้อมูลตำแหน่งเฉพาะเมื่อจำเป็นเท่านั้น และไม่ควรเก็บข้อมูลตำแหน่งไว้นานเกินความจำเป็น
• รักษาความปลอดภัยของข้อมูล: เราต้องรักษาความปลอดภัยของข้อมูลตำแหน่งของผู้ใช้ให้ดี และป้องกันไม่ให้ข้อมูลรั่วไหลหรือถูกนำไปใช้ในทางที่ผิด
• ให้ทางเลือกแก่ผู้ใช้: เราควรให้ผู้ใช้มีทางเลือกในการควบคุมการเข้าถึงข้อมูลตำแหน่งของตนเอง เช่น ผู้ใช้สามารถปิดการใช้งาน Geolocation ในเบราว์เซอร์ได้

ตัวอย่างการใช้งาน Geolocation API

ลองพิจารณาตัวอย่างการใช้งาน Geolocation API เพื่อแสดงตำแหน่งปัจจุบันของผู้ใช้บนแผนที่ Google Maps:

<!DOCTYPE html>
<html>
<head>
  <title>Geolocation Example</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    let map;

    function initMap() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            };

            map = new google.maps.Map(document.getElementById("map"), {
              center: pos,
              zoom: 15,
            });

            new google.maps.Marker({
              position: pos,
              map: map,
              title: "Your Location",
            });
          },
          () => {
            alert("Error: The Geolocation service failed.");
          }
        );
      } else {
        alert("Error: Your browser doesn't support geolocation.");
      }
    }
  </script>
  <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"
    async
    defer
  </script>
</body>
</html>

คำอธิบาย:

• โค้ดนี้ใช้ Google Maps JavaScript API เพื่อแสดงแผนที่
• ฟังก์ชัน initMap() จะถูกเรียกเมื่อ Google Maps API โหลดเสร็จ
• ภายในฟังก์ชัน initMap() เราจะใช้ navigator.geolocation.getCurrentPosition() เพื่อขอข้อมูลตำแหน่งของผู้ใช้
• เมื่อได้ข้อมูลตำแหน่งแล้ว เราจะสร้างแผนที่ Google Maps และวาง Marker ที่ตำแหน่งของผู้ใช้
• สำคัญ: อย่าลืมใส่ Google Maps API key ของคุณใน src ของ <script> tag

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ HTML5 Geolocation API ซึ่งเป็นเครื่องมือที่มีประโยชน์ในการสร้างเว็บแอปพลิเคชันที่ตอบสนองต่อตำแหน่งของผู้ใช้ เราได้เรียนรู้วิธีการขออนุญาตเข้าถึงตำแหน่ง, การใช้ navigator.geolocation.getCurrentPosition(), การจัดการข้อผิดพลาด, และความสำคัญของความเป็นส่วนตัวในการเข้าถึงข้อมูลตำแหน่ง

ในบทต่อไป เราจะมาสำรวจ HTML5 Web Storage ซึ่งเป็นเทคโนโลยีที่ช่วยให้เราสามารถเก็บข้อมูลไว้ในเบราว์เซอร์ของผู้ใช้ได้ เพื่อให้เว็บแอปพลิเคชันของเราทำงานได้เร็วยิ่งขึ้นและสามารถทำงานแบบออฟไลน์ได้