How do I add a Google Maps directions tool to my site?

My boss has me working on our company Web site and she wants me to add a box on our "contact us" page that lets people type in their address and at the click of a button bring up a window with driving directions from their location to our office. Is that even possible?

Dave's Answer:

Of course it's possible, anything's possible on the modern Web! :-)

There are a lot of different sites that help you with driving directions, but let's have a look at how Google Maps does it.

The first thing to notice is that you get to the directions aspect of Google Maps by using a slightly different URL: you have to append ?f=d to the end of the URL, like this:

http://maps.google.com/maps?f=d

But that's not quite what we want, really. That lets people enter both the starting and ending point and get directions, but what you seek is something quite a bit more sophisticated.

Nonetheless, the first step is always to enter some data and see what URL is produced (you can unwrap the form, but this is easier). So let's enter a start and end address and see what Google does with it. It's not quite that simple, however, because Google's using various tricks to update material within a page, rather than loading new pages. Fortunately, we can use one of the secondary links to generate a URL. Instead of using "Link to this page", however, I'll experiment with something else. Click on the "Send" link and you'll see a small window pop up:

(A word of explanation is in order here: I entered "start" and "end" as the beginning and ending points of our experimental journey and Google Maps expanded this to "Start, Uninc Richland Parish, LA" and "Vance AFT" (Oklahoma). Why? I have no idea, but it doesn't really matter, because all we need is the URL from within the message...)

The URL within the message is pretty long:

http://maps.google.com/maps?f=d&hl=en&geocode=&saddr=start& daddr=end&sll=37.0625,-95.677068&sspn=33.572881,61.171875&ie=UTF8&z=7

There's a lot here that we don't need, and after a bit of experimentation, the minimum set of fields for the URL are, ready for this?

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

To be clear, "start" and "end" are the values I have been using for addresses, so now it's finally time to experiment with the address itself, since we've ascertained how to feed a URL to Google Maps to get directions!

Let's make this interesting, though. I'm going to use a real address and invite you to try and figure out what organization uses this as its mailing address. The address is "12th & C Street SW, Washington DC", but we don't want to drop that into the URL, we want to make that a hidden field in a simple form where the visitor is invited to enter their own address. It'd look like this:

<form action="http://maps.google.com/maps" method="get">
Enter your starting address:
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="12th & C Street SW, Washington DC" />
<input type="submit" value="get directions" />
</form>

and indeed, that's exactly the code you need, just change the address I have to the address you want as the destination.

One more tweak: since you want to have the results show in a new window, you'll want to add a target="_blank" to the "form" tag. The final code:

<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="12th & C Street SW, Washington DC" />
<input type="submit" value="get directions" />
</form>

Here, try it:

Simple, elegant and, yes, exactly what the boss ordered!

Categorized: Computer and Internet Basics (Article 7982, Written by Dave Taylor)
Tagged: directions, google maps, hacking maps, mapping, mapquest
Previous: Updated: How do I change my MySpace profile picture?
Next: Are frames obsolete on Web sites? Do I need to redesign my site?

Subscribe!

Never miss another Q&A article! Click to subscribe:

Comments

I am in the process of creating a website that uses the above code... thanks btw... i worked great.

Is there some code that will automatically check the "Avoid Highways" check box on the Google Maps webpage.

Thanks for your help,
P

Posted by: Patrick at April 15, 2008 8:33 PM

so great and what about if i just need to use google map to show my office at my website no need direction from

how can i do it ?

Posted by: Pawint at April 30, 2008 4:54 PM

Hi Dave,

as always, I found your articles very useful and educational. Thank you. I have a question, in this one: http://www.askdavetaylor.com/how_to_add_google_maps_directions_tool_search_web_site.html, there is a box with google map and says touch to start, it looks very nice and I would like to embed it into my new site. May be I missed something, there's nowhere in the article mention it. Can you tell me where I can get it?

Thanks.

Rich

Posted by: rich at May 5, 2008 4:03 PM

Exactly what I was looking for. Thanks!

Posted by: Michelle Blum at May 23, 2009 7:30 PM

Hi the above is great information. You have the destination box but how can I put to and from? The search!?

Posted by: Eamonn at June 30, 2009 2:18 PM

I want to utilize the google map function on my website. However, is it possible for this new page (displaying directions) to be embeded onto our webpage?

Posted by: shaan at July 30, 2009 12:46 PM

Exactly what I was looking for, thank you very much for you simple and great explanations.
Btw I'm not that much experienced with this stuff but with your help I did it, it's working perfectly. Thanks again and good luck (Y).

Posted by: White at August 14, 2009 11:58 AM

can you tell me how to put a translation button onto my web site created on iweb 08. I have tried the google translte button but it doesn't function once I have published the page

many thanks

Posted by: steven at December 18, 2009 4:05 AM

Hi Dave,
Great info. Thus far, I am able to get the form as well as the map with start and end route to display on my site. However, I do not have the turn by turn directions. How do I get this component to appear as well?
Many Thanks,
Greg

Posted by: Greg at December 30, 2009 3:25 PM

Greg, are you sure that's not a preference in your browser? Try checking the same page and directions input with a different browser or different computer??

Posted by: Dave Taylor at December 30, 2009 7:57 PM

Hi Dave,
Happy New Year!
THanks for your speedy reply. I have not posted this page to my site yet. I am working with preview in browser from within Dreamweaver, so I am not able to use a different computer. Is there a browser preference that should be set?
WHen you can...
Thanks again,
Greg

Posted by: Greg at January 2, 2010 4:01 AM

I think it is great that you posted this. I have so many people that ask what the code is to insert direction inquiries in to their websites. Now all I have to do is send them this URL. Thanks for sparing me some time and effort having to explain how to do this!

Posted by: John at January 26, 2010 4:54 PM

How to add Google directions to my email? I would like the "Click for Directions" included in my outgoing emails.

Posted by: Belinda at February 23, 2010 8:16 PM

What if I want to use their input as the beginning of a Google Maps route?

GMaps generates a URL for such a route with the non-initial steps all compressed into the "daddr" input field:

daddr=39.010443,-81.090461+to:39.010714,-81.136179

But if you use this notation in your HTML form, GMaps interprets that whole string as a single destination, which it obviously can't find.

Do you know of any way to use such a form to generate directions to a series of destinations?

Thanks!

Posted by: noname at March 6, 2010 4:53 PM

Great article.

Posted by: Chris at April 13, 2010 9:43 PM

Nice article thanks. I create my own version after reading this.

Posted by: Jane at August 3, 2010 4:37 AM

Thanks a lot yaar.... I was just searching for this...

Posted by: philemon at December 14, 2010 7:06 AM

Thanks! How do you pick up the starting address from the sensor?

Posted by: Mal at December 15, 2010 8:59 AM

How do I get the code to just give me a map of a an address I type in? And how can I use this code but promts me for the starting location and destination location???

Posted by: Shane at December 21, 2010 8:53 PM

You sir are a life saver! Thank you so much!

Posted by: D at December 29, 2010 6:23 PM

Where do you put the form????? I keep going to the link but the start and end address still show up! I cannot seem to find where to put

Enter your starting address:

Please please please help!

Posted by: Corbin at March 22, 2011 8:50 PM

Thanks very much Dave.

I Use always "Mapquest", suddenly one client ask for googlemap, i search n found your article and solve problem within 10 min.

i have query:

Is it possible to multiple field address like "Adderess, City, State, ZIP" like "http://www.mapquest.com/" offers.

Thanks again.

Posted by: Dhaval at June 24, 2011 12:00 AM

BRILLIANT! Great stuff man...

Posted by: Michael Rubash at June 29, 2011 6:24 PM

Great. How to add this tool in Flash websites.

Posted by: suvetha at August 1, 2011 6:34 PM

Dave, you are an absolute genius! ... and an absolute angel for sharing your knowledge so freely to help the rest of us.

Posted by: Rebekah at September 1, 2011 5:46 PM

I had been looking for a solution to embed Google Maps. This is even better. Thank you.

Posted by: Bent at September 4, 2011 1:27 AM

Thanks a lot for the article. Exactly what I was looking for.

Posted by: Debarupa at October 21, 2011 12:15 PM

hi I found this tutorial and was quite helpful...
But when i was trying to give input form a dropdown menu eg

"<form id="form1" name="form1" method="get" target="_blank" action="http://maps.google.com/maps">
<select name="kk" id="kk">
<option value="mnit">mnit</option>
</select>
<select name="ll" id="ll">
<option value="tonk">tonk</option>
</select>
<input type="submit" name="s" id="s" value="Submit" />
</form>"

I doesn't work write!!!!
can you please help me with this

Posted by: amit at October 28, 2011 9:57 AM

I have something to say, now that you mention it, but ...

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you for all your efforts on this Web site by buying you a cup of coffee!

I do have a comment, now that you mention it!