01 May 2005

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

Sunday, 1st May 2005, 2:32pm GMT
Updated Wednesday, 29th June 2005, 7:39pm GMT

Filed under: Client-side Coding, Hints and Tips, Search Engines, Web

Short URL: http://malevolent.com/105 Post to Twitter

Comments

I used this on my site. Thanks

— Russell, 28th May, 5:35pm

coolnees. And no, it's not obvious to a non geek like me

— Hashim, 29th May, 1:08am

This is fantastic! Featured on http://www.orature.com/

— automatt, 29th May, 8:02am

Cool. Posted it on my site.

— XeroCool, 29th May, 6:23pm

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.

— the biscuit man, 30th May, 7:28am

Agreed. It's a fine thing you've done. Thanks!

— moseleyblogger, 30th May, 9:05am

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?

— NHJim, 31st May, 8:50pm

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.

— Matt Round, 31st May, 10:01pm

Sweet! Thanks for the fun idea. I used this on my site's contact page.

— Phillip Harrington, 31st May, 11:55pm

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.

— John Forsyth, 3rd Jun, 8:19am

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

— Matt Round, 3rd Jun, 2:04pm

This is cool. I have it at http://www.tech.ebloggy.com/

— Brian Drews, 3rd Jun, 7:49pm

nice one.

— KJ Sampat, 3rd Jun, 8:35pm

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.

— Matt Round, 7th Jun, 12:29pm

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.

— ad, 13th Jun, 7:43pm

You 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)

— Matt Round, 13th Jun, 8:35pm

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.

— Matt Round, 14th Jun, 7:58am

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/ ).

— Matt Round, 14th Jun, 9:01pm

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?

— Armen Shagmirian, 13th Sep, 6:35pm

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.

— Marc Woolfson, 15th Sep, 11:34am

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 Round, 8th Oct, 8:05am

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.

Add Google Maps’ Directions to Your Site

USA

Example: Show me the way to Amarillo

UK

Example: Didn’t we have a lovely time the day we went to Bangor

Comments

Blatant self-promotion

malevolent design