การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

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

   ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว 

ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้

DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ
BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน
TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น  รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น
WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน

          ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้

  • การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่
  1. โค้ด Javascript
     <script type="text/javascript">
    function initialize() {
     // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global
     window.directionsService = new google.maps.DirectionsService();
     window.directionsDisplay = new google.maps.DirectionsRenderer();
     var map;
     var bounds = new google.maps.LatLngBounds();
     var mapOptions = {
     mapTypeId: 'roadmap'
     };
    
    // แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
     map.setTilt(45);
    
    // กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด
     window.markers = [
     ['Place1', 51.501546, -0.142000],
     ['Place2', 51.512051,-0.091225]
     ];
    // ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด
     directionsDisplay.setMap(map);
    // กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode)
     calcRoute();
    }
    // เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล
     function calcRoute() {
      var selectedMode = document.getElementById('travelType').value;
      var request = {
     
      origin: new google.maps.LatLng(markers[0][1], markers[0][2]),
     
      destination: new google.maps.LatLng(markers[1][1], markers[1][2]),
    
    //// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก)
      travelMode: google.maps.TravelMode[selectedMode]
      };
      
     directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
     }
     });
     }
     </script>
  2. ส่วนของการแสดงผลใน body
    <body> 
    <div id="map_wrapper">
     <div id="map_canvas" class="mapping"></div>
    </div>
    <div id="travel_selector">
     <p><strong>Mode of Travel: </strong>
     <select id="travelType" onchange="calcRoute();">
     <option value="WALKING">Walking</option>
     <option value="BICYCLING">Bicycling</option>
     <option value="DRIVING">Driving</option>
     <option value="TRANSIT">Transit</option>
     </select></p>
    </div>
    </body>
  3. ผลลัพธ์ในแต่ละรูปแบบ
  • แบบที่ 1 DRIVING Mode :

 

  • แบบที่ 2 BICYCLING Mode:

  • แบบที่ 3 TRANSIT Mode:


  • แบบที่ 4 WALKING Mode:


              จากตัวอย่างจะเห็นได้ว่าเป็นพิกัดของประเทศในต่างแดน เนื่องจากก่อนหน้านี้ ผู้เขียนลองใช้พิกัดจุดบนพื้นที่ประเทศไทย แต่พบว่ามีบาง Mode ยังไม่รองรับ เช่น เส้นทางจักรยาน ซึ่งเมื่อเลือกกำหนดโหมดดังกล่าวจะไม่เห็นการเปลี่ยนแปลงใดๆ จึงหันไปยกตัวอย่างจาก London แทนเพื่อให้ผู้อ่านได้เห็นความแตกต่างในการแสดงผลแต่ละแบบได้ชัดเจนขึ้น แต่เพื่อไม่ให้เป็นการน้อยเนื้อต่ำใจกัน ผู้เขียนก็ได้ลองเอาพิกัดของพื้นที่ในประเทศไทยมาลองทำดูให้ผู้อ่านได้เห็นแถมมาด้วยว่าพื้นที่ของเราจะเห็นเส้นทางเป็นยังไงในแต่ละแบบกันบ้าง ดังนี้ค่ะ
    ตัวอย่างการแสดงเส้นทางระหว่างสนามบินสุวรรณภูมิและเขตจตุจักร
    1) แบบ Transit mode

     

    จะเห็นได้ว่า เมื่อคลิกที่รูปสัญลักษณ์เครื่องหมายคำพูด จะแสดงรายละเอียดเกี่ยวกับข้อมูลการขนส่งสาธารณะนั้นๆ เช่น รถเมล์สายใด รถไฟฟ้า BTS สายใด เป็นต้น

    2) แบบ Walking Mode


    3) แบบ Driving Mode

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


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