Building A Dynamic Link To Directions In Google Maps

February 28th, 2013 - Posted by Steve Marks to Web Development.

Normally if you wanted to get directions between two places, you’d go to Google Maps and enter two locations; your starting position and destination. In doing this you can then copy the direct link which will look something like so:

Google Map Directions,-1.863632&sspn=0.347958,1.056747&geocode=FVMHMAMdCrPd_ynb9SZSTE16SDGqa_4EOBS-2Q%3BFa7_EQMd8Cv-_yl13iGvC6DYRzGZKtXdWjqWUg&oq=London&mra=ls&t=m&z=8

Easy, right? But what if we want don’t know both of the locations?

The Solution

To begin with and to make things easier, we can reduce the URL above down even further by removing a lot of the parameters, so it just becomes:

The parameter ‘saddr’ (ie. start address) is where the directions will begin, and ‘daddr’ (ie. destination address) is where they will terminate. It’s important to understand which is which as we don’t want to provide directions the wrong way.

Now, lets imagine that a company has a ‘Contact Us’ page on their website, and they want to provide users with the ability to get directions to their offices. We know the companies address, but we don’t know the user’s address. As a result we might have a form that looks something like so:

<form action="" method="get" target="_blank">
	<input type="text" name="saddr" value="">
	<input type="text" name="daddr" value="The companies address">
	<input type="submit" name="Submit" value="Get Directions">

When the user enters their address, the form will submit to Google Maps in a new tab/window and will open with the directions loaded by default.

This entry was posted on Thursday, February 28th, 2013 at 10:48 am by +Steve Marks and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first