Add Google Maps driving directions to your website

Posted on April 29, 2008 at 5:23 am

I love using Google Maps “Get Directions” feature any time I need to figure how to get from point A to B. It’s one of the best ways to get driving directions in the USA for sure.

So what if you have a wedding website or a MySpace page and you’re throwing a big party, wouldn’t it be nice if your guests could go to your site, type in the address they will be coming from and automatically get directions to the event location!? Not sure what I mean? Type your address in the box below and you’ll get directions from your address to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then clicking on the Send link at the top right.

Here’s what you end up getting:

Notice the link in the email message! That’s what we need! Here’s what the entire link looks like right now:

http://maps.google.com/maps?f=d&hl=en&geocode=&saddr= 6348+Pratt+Dr,+New+Orleans,+LA+70122+(Pratt+Home)&daddr=4601+lennox+blvd,+new+orleans,+la&sll=37.0625,-95.677068&sspn=33.214763,82.265625&ie=UTF8&z=12

Eeeks! That’s pretty long! There are a lot of fields in the URL, such as SADDR (starting address), DADDR (destination address), hl (language), and some more stuff related to the latitude and longitude.

However, you don’t really need all of these fields in order for Google to give you driving directions! All you need is this:

http://maps.google.com/maps?saddr=start&daddr=end

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

Pretty nifty eh! Isn’t it fun to mess around with these types of things! Ok, so now that we have a URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”6348 Pratt Dr, New Orleans, LA” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more by following the same procedure as I went through above. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic. Type in your directions and then press the Satellite and Traffic buttons on the Google map. Next, click on Send and you’ll see the modified URL:

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means satellite in some strange fashion! Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site! Source: AskDaveTaylor

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Enjoyed this post? Subscribe to Online Tech Tips via RSS Feed or via Email and receive free daily productivity tips.

» Filed Under Google Software/Tips

Save this page	Stir it up on Mixx
Add to Reddit	Stumble this page

12 Responses to “Add Google Maps driving directions to your website”

MJ said on : April 29th, 2008 at 9:58 pm

Really cool feature. I have tried it before, it’s really helpful.

Thanks.

Aurelius Tjin said on : May 2nd, 2008 at 8:53 pm

Great post! Thanks for the valuable information and insights you have shared here.

Bollywood Star said on : June 2nd, 2008 at 6:27 am

This is my favorite website because there are greatest posts.

Thanks to all

Bob said on : June 2nd, 2008 at 11:38 am

Hi, do you have any idea how to convert a google map to pdf, so I can draw arrows on the maps and make notes? Thanks.

Raymond said on : June 20th, 2008 at 4:57 am

It’s a nice feature which we have recently added to our website.

I would also very much like to have the option to save the directions as a pdf file and the option to email the directions directly from the website (options: send as link and/or as pdf).

Thanks for the article.

PNOOZ said on : July 21st, 2008 at 6:36 pm

Regarding your PDFs - try CutePDF Writer - http://cutepdf.com
It’ll print anything as a PDF file on your computer.

Thanks for the Google map info,… it’s a big help!

PNOOZ

nick z said on : July 29th, 2008 at 4:31 pm

hey man, every time i do this it never works. Does it look different in Dreamweaver when you view it as opposed to when you put it on a remote site? I’m developing a website right now but do not currently have access to the remote server yet.

unRheal said on : September 17th, 2008 at 2:18 pm

Cool! Exactly what I was looking for (well, I wanted to send someone a URL with specific starting and destination points, but that’s easy with your info!) Thanks!

BTW - I won’t be stopping by for tea, and something a bit over 4500 km to your place, I rather suspect the 1 day, 18 hours (no doubt non-stop, probably at the limit) is a bit more than I’m up for at this time.

Cheers

unRheal said on : September 17th, 2008 at 3:02 pm

Nick: (you probably already figured it out, but just in case…) I tried copying and pasting the code from this page into the “code” view of a trivial web page in Dreamweaver, and when I tried to preview/debug it I ended up with a strange page with 3 fields and bits of text displayed that didn’t function at all. I’d saved it to an .htm file, so I just directly loaded that file in IE myself with similar results… but when I went “view source” in IE, the problem was clearly that copying and pasting directly from this page had caused the double quote charcters to come up as some fancy slanted quotes that neither firefox nor IE considered to be actual double quotes.

So I just used a text editor to do a quick search and replace - I selected one of the funky quotes, and copied it, and used that to search “for” and then just put a real double quote character to “replace” and replaced ‘em all, saved it… then re-loaded it back up into Dreamweaver… and *then* it would load/debug in IE and function properly - I actually got directions when I submitted a valid location.

As I say, you probably got it all figured out already, but maybe this’ll save someone a few minutes of confusion, as I experienced while trying to figure out why the copy-pasted code wasn’t working!

Mars said on : September 29th, 2008 at 12:58 am

Thanks, Works like a gem!! ;0)

Matt said on : November 24th, 2008 at 2:18 pm

I adde this feature, and it’s great, but any idea how to add a dropdown for multiple office locations?

mojomonger said on : December 3rd, 2008 at 6:32 am

the “t=h” nomenclature translates to “type=hybrid” - google uses HYRBID to describe satellite maps.