In this video I will show you how to add Google Maps directions to your website for free!
Timestamps:
- 0:00 Introduction
- 2:05 Example 1
- 5:02 Example 2
- 7:27 Example 3
- 10:03 Add Form To Default WordPress Page
- 11:14 Open in New Tab
GitHub Link:
https://github.com/solodev/form-posting-to-google-maps
Example #1 HTML Code:
<form action="//www.google.com/maps" id="">
<input aria-label="From Location" id="" name="saddr" placeholder="FROM" type="text">
<input aria-label="To Location" id="" name="daddr" placeholder="TO" type="text">
<input type="submit" value="PLAN NOW">
</form>
Example #2 HTML Code:
<form action="//www.google.com/maps" id="">
<input aria-label="From Location" id="" name="saddr" placeholder="FROM" type="text">
<input aria-label="To Location" id="" name="daddr" placeholder="TO" type="hidden" value="Philadelphia PA">
<input type="submit" value="PLAN NOW">
</form>
Example #3 HTML Code:
<form action="//www.google.com/maps" id="">
<input aria-label="From Location" id="" name="saddr" placeholder="FROM" type="text">
<input aria-label="To Location" id="" name="daddr" placeholder="TO" type="text">
<select name="dirflg">
<option value="r">Public Transit</option>
<option value="d">Driving</option>
<option value="w">Walk</option>
<option value="b">Biking</option>
</select>
<input type="submit" value="PLAN NOW">
</form>
Open in New Tab HTML Code:
<form action="//www.google.com/maps" id="" target="_blank">
<input aria-label="From Location" id="" name="saddr" placeholder="FROM" type="text">
<input aria-label="To Location" id="" name="daddr" placeholder="TO" type="text">
<input type="submit" value="PLAN NOW">
</form>
