Get Directions Form (Google Maps)

<form action="" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />

saddr = blank input field for entering START address
daddr = hard-coded END address

Enter an address and press button and a popup window opens with directions. Enter no address, and just a map of the END address opens.

Live Demo


Reference URL


  1. Al
    Permalink to comment#

    thanks for this snippet,
    just used it on a site I maintain for the curling club I belong to, seems to work like a charm, does not require much adjustment to get it working,
    nice addition to the list


  2. elundmark
    Permalink to comment#

    Funny how this was Just what I needed today! And I wasn’t even looking for it…
    – Thanks!

  3. Troy
    Permalink to comment#

    How can I add this to a button that when clicked on pops up the form?

    • Jack Bliss
      Permalink to comment#

      I’d use jQuery. Wrap this in a div with id ‘formpp’ (for form pop up) and then try something like,

      } else {

      Whenever you click on a with class ‘popup’ now, the ‘formpp’ will appear if it’s hidden, or hide if its visible. You’ll need to make sure you import jQuery into any document you’re working on.

    • James Finn
      Permalink to comment#

      @Troy – The answer to your question is here.

      After googling for a week, I frankensteined some js together. After I couldn’t get it to work, I posted it on stackoverflow, and a contributor was nice enough to put on the finishing touches. (I marked the answer correct).

      I can’t wait to start school so I can quit groveling in the forums and learn this stuff for real.

  4. Gourmador
    Permalink to comment#

    Hello Chris and folks!

    I really like this stuff ,but I am actually wondering if I can use this for commercial issues. Like a homepage for a restaurant?
    Do anybody knows if there a copyright for the goggle-maps stuff?

    Greetings from germany, Gourmador.

  5. Adam

    This is a nice snippet; however, it doesn’t validate with the W3C. Here is one that does:

    It is almost identical; however, lacks the target=”_blank” and wraps the inputs in a p tag to validate.

  6. chinmayee
    Permalink to comment#

    this is good but wat if we are using google maps in our website
    the code of wat get directionsis all about is not clear
    hoping a clear solution

  7. Teodor Bochev
    Permalink to comment#

    Thank you!

    It will be great, if possible to open the popping up GoogleMap Window in a Lightbox?


  8. Greg
    Permalink to comment#

    Yeah anyway to have the results in a modal pop up?

  9. Cihad
    Permalink to comment#

    This is really great!

    I just use that and it works fine in Turkey.

    Thank you.

  10. Saquib
    Permalink to comment#

    Thanks, I t was very helpful.
    How i can show the distance in kilometer?
    I am submitting the form in iframe with target attribute of form.

  11. Kirsty Elms
    Permalink to comment#

    Love this article and feature! I will definitely be using this on any websites that i create in the future.

    Thanks you :-)

  12. Aimee
    Permalink to comment#

    Great! Thanks.

  13. Ankit
    Permalink to comment#

    cool…indeed very cool…i was just surfing your website and found this…next what i copied the code in my notepad and found exactly what i wanted…thank you for guiding me…

  14. Richard Deakin
    Permalink to comment#

    HI I like the google navigation form but the form is missing form labels so it wouldnt be read by a screen reader.

  15. Derek
    Permalink to comment#

    Thanks! Great to have the directions widget right on a website rather than having people click around once the get to google maps.

  16. Jacob

    This was exactly what I was looking for. Thank you so much for sharing. You really helped me out.

  17. shahil
    Permalink to comment#

    I want to have people be able to enter their address into a text box, press submit, and then display the results on my own page instead of it going directly to can this be done?

  18. Chris
    Permalink to comment#

    Is there anyway to display the driving directions on my website after the user submits their address?

  19. Sarah
    Permalink to comment#

    Thank you. This is great! I would also love to know how to display the direction results on my webpage after the user submits their address. Just like this website (i know its in dutch but its the only one I came across) Thanks:

  20. Sathish
    Permalink to comment#

    Nice, But, i would like to know how it works on a same page rather than being redirecting to the google map url. I am actually looking for map search API.

  21. Moncho
    Permalink to comment#

    Hello, I’m trying to use this search box, but I want to do it on a given page, which I have called “Locate”, but I do not get to do it this way, no search box appears where I can enter data. How I can create a search box with HTML to put in these pages that only accept HTML?
    Thank you very much!

  22. Mark
    Permalink to comment#

    I love you. Seriously, always great info. Thanks!

  23. Seth
    Permalink to comment#

    Just saved me an hour. Awesome.

  24. Gary

    I just tried the demo – worked lovely, but said to Fly to London, United Kingdom—New York, NY, round trip $670.

    Is this worth paying to come visit you Chris? haha ;)

  25. Rick Vidallon
    Permalink to comment#

    Thanks for posting this snippet:
    saddr = blank input field for entering START address
    daddr = hard-coded END address

    I had 2 directions boxes and needed to add 2 more.. but the new ones would not work.
    When I look closer the editor had added a ‘2’ in the code
    saddr2 = daddr2= which cause it to break…. ( its the little things that count!)

  26. Raquel Fantasia
    Permalink to comment#

    It works well with Decimal Latitude and Longitude values :)
    … input type=”hidden” name=”daddr” value=”40.7499839,-74.0180638″ …

  27. David - Leeds

    Perfect, just what I needed. Thank you.

  28. raza
    Permalink to comment#

    @Raquel am also using lat and lon values. But how i display custom title with lat and lon values because it show these values on title

  29. FilipePinho
    Permalink to comment#

    Very good post! thanks a lot

  30. Terence
    Permalink to comment#

    Super little tool – thanks for having nice simple code to use!

  31. Way
    Permalink to comment#

    Does anyone know how to change it so that the user can get directions from current location rather than inputting the address?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.