First off, my goal is to have a page on my website that when opened
provides a map preset to my location. Under this map I would like to
have a form for the visitor to input a starting location that then
updates the map on the page and lists directions just beneath.
This is my first time dabbling with Google API and actually javascript
as well so it's taken me hours to get as far as I have. When inserted
into my .html page I can successfully get the map to show the
destination as long as variable 'a' is set to '1'. Alternatively,
when set to '0' I can get the map and directions to pop up as long as
there is a location stored in variable 'origin'. The javascript
'checkform' is meant to verify data has been entered, and if it has,
I've attempted to pass that to back to function 'destination'. My
problem is getting the 'destination' function to update the page with
the entered information.
I'd really appreciate if anyone's willing to try and help me out with
this. With a decent amount of programming experience I thought this
would be no problem but obviously there must be something I'm
missing. Thanks.
<script src="http://maps.google.com/maps?
file=api&v=2&key=MYKEY" type="text/javascript"></script>
</p>
<div id='map_canvas' style='width: 400px; height:
400px'></div>
<div id ='my_textual_div'>
<h3>Get Directions</h3>
</div>
<script type='text/javascript' language='javascript'>
var map;
var panel;
var dir;
var a=1;
var origin='';
var to=' to ';
var destin='Normal, IL';
function destination(origin, a)
{
map = new GMap2(document.getElementById("map_canvas"));
panel = document.getElementById("my_textual_div");
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
dir = new GDirections(map, panel);
if (a == 0){
to = origin + to + destin;
dir.load(to);
}
else{
map.setCenter(new GLatLng(40.525543619597684, -88.99406433105469);
map.setZoom(16);
}
}
</script>
<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
if (form.saddr.value == "") {
alert( "Please enter your ZIP code or Address." );
form.saddr.focus();
return false;
}
if (form.saddr.value != "") {
destination(saddr, 0);
return false ;
}
return false ;
}
</script>
<form action="map.html" method="get" onsubmit="return
checkform(this);">
<p><label for="saddr">Enter Your Address or ZIP Code</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
</form>
