final_route

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 map;
var markers = [];//精靈圖標
var myLat = 25.066481, myLng = 121.521266;//我的位置
var myLatLng = {lat: 25.067144, lng: 121.524470};
//{lat: 25.067144, lng: 121.524470}

var directionsDisplay;
var directionsService;
var pokeLatlng, myLoc;

function initMap() {
		directionsDisplay = new google.maps.DirectionsRenderer;
  	directionsService = new google.maps.DirectionsService;
		
  	map = new google.maps.Map(document.getElementById('map'), {
    center: myLatLng,
    zoom: 15
    });
  	var infoWindow = new google.maps.InfoWindow({map: map});

  	myLat = 25.067144;
  	myLng = 121.524470;

  	var m = new google.maps.Marker({
	 	map: map,
	 	position: myLatLng,
		title: "your location"
  	});
    
  	directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
    directionsDisplay.setMap(null);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: {lat: 25.067144, lng: 121.524470},
    destination: {lat: 25.071836, lng: 121.527725},
    travelMode: google.maps.TravelMode['WALKING']
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}