MapQuest Direction Plugin

10/23/2004 03:31 PM by Chris Toohey

I was asked by a client the other day if I could include a simple function in the "Directions" section of their website - a link to MapQuest with their company address preset as the destination address.

I was able to build upon that request and come up with something that, while very simple, it's the method that I used to get this done that I thought I would share, as well as the since I've already invented the wheel code in case you find your applications needing such a function!

That being said, here's what I did...

First and foremost, I went to MapQuest to see exactly how they submit their information - that is, what happens after you type in your from and to addresses?

Luckily for me, this was the (well, one of the...) easiest parts, as MapQuest passes the address information through the URL. To find this out, I simply passed unqiue dummy data to each field (see below) and read the URL that was returned when I pressed "Get Directions".

From this, I could see just what the URL was passing to the MapQuest directions engine, which I could use to create a plugin for any website

The URL that was returned looked like this when I copy/pasted it into Notepad:

img src="pages/mapquestdirectionsplugin.html/$file/mapquest_URLinNotepad.gif" alt="URL in Notepad">

Now, it was simply a matter of providing the user a entry form to populate the needed information (ie, starting address, city, state, etc.) that would be passed to the MapQuest directions engine via the URL, and then the function that did it! I did the first part of this with some very quick and basic HTML.

The Javascript function was simply a call to "launch" the URL grabbing the field values from my simple HTML form: (replace all "_" in the script below)

function runMQdir() {
var sURL = "http://www.mapquest.com/directions/main.adp?_
go=1&do=nw&un=m&2tabval=address&cl=EN&ct=NA_
&1tabval=address&1y=US&1a="+document.mapquestdirections_
.address.value+"&1c="+document.mapquestdirections.city.value_
+"&1s="+document.mapquestdirections.state.value+"&1z="+
document.mapquestdirections.zip.value_
+"&1ah=&2y=US&2a=DESTINATIONADDRESSGOESHERE+&2c=_
DESTINATIONCITYGOESHERE&2s=DESTINATIONSTATEGOESHERE&2z=_
DESTINATIONZIPCODEGOESHERE&2ah=&idx=0_
&id=41755abe-0007e-06b5f-400c252d&aid=41755abe-0007f-06b5f-400c252d";
var target ="_blank";
window.open(sURL, target)
}

Now that I had my little snippet of HTML and my javascript function, I could add CSS for styling and provide a small afterthought of an enhancement - but one that can really bring the customer right to your front door!