HTML code for find distance with map
<html>
<head>
<title>Bing Distance Calculator | http://sharp-coders.blogspot.com</title>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
var options = new VERouteOptions();
options.RouteCallback = onGotRoute;
options.DistanceUnit = VERouteDistanceUnit.Kilometer;
options.UseTraffic = true;
//here you can add more options ... you can get a list of options that can be used from bing map's website
map.GetDirections([document.getElementById("origin").value, document.getElementById("destination").value],
options);
}
function onGotRoute(route)
{
// Unroll route
var legs = route.RouteLegs;
var turns = "Total distance: " + route.Distance.toFixed(1) + " Km\n";
var numTurns = 0;
var leg = null;
document.getElementById("distance").value = route.Distance.toFixed(1) + " Km\n";
// Get intermediate legs
for(var i = 0; i < legs.length; i++)
{
// Get this leg so we don't have to derefernce multiple times
leg = legs[i]; // Leg is a VERouteLeg object
// Unroll each intermediate leg
var turn = null; // The itinerary leg
for(var j = 0; j < leg.Itinerary.Items.length; j ++)
{
turn = leg.Itinerary.Items[j]; // turn is a VERouteItineraryItem object
numTurns++;
turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " Km)\n";
}
}
document.getElementById("instructions").value = turns;
//alert(turns);
}
</script>
</head>
<body onload="GetMap();">
<table align="center">
<tr><td>Origin:</td><td><input type="text" id="origin"></td></tr>
<tr><td>Destination:</td><td><input type="text" id="destination"></td></tr>
<tr><td></td><td><input onclick="GetMap()" type="button" value="Calculate" /></td></tr>
<tr><td>Distance:</td><td><input type="text" id="distance"></td></tr>
<tr><td>Instructions:</td><td>
<textarea cols="30" id="instructions" rows="7"></textarea></td></tr>
</table>
<br /><br />
<div id="myMap" style="height: 400px; position: relative; width: 400px;">
</div>
<a href="http://sharp-coders.blogspot.com/" target="_blank">http://sharp-coders.blogspot.com</a>
</body>
</html>
