I'm having this code from html
<pre lang="xml"><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="~/Content/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDCnBHmfdBN--Ais_-RC6ShvjhzRCmVmPk">
</script>
<script type="text/javascript">
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
$(document).ready(function () {
var latlng = new google.maps.LatLng(-61.773123, 139.570313);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
$("#btnGetDirections").click(function () {
calcRoute($("#txtAddress1").val(), $("#txtAddress2").val());
});
});
function calcRoute(start, end) {
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: false
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
displayDirections(result);
}
});
}
function displayDirections(result) {
var html = '<div style="margin:5px;padding:5px;background-color:#EBF2FC;border-left: 1px solid #EBEFF9;border-right: 1px solid #EBEFF9;text-align:right;">';
html = html + '<span><strong>' + $.trim(result.routes[0].legs[0].distance.text.replace(/"/g, '')) + ', ' + $.trim(result.routes[0].legs[0].duration.text.replace(/"/g, '')) + '</strong></span></div>';
$("#divDirections").html(html);
var steps = result.routes[0].legs[0].steps;
for (i = 0; i < steps.length; i++) {
var instructions = JSON.stringify(steps[i].instructions);
var distance = JSON.stringify(steps[i].distance.text);
var time = JSON.stringify(steps[i].duration.text);
$("#divDirections").append(getEmbedHTML(i + 1, instructions, distance, time));
}
}
function getEmbedHTML(seqno, instructions, distance, duration) {
var strhtml = '<div class="row">';
strhtml = strhtml + '<span>' + seqno + '</span> ' + $.trim(instructions.replace(/"/g, '')) + '<br/>'
strhtml = strhtml + '<div style="text-align:right;"><span>' + $.trim(distance.replace(/"/g, '')) + ' <span></div>'
strhtml = strhtml + '</div><div class="separator"></div>';
return strhtml;
}
<pre lang="Javascript">
<div id="sidebar">
<div class="row" style="background:#E3EDFA">
<label> Select your Origin:</label>
<br />
<br />
@*<input type="text" id="txtAddress1" class="text" value="350 5th Ave, New York, NY" />*@
<select id="txtAddress1" class="text">
<option value="" disabled selected>Select your Origin</option>
<option>Durban City Hall</option>
<option>Pietermaritzburg</option>
</select>
<br />
<br/>
<h2>Click Search for direction</h2>
<br/>
<div>
<div>
<input type="hidden" id="txtAddress2" class="text" value="@Html.DisplayFor(model => model.destination, new { @Type="hidden" })" /> <img src="~/Content/images/se.jpg " id="btnGetDirections" border="0" width="45" height="45" style="vertical-align:middle;" />
</div>
</div>
</span>
</div><pre lang="java">