DirectionsFormHTML

Check Out This HTML Code for a Google Maps Directions Form

Want to have a directions form, like the one below, on your website? The code can be found below to get a simple & effective directions form.

Directions to Joshua Tree National Park



Here’s a useful tool for efficiently adding Google Maps navigation to a website, without the need to click through to another page to enter address information.

The following HTML code can be used to create simple directions from a user-inputted address to a predetermined address

Copy the Code Below for Easy & Functional Google Maps Directions

<h3>Directions to Joshua Tree National Park</h3>
<form style=”margin-top: 10px;” action=”http://maps.google.com/maps” method=”get” target=”_blank”><label for=”saddr”>Enter your location</label> <input name=”saddr” type=”text” />
<input name=”daddr” type=”hidden” value=”Joshua Tree National Park” />
<input type=”submit” value=”Get directions” /></form>

This feature can be implemented into your website’s ‘Contact Us’ page to help users find directions either through desktop or mobile directions. This ca be used in addition to a traditional Google Maps Embed or Maps API Embed; it’s meant to complement a map visual with a form for receiving directions without having to load another screen before typing.

All you need to do is modify the destination address & title to get these few lines of code properly working. Also, you can enter full street addresses or Google Places information (note how the example above just shows the name of the national park).

This certainly seems like an easy way for web designers to spruce up an old ‘Contact Us’ page on a local businesses website or any client site.

Check out these posts if this sort of landing page optimization is intriguing:
Start Making Better Google Maps Embeds
Data Vizualization Using the Google Maps API
W3 Schools Maps API – Beginners Tutorial

If you have any questions or comments, please send an email: will[at]mindbodymetrics.com

-Will

For reference, entering ‘Yellowstone National Park’ in the form above yields the following window below to open:

Leave a Reply

Your email address will not be published.