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





 

Comments

  1. User Avatar
    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. User Avatar
    elundmark
    Permalink to comment#

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

  3. User Avatar
    Troy
    Permalink to comment#

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

    • User Avatar
      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,

      $(‘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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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.

  6. User Avatar
    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. User Avatar
    Teodor Bochev
    Permalink to comment#

    Thank you!

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

    Cheers!

  8. User Avatar
    Greg
    Permalink to comment#

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

  9. User Avatar
    Cihad
    Permalink to comment#

    This is really great!

    I just use that and it works fine in Turkey.

    Thank you.

  10. User Avatar
    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. User Avatar
    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. User Avatar
    Aimee
    Permalink to comment#

    Great! Thanks.

  13. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Jacob

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

  17. User Avatar
    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. User Avatar
    Chris
    Permalink to comment#

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

  19. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Mark
    Permalink to comment#

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

  23. User Avatar
    Seth
    Permalink to comment#

    Just saved me an hour. Awesome.

  24. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    David - Leeds

    Perfect, just what I needed. Thank you.

  28. User Avatar
    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. User Avatar
    FilipePinho
    Permalink to comment#

    Very good post! thanks a lot

  30. User Avatar
    Terence
    Permalink to comment#

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

  31. User Avatar
    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?

  32. User Avatar
    Bruce
    Permalink to comment#

    Love this code super helpful, I have one question though. Is there a way to make the code https instead of http. I want to put it on a https site and when on that site it tells you that you are submitting information to an “unknown 3rd party do you wish to continue”. while I know this code isn’t actually going anywhere except through the code it makes people nervous to see the text pop up.

    • User Avatar
      Bruce
      Permalink to comment#

      Figured out my own question. So if you are running a site on https and want to run this code simply change the http in the code to https://maps.google… and continue rest of code as normal.

  33. User Avatar
    Joshua
    Permalink to comment#

    As long as the user is clicking on the link from a device which provides location (a computer connected to Wi-Fi or a smartphone with location services authorized), the following URL scheme will automatically generate directions without requiring users to input their current location:

    https://www.google.com/maps/dir/CURRENT+LOCATION/1234+Address+Avenue+E,+City,+State+77840

    By including the string Current+Location, Google will fetch current location and generate directions (invoked by the /dir/ prefix) from the user’s current location!

  34. User Avatar
    Dave
    Permalink to comment#

    This is pretty good code. But is there any way to get the map with the directions to appear in an iframe instead of on a separate web page? I’ve been trying to get it to appear in an iframe but having no luck.

    Thanks in advance.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag