<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
</script>
<script type="text/javascript">
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.62054, -122.34947), 16, VEMapStyle.Road, false);
var pinpoint = map.GetCenter();
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("Fourth Coffee Company");
shape.SetDescription("This is where we are located!");
map.AddShape(shape);
}
function GetDirections() {
var what = document.getElementById('from').value;
var options = new VERouteOptions();
options.DrawRoute = true;
options.SetBestMapView = false;
options.RouteCallback = onGotRoute;
map.GetDirections([what, map.GetCenter()], options);
}
function onGotRoute(route) {
var legs = route.RouteLegs;
var turns = "Total distance: " + route.Distance.toFixed(1) + " mi\n";
var numTurns = 0;
var leg = null;
for (var i = 0; i < legs.length; i++) {
leg = legs[i];
var turn = null;
for (var j = 0; j < leg.Itinerary.Items.length; j++) {
turn = leg.Itinerary.Items[j];
numTurns++;
turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)\n";
}
}
document.getElementById("directions").value = turns;
}
</script>
</head>
<body onload="GetMap()">
<h5>
We are located in Downtown Seattle by the Seattle Space Needle</h5>
<div id='myMap' style="position: relative; width: 600px; height: 400px;">
</div>
<br />
<form name="form" action="" method="post">
<input id="from" type="text" value="" name="From" />
<input id="findit" type="button" value="Find It!" name="find" onclick="GetDirections();" />
<br />
<br />
Your directions are:<br />
<textarea id="directions" cols="50" rows="20" value=""></textarea>
</form>
</body>
</html>
No comments:
Post a Comment