How to Create a Form that Posts to Google Maps


If your webpage relies on the user getting directions to a specific location, you may want to post that inquiry to Google Maps so that the user can get immediate (and largely) accurate descriptions.

How to Create a Form that Posts to Google Maps

Embedding Google maps on your website is a great way to help your website visitors locate your business address but you can also go a step further and help your visitors directly get directions to the addresses you listed on your website. In this tutorial, we'll show you how to create a form that will post to Google maps.

Displaying directions

The parameters below are used to display directions between two locations:

  • saddr: Sets the starting point for directions searches. This can also be a latitude and longitude. 
  • daddr: Sets the end-point for directions searches. It has the same format and behavior as saddr.

HTML

Copy and paste the form below in your project. We have two input fields: one for the starting address input and one for the ending address input. 
Make sure the form action links to //www.google.com/maps

In this tutorial, we left the value of the end address blank but if you'd like to set a certain address as the ending address, you can do so by adding a value attribute to the second input fields named daddr and setting it to the value of the address you'd like to use:

And this would be the output:

Alternatively, you can set the text input of the ending address input field to hidden. That way, only the starting address ending point would be visible to the user:

alt text

From a point of user experience though, we don't recommend setting the destination address as hidden since the users may want to see the address and make sure it is correct before submitting the form.

CSS

And there we have it. In the JSFiddle below, enter a starting point, an ending point then click on the "Plan Now" button; a popup window will open with directions.

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.