การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น

by
Post Views: 3,776

          หลังจากที่ก่อนหน้านี้ ผู้เขียนเคยได้มีโอกาสศึกษาบทความเกี่ยวกับความสามารถของ Google Map APIs มาบ้างแล้วนั้น ผู้เขียนเห็นว่าเรื่องเกี่ยวกับแผนที่นับเป็นอีกหัวข้อที่น่าสนใจในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะเว็บไซต์ที่มีส่วนเกี่ยวข้องกับสถานที่ และที่ตั้ง เพราะถือเป็นการเพิ่มลูกเล่นให้มีความตื่นตาตื่นใจยิ่งขึ้น โดยความสามารถของแผนที่ที่ใน Google Map APIs มีมาให้ใช้กันได้ในหลายรูปแบบ ขึ้นอยู่กับความต้องการของผู้พัฒนาแต่ละคน อาทิ การกำหนดพิกัดจุด การแสดงเส้นทาง การค้นหาละติจูด-ลองจิจูดจากการคลิกบนแผนที่ หรือจนกระทั่งการดึงพิกัดมาจากฐานข้อมูลเพื่อมาแสดงผล เป็นต้น โดยในความเป็นจริงแล้ว ลูกเล่นเกี่ยวกับการทำงานกับแผนที่ยังมีอีกมากมาย แต่ในบทความนี้ ผู้เขียนจะขอพูดถึงในส่วนของการแสดงเส้นทางระหว่างจุดสองจุดในแบบเบื้องต้นเพื่อทำความเข้าใจก่อนนำไปประยุกต์ใช้ ดังนี้

การแสดงเส้นทางโดยเบื้องต้นเมื่อทราบจุดพิกัดละติจูด-ลองจิจูดบนแผนที่

  1. อ้างอิงไฟล์ที่ใช้ในการทำงานร่วมกับ Google Map APIs 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en" async defer></script>
  2. ส่วนของ Javascript ที่ใช้ในการแสดงเส้นทางระหว่างพิกัด 2 จุดบนแผนที่ 
    <script type="text/javascript">
/////////การกำหนดค่าละติจูด-ลองจิจูดระหว่าง 2 ตำแหน่ง ในที่นี้คือ มหาวิทยาลัยสงขลานครินทร์ และสวนสาธารณะหาดใหญ่
var markers = [
 {
 "title": 'มหาวิทยาลัยสงขลานครินทร์',
 "lat": '7.006941', 
 "lng": '100.498412',
 "description": '<b>มหาวิทยาลัยสงขลานครินทร์:</b> (อังกฤษ: Prince of Songkla University; อักษรย่อ: ม.อ.) เป็นมหาวิทยาลัยแห่งแรกในภาคใต้ของประเทศไทย ตาม พระราชบัญญัติมหาวิทยาลัยสงขลานครินทร์ พ.ศ. ๒๕๑๑ ก่อตั้งในปี พ.ศ. 2510 ต่อมา พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดชได้พระราชทานชื่อเมื่อวันที่ 22 กันยายน พ.ศ. 2510 จึงถือว่าวันที่ 22 กันยายนของทุกปี เป็นวันสงขลานครินทร์'
 }
 ,
 {
 "title": 'สวนสาธารณะหาดใหญ่',
 "lat": '7.042899', 
 "lng": '100.507664',
 "description": '<b>สวนสาธารณะเทศบาลนครหาดใหญ่:</b> เป็นแหล่งพักผ่อนหย่อนใจของคนเมืองแห่งนี้ มีทัศนียภาพที่สวยงาม เต็มไปด้วยด้วยแมกไม้เขียวขจี มีอ่างเก็บน้ำขนาดใหญ่ สัตว์น้ำนานาชนิดมากมาย สมบูรณ์ด้วยธรรมชาติอันบริสุทธิ์ ที่รอคอยต้อนรับนักท่องเที่ยวให้ได้สัมผัสกับความร่มรื่นของพรรณไม้นานาชนิด'
 }
 
 ];
///////เป็นการกำหนดค่าต่างๆตอนที่ฟอร์มมีการโหลด

