Driving Directions

I have a code and I want to ablitity for the user to enter the address. I have the code set now so when you hit Find it kinda works, but I have in the area for address txtStart and txtFinish and they are trying to find locations for those, is there a way to edit that code and make it so it reads what is in those text boxes

Here is the code

<body>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
function FindLoc()
{
map = new VEMap('myMap');
map.LoadMap();
map.GetRoute('txtStart', 'txtFinish');
}
</script>
</head>
<body onload="GetMap();">
<div id="Div1" style="position:relative; width:400px; height:400px;"></div>
Start Address: <INPUT id="txtStart" type="text" name="txtStart">
Finish Address: <INPUT id="txtFinish" type="text" name="txtFinish">
<INPUT id="find" type="button" value="Find" name="find" onclick="FindLoc();">

</html>
</body>

Answer this question

Driving Directions

Tokunbo Opanubi
Yeah, yeah. We posted at (nearly) the same time, but your post shows up first because I took the long route. I guess that'll teach me.
AnilC

If I understand you correctly then what I thinnk you are trying to do is something like this:

map.GetRoute(document.GetElementById("txtStart").innerText, document.GetElementById("txtEnd").innerText );

Or it may be the .value property. Either way you need to get a reference to the HTML element using GetElementById, then access it's properties.

Dave
Chiisana
Thanks so much! That works great! One more question. I have a set of 5 locations and I was wondering if I could preset the address in a Dropdown list of the locations. Is there a way this will work by ONLY changing the following part of the code....

var to = document.getElementById('txtFinish').value;

So it will read this....

<SELECT ID="Finish" NAME="Finish">
<option>address 1</option>
<option>address 2</option>
</select>

(I dont even know if I am naming right! lol Thanks. Hope you can help even more then you already did!
em325409

So to make this work you need to hook an event to the SELECT element.

<SELECT ID="Finish" ... onclick="SomeFunction();" >

Then you would need to handle the event:

<script ...>

function SomeFunction()

{

selectedElement = document.GetElementById("Finish");

finishVal = selectedElement.selectedOption (I don't know from the top of my head what the property is, but you get the idea ..)

map.GetRoute(start, finishVal);

}

</script>

This is all pseudo-code, but should point in the right direction ...
Tryin2Bgood
Ok, you could also go the long winded way
pdb
Yep--a quick change and you've got it:

change this:

map.GetRoute('txtStart', 'txtFinish');

to this:

var from = document.getElementById('txtStart').value;

var to = document.getElementById('txtFinish').value;
map.GetRoute(from, to);
Driving Directions

Answer this question