home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

ใช้ HTML5 Geolocation API ร่วมกับ Google Maps

HTML5 Geolocation API ให้ตำแหน่งละติจูด/ลองจิจูด สามารถนำไปแสดงบน Google Maps ได้ ต้องมี API Key จาก Google Cloud Console

ขั้นตอน

  1. ไปที่ Google Cloud Console สร้าง API Key สำหรับ Maps Static API
  2. นำ API Key ไปใส่ในโค้ด
  3. ใช้ navigator.geolocation.getCurrentPosition() ดึงตำแหน่ง
  4. สร้าง URL รูปภาพแผนที่จาก Google Static Maps API

ตัวอย่างโค้ดสมบูรณ์

<!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("Error: Access denied!");             else if(err.code == 2) alert("Error: Position unavailable!");          }          function getLocation(){             if(navigator.geolocation){                navigator.geolocation.getCurrentPosition(showLocation, errorHandler, {timeout:60000});             } else alert("Browser doesn't support geolocation!");          }       </script>    </head>    <body>       <div id="mapholder"></div>       <form>          <input type="button" onclick="getLocation();" value="Your Location"/>       </form>    </body> </html>

หมายเหตุ: ต้องแทนที่ YOUR_API_KEY ด้วย API Key จริงจาก Google Cloud Console