var directionDisplay;
var directionsRenderers = [];
var directionsService = new google.maps.DirectionsService();
var map;
function drawMap(midpoint) {
var mid = midpoint.split(",");
var start = new google.maps.LatLng(mid[0], mid[1]);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: start,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function getRendererOptions(main_route) {
var _colour;
var _strokeWeight;
var _strokeOpacity;
var _suppressMarkers;
var _label;
if (main_route) {
_colour = '#00458E';
_strokeWeight = 4;
_strokeOpacity = 1.0;
_suppressMarkers = false;
} else {
_colour = '#ED1C24';
_strokeWeight = 4;
_strokeOpacity = 0.4;
_suppressMarkers = false;
}
var polylineOptions = {
strokeColor: _colour,
strokeWeight: _strokeWeight,
strokeOpacity: _strokeOpacity
};
var rendererOptions = {
draggable: false,
suppressMarkers: _suppressMarkers,
polylineOptions: polylineOptions
};
return rendererOptions;
}
function renderDirections(result, rendererOptions, routeToDisplay) {
var _colour;
var _strokeWeight;
var _strokeOpacity;
var _suppressMarkers;
if (routeToDisplay === 0) {
_colour = '#00458E';
_strokeWeight = 6;
_strokeOpacity = 1.0;
_suppressMarkers = false;
} else {
_colour = '#ED1C24';
_strokeWeight = 4;
_strokeOpacity = 0.4;
_suppressMarkers = false;
}
// create new renderer object
var directionsRenderer = new google.maps.DirectionsRenderer({
draggable: false,
suppressMarkers: _suppressMarkers,
polylineOptions: {
strokeColor: _colour,
strokeWeight: _strokeWeight,
strokeOpacity: _strokeOpacity
}
});
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
directionsRenderer.setRouteIndex(routeToDisplay);
directionsRenderers.push(directionsRenderer);
}
function requestDirections(start, end, routeToDisplay, main_route) {
for (var i = 0; i < directionsRenderers.length; i++) {
directionsRenderers[i].setMap(null);
}
directionsRenderers = [];
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: main_route
};
directionsService.route(request, function (result, status) {
var rendererOptions;
if (status == google.maps.DirectionsStatus.OK) {
if (main_route) {
rendererOptions = getRendererOptions(true);
for (var i = 0; i < result.routes.length; i++) {
renderDirections(result, rendererOptions, i);
}
} else {
rendererOptions = getRendererOptions(false);
renderDirections(result, rendererOptions, routeToDisplay);
}
document.getElementById('msg').innerHTML = "";
for (var i = 0; i < result.routes.length; i++) {
var directionsData = result.routes[i].legs[0]; // Get data about the mapped route
if (!directionsData) {
window.alert('Yol tarifi isteği başarısız oldu');
return;
}
else {
if(i==0){ color = '#00458E';} else{ color = '#ED1C24';}
document.getElementById('msg').innerHTML += " <font color='" + color + "'> Mesafe " + directionsData.distance.text + " (" + directionsData.duration.text + ").</font/></br>";
}
}
}
});
}
// users route
requestDirections('(Letchworth)', '(Crawley)', 0, true);
drawMap("türkiye");
html, body, #map_canvas {
height: 90%;
width: 100%;
margin: 0px;
padding: 0px
}
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSFiddle uLu7w814</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5dMMFQXt4os3Ndk0gMu8sGOHqGYv4_VU&libraries=geometry,places&ext=.js"></script>
</head>
<body>
<label>Start</label>
<input id="start" size="50" value="Letchworth" />
<br />
<label>End</label>
<input id="end" size="50" value="Crawley" />
<input type="button" value="post directions" id="btn" onclick="requestDirections(document.getElementById('start').value, document.getElementById('end').value,0,true);" />
<div id="msg"></div>
<div id="map_canvas"></div>
</body>
</html>
