1. คลิกที่ ปุ่ม "ระบุตำแหน่ง" จะมีการเรียกขอเข้าถึงตำแหน่งก่อน ให้ "อนุญาติ"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col g-3">
<label class="form-label">ตำแหน่งสถานที่ <font color='red'> * </font></label>
</div>
<div class="row">
<div class="col">
<input name="lat" type="text" id="lat" class="form-control form-control-border"
onkeyup="check_char2(this)" required placeholder="ใส่ ลองจิจูด ">
</div>
<div class="col">
<input name="lng" type="text" id="lng" class="form-control form-control-border"
onkeyup="check_char2(this)" required placeholder="ใส่ ละติจูด ">
</div>
<div class="col-md-auto">
<a target="_blank" id="href_lat_lng" type="button" class="btn btn-default">ดูแผนที่</i></a>
</div>
<div class="col col-lg-2">
<button type="button" onclick="getLocation()" class="btn btn-primary">ระบุตำแหน่ง</button>
</div>
</div>
<div class="row g-3" id="mapholder"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- google map api -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyB_65EZp4m5CqAsUCM5DFDQUyD7ssklrzo"></script>
<script>
var x = document.getElementById("demo");
var a = document.getElementById("a");
var b = document.getElementById("b");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "เบราว์เซอร์นี้ไม่รองรับการระบุตำแหน่งทางภูมิศาสตร์";
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlon = new google.maps.LatLng(lat, lon)
var latlon2 = position.coords.latitude + "," + position.coords.longitude;
var mapholder = document.getElementById('mapholder')
mapholder.style.height = '500px';
mapholder.style.width = '100%';
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: "คุณอยู่ที่นี่!"
});
var lat_lng = marker.getPosition();
$("#lat").val(lat_lng.lat());
$("#lng").val(lat_lng.lng());
document.getElementById("href_lat_lng").href = "https://www.google.com/maps/place/" + latlon2 + "";
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "ผู้ใช้ปฏิเสธคำขอ Geolocation"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "ข้อมูลตำแหน่งไม่พร้อมใช้งาน"
break;
case error.TIMEOUT:
x.innerHTML = "คำขอเพื่อรับตำแหน่งของผู้ใช้หมดเวลา"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "เกิดข้อผิดพลาดที่ไม่รู้จัก"
break;
}
}
</script>
</body>
</html>
