Hi,
I have implenmented bing Driving direction. I use firefox, the map is load normal. but use chorme Brower, the error displaying VeMap is undefined.
<head>
<title>Driving Directions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
li {
line-height: 1.5em;
}
</style>
<script type="text/javascript" src="../../js/jquery.jcarousel.min.js"></script>
<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() {
debugger;
map = new VEMap('myMap'); //error: VEMap is not definde.
map.LoadMap();
}
function querySt(key, default_) {
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return unescape(qs[1]);
}
function GetRouteMap()
{debugger;
var options = new VERouteOptions;
// Otherwise what's the point?
options.DrawRoute = true;
// So the map doesn't change:
options.SetBestMapView = true;
// Call this function when map route is determined:
options.RouteCallback = ShowTurns;
// Show as miles
options.DistanceUnit = VERouteDistanceUnit.Mile;
// Show the disambiguation dialog
options.ShowDisambiguation = true;
// Show traffic
options.UseTraffic = true;
var query = [querySt("mapOfficeAddress") + " " + querySt("mapOfficeZip") + " " + querySt("mapOfficeCity") + " " + querySt("mapOfficeState") + " " + querySt("mapOfficeCountry") + " ", querySt("mapLossAddress") + " " + querySt("mapLossZip") + " " + querySt("mapLossCity") + " " + querySt("mapLossState")];
map.GetDirections(query, options);
}
function ShowTurns(route)
{debugger;
var turns = "<h3>Turn-by-Turn Directions</h3>";
turns += "<p><b>Distance:</b> " + route.Distance.toFixed(1) + " miles";
turns += "<br/><b>Time:</b> " + GetTime(route.Time) + "</p>";
// Unroll route and populate DIV
var legs = route.RouteLegs;
var leg = null;
var turnNum = 0; // The turn #
// 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
var legNum = i + 1;
/*turns += "<br/><b>Distance for leg " + legNum + ":</b> " + leg.Distance.toFixed(1) + " miles" +
"<br/><b>Time for leg " + legNum + ":</b> " + GetTime(leg.Time) + "<br/><br/>";
*/
// Unroll each intermediate leg
var turn = null; // The itinerary leg
var legDistance = null; // The distance for this leg
turns += "<ol>";
for(var j = 0; j < leg.Itinerary.Items.length; j ++)
{
turnNum++;
turn = leg.Itinerary.Items[j]; // turn is a VERouteItineraryItem object
turns += "<li> " + turn.Text;
legDistance = turn.Distance;
// So we don't show 0.0 for the arrival
if(legDistance > 0)
{
// Round distances to 1/10ths
turns += " (" + legDistance.toFixed(1) + " miles";
// Append time if found
if(turn.Time != null)
{
turns += "; " + GetTime(turn.Time);
}
turns += ")";
}
turns += "</li>"
}
turns += "</ol>";
}
// Populate DIV with directions
SetDirections(turns);
}
function SetDirections(s)
{
var d = document.getElementById("directions");
d.innerHTML = s;
}
// time is an integer representing seconds
// returns a formatted string
function GetTime(time)
{
if(time == null)
{
return("");
}
if(time > 60)
{ // if time == 100
var seconds = time % 60; // seconds == 40
var minutes = time - seconds; // minutes == 60
minutes = minutes / 60; // minutes == 1
if(minutes > 60)
{ // if minutes == 100
var minLeft = minutes % 60; // minLeft == 40
var hours = minutes - minLeft; // hours == 60
hours = hours / 60; // hours == 1
return(hours + " hour(s), " + minLeft + " minute(s), " + seconds + " second(s)");
}
else
{
return(minutes + " minutes, " + seconds + " seconds");
}
}
else
{
return(time + " seconds");
}
}
function ClearAll()
{
map.DeleteRoute();
SetDirections("");
map.LoadMap("Austin Tx");
}
</script>
</head>
<body onload="GetMap(); GetRouteMap();" style="font-family:Arial">
<h1>Driving Directions <button onclick="window.print();">Print</button></h1>
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
<div id='directions'></div>
</body>
</html>
Thanks,
