Add Google Maps’ Directions to Your Site
Google Maps has already spawned some interesting hacking and sightseeing, and recently launched a UK service.
If you have a business which gets visitors to its premises you’ve probably created some kind of map yourself and maybe tried to write some generalised directions, but it can be tricky to get right. Using a simple form on your site you can also offer users a personalised map and directions courtesy of Google Maps. Just modify the appropriate code snippet below to include the destination and any extra formatting markup needed.
(Sorry if this is old news or seems obvious; I’ve not seen it covered anywhere and it won’t be obvious for most people.)
(Update: they’ve now released the Google Maps API for embedding maps and adding your own data.)
USA
<form action="http://maps.google.com/maps" method="get">
<p><label for="saddr">Your ZIP code</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>Example: Show me the way to Amarillo
UK
<form action="http://maps.google.co.uk/maps" method="get">
<p><label for="saddr">Your postcode</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>Example: Didn’t we have a lovely time the day we went to Bangor
Sun 1st May 2005, 2:32pm GMT (updated Wed 29th Jun 2005, 7:39pm GMT)
Filed under: Client-side Coding, Hints and Tips, Search Engines, Web
Comments
coolnees. And no, it's not obvious to a non geek like me
This is fantastic! Featured on http://www.orature.com/
Cool. Posted it on my site.
you can add both a "from" and a "too" as follows
<h2>Directions</h2>
<div>
<form action="http://maps.google.com/maps" method="get">
<p><label for="saddr">From</label>
<input type="text" name="saddr" id="saddr" value="" />
<p><label for="daddr">To</label>
<input type="text" name="daddr" id="daddr" value="" />
<input type="submit" value="Go" /></p>
</form>
</div>
— Jennifer, 29th May, 11:18pm
Heh. I'm in Amarillo and I still have 5.8 miles to go.
Agreed. It's a fine thing you've done. Thanks!
Start address:
NY 10547
End address:
Amarillo, TX
Distance: 1,860 mi (about 1 day 8 hours)
hahah
— andrew, 30th May, 4:09pm
Any idea how to make this pop into a new window so no one leaves the site?
You could put target="_blank" on the form tag, but I'd question the value of launching a new window. If they want to leave they'll leave, if they want to stay they'll stay, don't annoy a significant percentage of visitors by launching new windows all the time to somehow try to misguidedly 'imprison' them.
Sweet! Thanks for the fun idea. I used this on my site's contact page.
This might be a good thing if you could get it down to a street address.
— Jeff, 3rd Jun, 5:48am
You can get it down to a street address. All you have to do is put it into the box for destination in the following form: street address, city, zip code. If users type in their address in your form the same way, it will give driving directions between the two locations.
do I just copy and paste that code to get it to work? What do you mean by odify appropiate snippets?
— rhago32, 3rd Jun, 9:05am
Just pick either the US or UK code, copy and paste it, then modify the "[destination]" bit to describe your location in a way compatible with Google Maps (e.g. see John Forsyth's comment).
This is cool. I have it at http://www.tech.ebloggy.com/
nice one.
Also, if you have multiple addresses, you can put them into a select element for a drop down menu. Just make the option values the full address like so:
<select name="daddr" id="daddr">
<option value="1313 Mockingbird Lane, Hollywood CA 15151">Munsters</option>
<option value="1600 Pennsylvania Ave., Washington, DC 20500">White House</option>
</select>
— Ernie, 4th Jun, 1:05am
So I tried what you said but all I get on my page is "Your zip code" but no box to enter anything. I must be totally stupid.
— rhago32, 7th Jun, 12:03pm
what other things do I need to modify, I am such a newby at this.
— rhago32, 7th Jun, 12:21pm
If the form elements are disappearing then it sounds like the tags are getting stripped out by something (perhaps you're using a blog/CMS interface which expects plain text only?), not sure what to suggest other than try a different way to include the form in the page.
thanks for the tips Matt? I will fiddle around with it and find out. Also just to let you kno wI found out about your page from AOTS on G4TV.
— rhago32, 10th Jun, 7:00am
So you can get it down to the street level but would the enduser have to fillout multiple fields to get to my specific address? Cause the whole zip code thing is not detailed enough. If so code examples would be appreciated.
adYou can use any address format supported by Google Maps without changing the code. A couple of previous comments have mentioned more specific locations, have a play around with it.
(I only mentioned Zip in my example to keep things simple)
Anyone been able to popup several locations on the map like when you search for something? I'd like to be able to show several locations in a specific city. For example, all the movie theatres.
— Lawrence, 13th Jun, 11:20pm
See http://stuff.rancidbacon.com/gmaps… or search for "google maps hacks", but don't expect it to be simple and reliable.
Ultimately I'm sure Google will launch a maps API etc., but for now all the hacks are at the mercy of Google code changes and enforcement of their terms of service.
DUMB QUESTION...Is this "hacking" illegal? I maintain a site for a non-profit company and I would love to add a map but not if it isn't AOK for them...
— sarah, 14th Jun, 8:28pm
The forms I've suggested are fine; they simply link across in the same way as Google Maps' own "Link to this page", with no attempt to modify behaviour or embed Google content within your site.
Some of the hacks are on shakier ground. So far Google has been tolerant, but at least one site has been asked to shut down for violating the terms of service (see http://gmerge.2ni.net/ ).
So have you guys heard of Google Maps API? It allows you to use their Maps on your actual site....the only problem is that (as far as I know) they dont allow you to show directions on your site....that must be done on their site...is this true? For my site, I want to allow customers to find the hookah bar they want in their state and then get directions....http://www.customhookahs.com/Googl… the Get Directions button obviously doesn't work....but I guess my workaround would be to post the url to maps.google.com and it'll work fine...what do you guys think would be the best solution?
I am using a mixture of the Google Maps API and a 'get directions' form similar to the one above:
http://www.firsttitlegroup.co.uk/c…
The trick is to get the embedded JavaScript working properly in the popup GMarker window.
How do you format the boxes, buttons, and text? I like how you did it, looks more streamlined. You willing to share?
— Orlando, 7th Oct, 5:58am
Orlando, do you mean the way I display forms in this site? If so, I've explained some of it already:
http://www.malevolent.com/weblog/a…
The Hints and Tips category contains loads more similar info:
http://www.malevolent.com/weblog/a…
Matt, I guess that's what I mean. I'd like to format the google maps form (as you did) so that it looks a bit more polished. I'll check out the links you posted and both you some more if I still have questions. ;P
— Orlando, 8th Oct, 9:51pm
Comments are now closed for this entry.
Matt Round’s company blog, covering web development, media, technology and pretty much anything else.
- Web Sites
- Good-looking, effective, accessible sites.
- Multimedia
- Logos, Flash games, animation and illustration.
- Advice
- Help with strategy, planning and getting noticed.
— Russell, 28th May, 5:35pm