Welcome to WebmasterWorld Guest from 23.20.183.212

Forum Moderators: open

Message Too Old, No Replies

Driving Directions on My Site

Can anyone point me to a demo?

     
8:22 pm on Aug 3, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


I have a client who wants visitors to be able to enter their address and get driving directions to their brick-n-mortar location. I decided to try the Google Map API, and it looks like it will do what I need.

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).

12:35 pm on Aug 7, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


Hmm. No replies.

Does that mean there is no such demo, or was it just a busy Monday for everyone? :)

8:32 pm on Aug 9, 2007 (gmt 0)

Senior Member from DE 

WebmasterWorld Senior Member 10+ Year Member

joined:May 25, 2002
posts:928
votes: 3


well, if it does not have to be google, you might want to try microsoft:

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>

12:45 pm on Aug 10, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


Thanks for the response pontifex.

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.

1:29 pm on Aug 10, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 22, 2003
posts:1483
votes: 0


Forgot where I found this demo. I customized it a bit:

<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>

5:13 pm on Aug 10, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


Thanks for the reply, skipfactor.

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.

5:26 pm on Aug 10, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 22, 2003
posts:1483
votes: 0


Place the script at bottom of page right before the </body>. Then call the map anywhere else on the page:
<div id="yamp" style="width: 480px; height: 340px"></div>
6:16 pm on Aug 10, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


FireFox returns a blank page.

Thanks anyway.

7:04 pm on Aug 10, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 22, 2003
posts:1483
votes: 0


Replace <body> with <body onUnload="GUnload()">
9:45 pm on Aug 10, 2007 (gmt 0)

Senior Member from DE 

WebmasterWorld Senior Member 10+ Year Member

joined:May 25, 2002
posts:928
votes: 3


you mean like that?

<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>

7:57 pm on Aug 23, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


Still can't seem to find anything that does exactly what I'm looking for. Maybe I should just give up and try to talk the client into linking directly to maps.google.com?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members