homepage Welcome to WebmasterWorld Guest from 67.202.9.192
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Google / Google Desktop Tools and Google Labs Projects
Forum Library : Charter : Moderator: open

Google Desktop Tools and Google Labs Projects Forum

    
Driving Directions on My Site
Can anyone point me to a demo?
katana_one




msg:3413128		 8:22 pm on Aug 3, 2007 (gmt 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).

 

katana_one




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

Hmm. No replies.

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

pontifex




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

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>

katana_one




msg:3418822		 12:45 pm on Aug 10, 2007 (gmt 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.

skipfactor




msg:3418849		 1:29 pm on Aug 10, 2007 (gmt 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>

katana_one




msg:3419055		 5:13 pm on Aug 10, 2007 (gmt 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.

skipfactor




msg:3419072		 5:26 pm on Aug 10, 2007 (gmt 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>

katana_one




msg:3419134		 6:16 pm on Aug 10, 2007 (gmt 0)

FireFox returns a blank page.

Thanks anyway.

skipfactor




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

Replace <body> with <body onUnload="GUnload()">
pontifex




msg:3419338		 9:45 pm on Aug 10, 2007 (gmt 0)

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>

katana_one




msg:3430530		 7:57 pm on Aug 23, 2007 (gmt 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?
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Google / Google Desktop Tools and Google Labs Projects
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved