Web Design Try to give your customers better directions than this

Published on May 18th, 2012 | by charliesaidthat

27

How To Add Google Map Directions (For Customers) to Your Website

Try to give your customers better directions than thisHere is a *really* simple way you can give customers directions to your business from their home, office or wherever they happen to be. This is amazing, and you can implement it almost immediately.

Honestly, It’s just a couple lines of code which adds immediate value to your contact us or find us page.

 


<h2>Get Directions</h2>
<form action="http://maps.google.com/maps" method="get" target="_blank">
<p>Enter your starting address:</p>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="[Your Business Address Here]" />
<input type="submit" value="Get Directions" />
</form>

Here, try it – here’s one of my favourite places to grab food in London (if you like this tip, maybe you could take me…): The code will look like this.

Get Directions

Enter your starting address:

Go ahead get it on your site… it’ll take you two seconds to copy and paste it.

Thanks to Dave Taylor for this code and a further explanation of what’s going on here.

Tags: ,


About the Author

Hi I’m Charlie, a digital strategist, I have an interest in social media, SEO, lead acquisition and understanding consumer behaviour to make a definitive difference to the businesses I work with. Find me on: Twitter | Instagram | Facebook | Linkedin | or just Email Me  



  • codepotato

    Genius as ever mate, love it! 

    • http://charliesaidthat.com/digital charliesaidthat

      Thanks buddy. Was desperate to use this functionality on something I’m working on. Though I should share. :)

  • Patrik Jäghammar

    Hi, great app. I would like it to return the distance on the website to calculate the cost for transportation, do you have any tips how to do that? 
    // Patrik Jäghammar  

    • Nigel Stewart

      Yes, this would be good with cost input form dialog… possibly requires a javascript calculator like slikcalc.

  • Guy R Cross

    Awesomely simple… thanks!

  • riyasahen

    good buddy….more help…

  • Ollie Pryer

    How can I change the font size and colour to match the existing on my website?

    http://parkglass.co.uk/contact-us.html

    • http://charliesaidthat.com/digital/ charliesaidthat

      Hey Ollie, I’m not a fantastic coder. But I presume you mean the background colour.

      It looks like this line of code:

      style=”font:10px Tahoma; color:#262626;”

      is to blame. I would go into your editor and see if you can remove that span style.

  • Sarah

    Hi Charlie. Thank you for this information. I was wondering do you know how I could display the directions on my own web page after the user enters their starting address rather than going to the google maps page? Thanks, Sarah

    • http://charliesaidthat.com/digital charliesaidthat

      Hi Sarah,

      Hopefully you’ll catch this. I’m not sure off the top of my head how you would do this without using an iframe. I’ll look into it for you though!

      Best,
      Charlie

    • http://charliesaidthat.com/digital/ charliesaidthat

      Hi Sarah,

      I’m afraid I haven’t figured that out – but find that most users are happy with being taken to Google Maps as that is what they expect across most websites!

      C

  • Mohammad Amirzad

    Hi,
    i found it really simple but how can i add my own busieness adress ??

    Regards

    • http://charliesaidthat.com/digital/ charliesaidthat

      Hi Mohammed,

      In this line of code:

      You just need to replace this part:
      [Your Business Address Here]

  • roscoe studio

    Hey Charlie, you tha man! Thanks

    • http://charliesaidthat.com/digital/ charliesaidthat

      more than welcome! :)

  • Julianne Kolb

    hey there, total and complete html newb here. this all worked wonderfully, thank you for that! just wondering, how do i change the font and the font size of the text that displays?

    • http://charliesaidthat.com/digital/ charliesaidthat

      Hey Julianne,

      Good work on getting the code to work. :)

      To change the fonts and size of the text you should really use CSS to style your and p tags.

      Alternatively if you needed completely separate styling you could use something like the following code in your HTML:

      but I’d highly recommend you put that code in your CSS so your site is easier to style in the future.

  • Pingback: How To Link to Google Maps Driving Directions to Business...()

  • James Morden

    Works great! Simple. Clean. Much appreciated.

  • Charan Planforpicnic

    great & simple script……..

  • Susan Pittman

    Fabulous! Thanks! Exactly what I needed

  • Bhawana Bothara

    Hi I need to show the direction on the map i have embedded on to my site. Like this http://www.hotelarcopalace.com/hotels-jaipur/location

  • Mikail Yilmaz

    Good Job :)

  • Myles

    Thank you for this! it works great :D

  • Anu Rose

    Really Awesome…Thanks!

  • Vishal Koshy

    Hi Charlie, great info! Plz advise how it works for a smartphone user? Can we modify the coding to access the users current location from gps or ip location? That would be awesome!

  • Andy Clark

    How can I make the Title, input box and button all appear on one line, not under each other? Also, how can I centre them on the webpage?

    Thanks.

Back to Top ↑