Forum Moderators: open
But...
I don't know JavaScript, and I can't seem to find a demo that does exactly what I want. So if anyone can point me to one I'd much appreciate it.
What I want is for the page to show the brick-n-mortar location on a Google map in the middle of the page, with an input field right above (or below) the map for the visitor to enter their address. Hit "Get Directions" and viola!
I found a demo that I can *almost* make work, but it needs me to pre-define both starting and ending locations (instead of leaving it blank until the user enters something).
Does that mean there is no such demo, or was it just a busy Monday for everyone? :)
This page shows you, how to go from San Francisco to Oakland:
You can add the street names to that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.GetRoute("San Francisco, California", "Oakland, California");
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
However, that example still seems to require two pre-defined points on the map for it to work.
I need an example that will show the brick-n-mortar location on the map by itself until the user inputs another location to give directions from.
<script type="text/javascript">
<!--
if (GBrowserIsCompatible()) {
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i=0;
function createMarker(point,name,html) {
var marker = new GMarker(point);
to_htmls[i] = html + '<br><font size="2" face="Arial">Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a></font>' +
'<br><font size="2" face="Arial">Start address:</font><form action="http://maps.google.com/maps" method="get" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
"(" + name + ")" +
'"/>';
from_htmls[i] = html + '<br><font size="2" face="Arial">Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b></font>' +
'<br><font size="2" face="Arial">End address:</font><form action="http://maps.google.com/maps" method="get"" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
"(" + name + ")" +
'"/>';
html = html + '<font size="2" face="Arial"><br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></font>';
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
i++;
return marker;
}
function tohere(i) {
gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
function fromhere(i) {
gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}
var yamp = new GMap2(document.getElementById("yamp"));
yamp.addControl(new GLargeMapControl());
yamp.addControl(new GMapTypeControl());
yamp.setCenter(new GLatLng(20.1234,-80.1234), 15);
var point = new GLatLng(20.1234,-80.1234);
var marker = createMarker(point,'123 YOUR ADDRESS HIGHWAY, 11111','<font size="2" face="Arial"><b>123 YOUR ADDRESS HIGHWAY, 11111</b><br>GPS: <em>Latitude:</em> 20.1234 <br><em>Longitude:</em> -80.1234</font>')
yamp.addOverlay(marker);
yamp.setMapType(G_HYBRID_MAP);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//-->
</script>
I can't seem to make that script work - where does it get pasted into an HTML doc? I don't know JavaScript, so I'm not sure what I'm doing wrong.
<div id="yamp" style="width: 480px; height: 340px"></div>
Thanks anyway.
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.GetRoute(ForKatana.value, "Oakland, California");
}
</script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<form><input type="text" name="ForKatana" id="ForKatana" value="san francisco">
<input type="button" onclick="GetMap()" value="I love Pontifex"></form>
<script>GetMap();</script>
</body>
</html>
