โค้ดและตัวอย่าง ต่อไปนี้ เป็นการใช้งาน google map แบบประยุกต์ สำหรับ
ใช้ในการระบุตำแหน่งปัจจุบัน และอัพเดท ตำแหน่งอัตโนมัติ เมื่อมีการเคลื่อนที่
หรือย้ายตำแหน่ง โดยการทำงาน จะใช้งาน 2 ส่วนที่สำคัญคือ
1. navigator.geolocation.getCurrentPosition
เพื่อกำหนดตำแหน่งปัจจุบันเริ่มต้นแค่ครั้งเดียวเมื่อเปิดแผนที่มาครั้งแรก
และจะมีการสร้างแผนที่ และ marker ครั้งแรกในส่วนนี้
2. navigator.geolocation.watchPosition
สำหรับอัพเดทตำแหน่งอัตโนมัติ โดยค่าตำแหน่งใหม่ที่อัพเดท จะได้ค่าใหม่ทุกครั้งที่
เมื่อตำแหน่งมีการเปลี่ยนแปลง และส่งค่าตำแหน่งกลับมาเรียบร้อยแล้ว นั่นหมายความว่า
ตำแหน่งใหม่ ไม่ได้ค่าทุกค่าที่เปลี่ยนแปลงโดยทันที แต่จะขึ้นกับการส่งค่ากลับมาด้วยว่า
ใช้เวลานานมากน้อยเพียงใด
ในส่วนที่สองนี้ จะมีการกำหนดตำแหน่ง marker ใหม่ ไปตามตำแหน่งที่เปลี่ยนแปลง
นอกจากนั้น ยังจะมีในส่วนของการนำค่าตำแหน่งส่งออกมาใส่แบบฟอร์ม สามารถนำไปบันทึก
หรือใช้งานอื่นๆ ได้
โค้ดที่แนะนำนี้ เหมาะกับการนำไปประยุกต์ใช้กับอุปกรณ์พกพา เช่น เมือถือ เนื่องจาก
การทำงาน จำเป็นต้องเปิดใช้งาน gps และ internet และอุปกรณ์ดังกล่าว จะต้องการ
เคลื่อนย้ายตำแหน่ง จึงจะเห็นการงานได้
ตัวอย่าง
โค้ดตัวอย่างทั้งหมด คำอธิบายแสดงในโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Track GPS ใช้งาน watchlocation </title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:550px;
height:400px;
margin:auto;
/* margin-top:100px;*/
}
</style>
</head>
<body>
<br>
<br>
<br>
<div id="map_canvas"></div>
<div id="showDD" style="margin:auto;padding-top:5px;width:550px;">
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
Latitude
<input name="lat_value" type="text" id="lat_value" value="0" /> <br />
Longitude
<input name="lon_value" type="text" id="lon_value" value="0" /> <br />
Zoom
<input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />
<br />
<input type="submit" name="button" id="button" value="บันทึก" />
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ไฟล์ script.js
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker; // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
if(navigator.geolocation){
// หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
navigator.geolocation.getCurrentPosition(function(position){
var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน
var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน
// สรัาง LatLng ตำแหน่ง สำหรับ google map
var pos = new GGM.LatLng(myPosition_lat,myPosition_lon);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 16, // กำหนดขนาดการ zoom
center: pos , // กำหนดจุดกึ่งกลาง เป็นจุดที่เราอยู่ปัจจุบัน
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
my_Marker = new GGM.Marker({ // สร้างตัว marker
position: pos, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
icon:"https://www.ninenik.com/demo/google_map/images/male-2.png",
draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, "zoom_changed", function() {
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
},function() {
// คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
});
// ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
// ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
navigator.geolocation.watchPosition(function(position){
var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน
var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน
// สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
var pos = new GGM.LatLng(myPosition_lat,myPosition_lon);
// ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
my_Marker.setPosition(pos);
var my_Point = my_Marker.getPosition(); // ดึงตำแหน่งตัว marker มาเก็บในตัวแปร
$("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
$("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน
},function() {
// คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
});
}else{
// คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
}
}
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
