Hi: I try to follow the instruction using google map in javascript.
Script some times work fine but when i put the values in Your Address
Textbox it wont shows the directions. Other than that if i put the
city state and zip it works. Can any one please tell me what i make
mistake in the script?
Thanks.
SCRIPT
----------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAAWjFPi89UG-
Rb3Who5FDkhRTvPROrRtr9Yene2irq6Hi48Jt9RRRSOu-klp9Mhib3eBbvZWu0LxSZjQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
function buttonOnClick()
{
var fromaddress ;
var myaddress;
var query;
// build the callers address string
fromaddress = document.getElementById("youraddress").value + ',' +
document.getElementById("yourcity").value +',' +
document.getElementById("yourstate").value +',' +
document.getElementById("yourazip").value ;
myaddress = '1521 Straight Path, Wyandanch, NY 11798';
query = fromaddress + " to " + myaddress;
document.getElementById("query").innerHTML = query;
var dirPanel = document.getElementById("directions1")
directions = new GDirections(map, dirPanel ); // make a direction
thing
directions.load(query); // make the route
}
</script>
<body onload='load();' onunload="GUnload()">
<br>
<table>
<tr>
<td>Your Address:</td>
<td><input type='text' id='youraddress'></td>
</tr>
<tr>
<td>Your City:</td>
<td><input type='text' id='yourcity'></td>
</tr>
<tr>
<td>Your State:</td>
<td><input type='text' size='2' id='yourstate'></td>
</tr>
<tr>
<td>Your Zip Code:</td>
<td><input type='text' size='5' id='yourazip'></td>
</tr>
<tr>
<td> </td>
<td><input type='button' value='Display Route'
onclick='buttonOnClick();'></td>
</tr>
</table>
<center><a href="index.html">Back to Home Page</a></center>
<br>
<center>
<div id="map" style="width: 500px; height: 300px" ></div>
<div id="query" </div>
</center>
<div id="directions1" style="width: 500px; height: 300px" ></div>
</body>
</html>
