Anyone made a Google Maps Driving Directions widget before?
Development and Programming
Hiya,
I was just wondering if anyone had ever made something like this for a site :
http://www.google.com/ig/directory?synd=open&url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml
This works nicely and is simple to add to a site but I would really like to have one whereby the map is already shown when you go to the page and it shows the destination point already highlighted on the map.
The user could then enter their starting point and the exact same thing would happen as in the example above. I’d also like to be able to make the map that shows much larger in height as the one shown there is a little small.
If anyone has ever done this kind of thing with Google Maps or knows of somewhere that shows a tutorial or something then I’d be exceptionally grateful for any help thrown this way.
Thanks in advance.
Best wishes,
Mark
Okay a quick update. I’ve just found what looks to me like an excellent method of doing this but I just can’t seem to get it to work.
The tutorial I’ve found is :
http://www.hackvalue.nl/en/article/66/a_google_map_with_company_logo_and_travel_directions
and jQuery version which I’d prefer to use
http://www.hackvalue.nl/en/article/119/a_google_map_with_company_logo_and_travel_directions_using_jquery
I’ve tried to make the most basic of pages with simply the bog standard doctype and then the scripts linked to, the css in the head and the divs they provide in the body but when I load the page I just get the input field and no map showing up :-(
Just wondering if anyone can get this to work and then show me the obviously stupid error of my ways?
My code so far is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps</title>
<sc*ipt src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE" type="text/javasc*ipt"></sc*ipt>
<sc*ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javasc*ipt"></sc*ipt>
<sc*ipt type="text/javasc*ipt" src="{site_url}scripts/prototype/directions.js"></sc*ipt>
<style type="text/css">
<!--
#gmap {
height:360px;
width:480px;
}
#gdirections {
width:480px;
}
-->
</style>
</head>
<body>
<div id="gmap" class="geo" title="52.0938091,5.0918734"></div>
<h2>Get travel directions</h2>
<form id="routeform">
Your starting point (address, city):
<input type="hidden" value="[email protected],5.0918734" name="routeto" id="routeto"/>
<input type="text" name="routefrom" id="routefrom"/>
<input type="submit" value="show directions"/>
</form>
<div id="gdirections"></div>
</body>
</html>I’ve taken out the Google Maps API key from the code above so that would need placing in with one that you have for a site and also replaced the r’s in Javascript with asterixes so that hopefully all the code will show here on the forums but I can’t for the life of me see what I’m doing wrong as I’ve broken this into what I thought was the simplest version of this possible but as mentioned above the map doesn’t show and submitting anything in the field does nothing :-(
Any help on this would be massively appreciated.
Best wishes,
Mark