Your IP : 216.73.216.91

Current Path : /var/node/inatote/qa_inatote/
Upload File :
Current File : /var/node/inatote/qa_inatote/map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> -->
    <title>Document</title>
</head>
<body>
   
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbSvp9iW6DnqHroXOxB5QX2TBExz5OWAE&callback=initMap" type="text/javascript"></script>
     

<script>
  function initMap() {
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const directionsService = new google.maps.DirectionsService();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 37.77, lng: -122.447 },
  });

  directionsRenderer.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsRenderer);
  document.getElementById("mode").addEventListener("change", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const selectedMode = document.getElementById("mode").value;

  directionsService
    .route({
      origin: { lat: 37.77, lng: -122.447 },
      destination: { lat: 37.768, lng: -122.511 },
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode],
    })
    .then((response) => {
      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}
</script>
</body>
</html>