Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

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!

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: Computer and Internet Basics (Article 7982)
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 useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

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 have a lot to say, but ...

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

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