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:

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.