BlogTechnology

Google Map API / Geolocation

Geolocation   เป็นการระบุพิกัด latitude, longitude ในแผนที่ภูมิศาสตร์หรือพิกัดของโลก ด้วยคำสั่ง javascript  โดยผ่านเครื่องมือที่สามารถต่อเชื่อมต่ออินเตอร์เน็ต ความแม่นยำขึ้นอยู่กับอุปกรณ์ที่ใช้เปิดเว็บไซต์ เช่น โทรศัพท์มือถืออย่าง android, iphone จะมี gps ให้ใช้ และ gps นี้จะช่วยให้ระบุพิกัดได้อย่างแม่นยำมาก

โค้ดสร้าง Google map / geolocaion บน web application

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      } #กำหนดความสูงของเเผนที่
    </style>
  </head>
  <body>
    <div id="map"></div> #google map เเสดงแผนที่
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644}, #กำหนดค่า center เริ่มต้นเเผนที่
    zoom: 6 #กำหนดค่า zoom เริ่มต้นเเผนที่
  });
  var infoWindow = new google.maps.InfoWindow({map: map}); #สร้างกล่องข้อความ

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }; #location พิกัดที่เราอยู่

      infoWindow.setPosition(pos); #เเสดงกล่องข้อความที่เราอยู่
      infoWindow.setContent('Location found.'); #ข้อความที่เเสดงในกล่องข้อความ
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
        async defer>
    </script> #google api
  </body>
</html>

ศึกษาเพิ่มเติมได้ที่ >>>>> https://developers.google.com/maps