หรือการแสดงเส้นทางที่เดินทางผ่านมา ( GPS Tracking ) ลงใน google map นั้น เราสามารถวาดเส้นได้ดังตัวอย่างต่อไปนี้
<!-- แผนที่ -->
<div id="map_canvas" style="width: 100%; height: 400px;"></div>
<!-- กำหนดความกว้างยาวแผนนที่ -->
<script>
var map;//ประกาศตัวแปรสำหรับ object แผนที่
var mapOptions = { //สร้างรูปแบบแผนที่
zoom: 17,//ระดับการ zoom
center: new google.maps.LatLng(13.827214295610263,100.52855014801025),
//ตำแหน่งกึงกลางแผนที่
mapTypeId: google.maps.MapTypeId.ROADMAP //ให้แสดงแบบแผนที่ถนน
}
//วาดแผนที่ที่ <div id="map_canvas" style="width: 100%; height: 300px;"></div>
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//mapOptions คือ รูปแบบแผนที่ zoom กึ่งกลาง
//สร้างตัวแปร array เก็บ json object ตำแหน่ง ของเส้นที่จะแสดง
var json = [
{lat: 13.827214295610263, lng: 100.52855014801025},
{lat: 13.828115444270011, lng: 100.52851259708405},
{lat: 13.82850611457026, lng: 100.52838385105133},
{lat: 13.828693636081475, lng: 100.52819609642029},
{lat: 13.828818650338372, lng: 100.52801370620728},
{lat: 13.828933246681515, lng: 100.528324842453},
{lat: 13.829110350009977, lng: 100.52865743637085}
];
var line = new google.maps.Polyline({ //สร้าง object เส้นของ google map
path: json,//ข้อมูลเส้นทาง
strokeColor: '#FF0000',//สีของเส้น
strokeWeight: 2 //ความหานของเส้น
});
line.setMap(map);//กำหนดให้ แสดงเส้นในแผนที่
</script>
ผลลัพธ์ที่ได้ google map จะแสดงเส้นดังรูป
