Category: Google Apps

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

            หลังจากที่ก่อนหน้านี้ ผู้เขียนเคยได้มีโอกาสศึกษาบทความเกี่ยวกับความสามารถของ 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

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

• https://www.aspsnippets.com/demos/658/
• http://www.c-sharpcorner.com/UploadFile/8911c4/how-to-draw-routes-and-calculate-route-time-and-distance-on/