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!

If you enjoyed this post, make sure you subscribe to my RSS feed!

» Filed Under Google Software/Tips

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