Grow your CSS skills. Land your dream job.

Last updated on:

Get Directions Form (Google Maps)

<form action="http://maps.google.com/maps" 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" />
</form>

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

Comments

  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

    Al

  2. 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?

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

      $(‘button.popup’).click(function(){
      if($(‘#formpp’).is(‘:visible’)){
      $(‘#formpp’).hide();
      } else {
      $(‘#formpp’).show();
      }
      });

      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. This is a nice snippet; however, it doesn’t validate with the W3C. Here is one that does:

    http://malevolent.com/weblog/archive/2005/05/01/add-google-maps/

    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. Thank you!

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

    Cheers!

  8. 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. 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. Love this article and feature! I will definitely be using this on any websites that i create in the future.

    Thanks you :-)

  12. 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. 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 maps.google.com. 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:

    http://m.diks.nl/app/vind-ons/664589/2/

  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. 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. 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!)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".