window.onload = function () {

//////กำหนดค่ากึ่งกลางการแสดงผลแผนที่ ระยะใกล้ และชนิดการแสดงผลของแผนที่
 var mapOptions = {
 center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
 zoom: 10,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

//////ประกาศ Element ที่จะใช้ในการแสดงผล
 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow();

 var lat_lng = new Array(); ///สร้างตัวแปรอาร์เรย์เพื่อเก็บค่าละติจูด-ลองจิจูด
 var latlngbounds = new google.maps.LatLngBounds();

/// วนพื่อเก็บค่าละติจูด-ลองจิจูดในตัวแปรอาร์เรย์ และเก็บค่าในการพิกัดจุดของแต่ละจุดที่มี
 for (i = 0; i < markers.length; i++) {
 var data = markers[i]
 var myLatlng = new google.maps.LatLng(data.lat, data.lng);
 lat_lng.push(myLatlng);


 var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 title: data.title
 });

 latlngbounds.extend(marker.position);

//////กำหนดเมื่อมีอีเวนต์คลิก ให้แสดงผลรายละเอียดที่กำหนดไว้ในตัวแปรของ marker ที่กำหนดไว้ในแต่ละตำแหน่ง
 (function (marker, data) {
 google.maps.event.addListener(marker, "click", function (e) {
 infoWindow.setContent(data.description);
 infoWindow.open(map, marker);
 });
 })(marker, data);
 }
 map.setCenter(latlngbounds.getCenter());
 map.fitBounds(latlngbounds);
 
 //***********ส่วนของการแสดงเส้นทาง****************//
 
 //ประกาศ Path Array
 var path = new google.maps.MVCArray();
 
 //ประกาศการใช้งาน Direction Service
 var service = new google.maps.DirectionsService();
 
 //กำหนดสีของเส้นทางที่ต้องการ
 var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
 
 //วนลูปเพื่อวาดเส้นทางระหว่างจุดที่มีในแผนที่
 for (var i = 0; i < lat_lng.length; i++) {
 if ((i + 1) < lat_lng.length) {
 var src = lat_lng[i];
 var des = lat_lng[i + 1];
 path.push(src);
 poly.setPath(path);
 service.route({
 origin: src,
 destination: des,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
/////กำหนด Mode ในการแสดงผลเส้นทาง(จะกล่าวเพิ่มเติมในภายหลัง)
 }, function (result, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) 
{
 path.push(result.routes[0].overview_path[i]);
 }
 }
 });
 }
 }

</script>
  3. ส่วนของ body ในการแสดงผล 
    <body>
 <form id="form1" runat="server">
<div id="dvMap" style="width: 500px; height: 500px">
</div>
 </form>
</body>
  4. ตัวอย่างผลลัพธ์ที่ได้ หมายเหตุ: หากต้องการเปลี่ยนสีเส้นทางในการแสดงผล สามารถทำได้โดยการกำหนดสี จากโค้ดดังตัวอย่าง คือ
    var poly = new google.maps.Polyline({ map: map, strokeColor: ‘#4986E7‘ }); ซึ่งสามารถเปลี่ยน strokeColor ในส่วนของตัวอักษรสีน้ำเงินให้เป็นสีที่ท่านต้องการได้

          เอาล่ะค่ะ เราก็ได้เห็นวิธีการและตัวอย่างการแสดงเส้นทางระหว่างจุดพิกัดบนแผนที่กันไปพอหอมปากหอมคอกันแล้วนะคะ หวังว่าผู้อ่านแต่ละท่านจะสามารถนำเกร็ดเล็กเกร็ดน้อยเหล่านี้ไปประยุกต์ใช้งานต่อได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ไว้เจอกันใหม่บทความหน้าเกี่ยวกับเรื่อง “การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode” นะคะ ขอบคุณค่ะ ^^

หมายเหตุ: หากผู้ใดสนใจบทความอื่นๆเกี่ยวกับการพัฒนาโปรแกรมด้วยแผนที่ Google Map APIs ที่ผู้เขียนเคยเขียนไว้ก่อนหน้านี้ สามารถติดตามได้จากลิงค์ต่อไปนี้ค่ะ
1) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#
2) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)
3) การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps
4) การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps


แหล่งข้อมูลอ้างอิง :