googleMap_hw6_version2

Map.html

by otorineko6790

HTML

<title>Travel modes in directions</title>
<div id="map"></div>
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map {
			height: 100%;
		}
		#floating-panel {
			position: absolute;
			top: 10px;
			left: 25%;
			z-index: 5;
			background-color: #fff;
			padding: 5px;
			border: 1px solid #999;
			text-align: center;
			font-family: 'Roboto','sans-serif';
			line-height: 30px;
			padding-left: 10px;
	}

JavaScript

var directionsDisplay;
var directionsService;
var selectedMode = 'WALKING';
var ttu = {lat: 25.067280, lng: 121.521359};
var stk = {lat: 25.063019, lng: 121.533765};
var home = {lat: 25.060706, lng: 121.492251};
var from = {lat: 25.071836, lng: 121.527725};//ttu
var to = {lat: 25.067144, lng: 121.524470};//Hsing Tian kong


function initMap() {
  directionsDisplay = new google.maps.DirectionsRenderer;
  directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(document.getElementById('map'));
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: from,  // 大同大學
    destination: to,  // 行天宮
    travelMode: google.maps.TravelMode[selectedMode]
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
  //androidwebview.toast();
}