<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<title>บริการเส้นทาง Google map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
      /* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 120px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 35px;
  padding-left: 10px;
}

 </style>
</head>
  <body>
<table width="100%" border="0">
  <tr>
    <td width="10%" align="center"><img src="../img/geohuso.png" width="116" height="91" /></td>
    <td width="80%"><p><h3>การพัฒนาแพลตฟอร์มเพื่อให้บริการข้อมูลระบบแผนที่ออนไลน์ด้านศิลปวัฒนธรรมและชุดความรู้ความจริงเสมือน เมนูอาหารสำรับปัตตานีสำหรับการท่องเที่ยวเชิงอาหารบนเส้นทางวัฒนธรรมเมืองปัตตานี</h3></p></td>
    <td width="10%" align="center">&nbsp;&nbsp;<img src="../img/psublue.gif" width="59" height="91"/></td>
  </tr>
</table>
<hr>
    <div id="floating-panel">
      <b>สถานที่เริ่มต้น: </b>
      <select id="start">
        <option value="Kota lama Raja Patani">วังจะบังติกอ</option>
        <option value="มัสยิดกรือเซะ">มัสยิดกรือเซะ</option>
  
      </select>
      <b>ถึงปลายทาง: </b>
      <select id="end">
       <option value="Kota lama Raja Patani">วังจะบังติกอ</option>
        <option value="มัสยิดรายอฟาฏอนี">มัสยิดรายอฟาฎอนี</option>
     
      </select>
    </div>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
<script>
  function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 6.875, lng: 101.2465 },
    mapTypeControl: true,
    streetViewControl: false,    
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain", "satellite"],
    },
    styles:
[
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]
});

  directionsRenderer.setMap(map);

  const onChangeHandler = function () {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };

  document.getElementById("start").addEventListener("change", onChangeHandler);
  document.getElementById("end").addEventListener("change", onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService
    .route({
      origin: {
        query: document.getElementById("start").value,
      },
      destination: {
        query: document.getElementById("end").value,
      },
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

</script>      
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5l0aPyGFqiqY5DpqOYf-8YhN_eYHHobU
&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>