ปักหมุดแผนที่แสดงตำแหน่งปัจจุบันด้วย GPS และ Google Geocoding

bysemicon -
0

 

DEMO:  Project Kru Chian

ดูรายละเอียดเพิ่มเติม การใช้งาน navigator.geolocation.getCurrentPosition ใน JavaScript

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet.js with GPS and Google Geocoding</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      flex-direction: column;
      font-family: Arial, sans-serif;
    }

    #map {
      width: 100%;
      height: 500px;
      margin-bottom: 20px;
    }

    h1 {
      text-align: center;
    }

    #location-info {
      text-align: center;
      font-size: 1.2em;
    }
  </style>

</head>

<body>
  <div class="text-center">
    <h1>แผนที่แสดงตำแหน่งปัจจุบันด้วย GPS และ Google Geocoding</h1>
    <div id="map"></div>
    <p id="location-info">กำลังค้นหาตำแหน่งปัจจุบัน...</p>
  </div>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([13.7563, 100.5018], 10); // พิกัดเริ่มต้นที่ประเทศไทย
    
    // เพิ่มแผนที่พื้นหลังจาก OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // ตรวจสอบว่า Geolocation ใช้งานได้หรือไม่
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        position => {
          const { latitude, longitude } = position.coords;

          // แสดงตำแหน่งในแผนที่
          const marker = L.marker([latitude, longitude]).addTo(map);
          map.setView([latitude, longitude], 16);

          // ดึงข้อมูลที่อยู่จาก Google Apps Script
          google.script.run.withSuccessHandler((data) => {
            const address = data.address || 'ไม่พบข้อมูลที่อยู่';
            // แสดงที่อยู่ในหน้าจอ
            document.getElementById('location-info').innerHTML = `ที่อยู่ปัจจุบัน:<br>${address}`;

            // เพิ่มข้อมูลที่อยู่ใน Popup ของ Marker
            marker.bindPopup(`ตำแหน่งของคุณ<br>${address}`).openPopup();
          }).withFailureHandler(() => {
            document.getElementById('location-info').textContent = 'ไม่สามารถดึงที่อยู่จาก Google API';
          }).getAddressFromCoordinates(latitude, longitude);
        },
        error => {
          alert('ไม่สามารถดึงตำแหน่งได้: ' + error.message);
          document.getElementById('location-info').textContent = 'ไม่สามารถดึงตำแหน่งปัจจุบันได้';
        }
      );
    } else {
      document.getElementById('location-info').textContent = 'เบราว์เซอร์ของคุณไม่รองรับ Geolocation';
    }
  </script>
</body>

</html>


code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

function getAddressFromCoordinates(lat, lng) {
  // ใช้ Geocoding API ของ Google
  const geocoder = Maps.newGeocoder().setRegion('th').setLanguage('th');
  const response = geocoder.reverseGeocode(lat, lng);
  
  if (response.status == 'OK' && response.results.length > 0) {
    const address = response.results[0].formatted_address;
    return { address: address };
  } else {
    return { address: 'ไม่พบข้อมูลที่อยู่' };
  }
}
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า