Using Google Maps to get directions based on a postal code
Adding Google maps to your website to show where your business is located is becoming quite a popular feature of many websites. It enables the user to see where you are located and give them a vague idea on how to get to that location. Though wouldn’t it be nice if we could give specific directions depending on the viewer’s location?
In this article I will explain a basic technique that will allow you to create a customized directions system that will plug directly in to Google Maps to output directions based on a users address or postcode.
To start off, we need a Google Maps url to integrate into our system.
- In the Google Maps interface, search for your destination (Business address or postcode). For this example I am going to use Glasgow Central Station.
- When your result is returned you should see the speech bubble appear above your destination. This contains various information such as the address and some options. From the list of options click ‘Get Directions’, this should bring up a textbox asking for your stating location.
- Ensure that ‘To Here’ is selected from the ‘Get Directions’ options. In the ‘Start Address’ box, insert “XXXXXX” (this is purely to make the address easy to locate within the query string that will be generated) and hit GO.
- Now if we click the link button at the top right of the Google Maps window we are faced with two options. “Paste link in email or IM” and “Paste HTML to embed in website” copy the “Paste link in email or IM” to your clipboard and paste it into notepad or any other text editor.
My url looks as follows:
1 2 | <a href="http://maps.google.com/maps?daddr=Central+Station,+Glasgow,+Lanarkshire+G1,+UK&geocode=CTL7KUd6bMgcFWBYVAMdcAa__w&dirflg=&saddr=XXXXXX&f=d&sll=55.859296,-4.258192&sspn=0.008586,0.01929&ie=UTF8&z=11">http://maps.google.com/maps?daddr=Central+Station,+Glasgow,+Lanarkshire+G1,+UK&geocode=CTL7KUd6bMgcFWBYVAMdcAa__w&dirflg= &saddr=XXXXXX&f=d&sll=55.859296,-4.258192&sspn=0.008586,0.01929&ie=UTF8&z=11</a> |
As you can see I have “saddr=XXXXXX” included in the query string. saddr stands for Start Address and the XXXXXX is the physical address that you wish to start from.
We now need an ASP.NET project to include this code in. I have created a page that consists of a TextBox and a Button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta name="Description" content="" /> <meta name="Keywords" content="" /></head> <body> <asp:TextBox ID="txtAddress" runat="server" /> <asp:Button ID="btnSubmit" Text="Submit" runat="server" /> </body> </html> <form id="form1"> </form> |
The aim of this page is to allow a user to insert a postcode or address into the textbox and when the button is clicked, they are redirected to Google Maps and the directions from the inserted address to your destination will be shown in the Google Maps interface. To allow this to happen we have to take the following steps after the button is clicked
1) Get the address from the value of the textbox (txtAddress)
2) Insert the address into the query string that we collected on Google Maps
3) Redirect the user to the URL that we have built up using the address and the Google Maps query string.
The code for this should look similar to the following
1 2 3 4 5 6 7 8 9 10 | protected void btnSubmit_Click(object sender, EventArgs e)
{
string address = txtAddress.Text;
string url = "http://maps.google.com/maps?daddr=Central+Station,+Glasgow,+Lanarkshire+G1,+UK&geocode=CTL7KUd6bMgcFWBYVAMdcAa__w&dirflg=&saddr">http://maps.google.com/maps?daddr=Central+Station,+Glasgow,+Lanarkshire+G1,+UK&geocode=
CTL7KUd6bMgcFWBYVAMdcAa__w&dirflg=&saddr=" + address +
"&f=d&sll=55.859296,-4.258192&sspn=0.008586,0.01929&ie=
UTF8&z=11";
Response.Redirect(url);
} |
After this, don’t forget to link up your method to your button
1 | <asp:Button ID="btnSubmit" Text="Submit" onClick="btnSubmit_Click" runat="server" /> |
Inspired by WDuffy
Impressive! Most sites I’ve viewed only have static Google Maps. It’s great how a few simple lines of ASP.NET can create such a useful system!
Hi, I am a beginner in all these and i would like to ask if it is possible to get the copy your google map project for my reference. I would like to see how the GUI looks like and figure things out.
If it’s possible, would you contact me at tanlee85@yahoo.com.sg.
Your help will be greatly appreciated.
The GUI on this specific project consists of nothing but a text box and a button. The button when pressed redirects the user to maps.google.com with a query string which is built up from the user’s input.