What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » HTML » Get Directions Form (Google Maps)

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

Subscribe to The Thread

  1. Al

    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

    Reply ↓
  2. elundmark

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

    Reply ↓
  3. Troy

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

    Reply ↓
    • Jack Bliss

      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.

  4. Gourmador

    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.

    Reply ↓
  5. Adam

    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.

    Reply ↓
  6. saurabh

    Thanks. I will try to stuck it on my website

    Reply ↓
  7. chinmayee

    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

    Reply ↓
  8. forblogger

    Nice Sharing but im still Puzzled :(

    Reply ↓
  9. Teodor Bochev

    Thank you!

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

    Cheers!

    Reply ↓
  10. Greg

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~