Google Maps Address Autocomplete and Distance Calculation

With the Google Maps Address Autocomplete extension for ez Form Calculator, you can offer your visitors the intuitive type-ahead-search behavior to easily set their addresses and calculate any distance.

In order to use this extension, a valid license of the premium version of ez Form Calculator is necessary. You will also need an API key from the Google Developer Console for the following services:

• Maps JavaScript API
• Directions API
• Distance Matrix API
• Places API

Address Autocomplete and Distance Calculation Example

In this example, the distance between the Weserstadion (SV Werder Bremen) and the Volksparkstadion (Hamburger SV) is measured. The calculation element retrieves the distance value and multiplies it by 2. Note that the distance value is returned in meters so the value is divided by 1000.

Installation Guide

API Key Setup

1. Go to the plugins page of your WordPress dashboard and click on Add new
2. Click on Upload plugin, upload the zip-file of the extension and activate it afterward
3. Go to the Google Developer Console, add a new or select an existing project
4. Click on Credentials, create credentials, API key (you don’t need to copy it now, we’ll do that later)
5. Click on Library and enable the following services for your API key:
   1. Maps JavaScript API
   2. Directions API
   3. Distance Matrix API
   4. Places API
6. Once you’ve enabled the services, copy the API key, go back to your WordPress dashboard and click on Global settings in the ez Form Calculator submenu
7. Click on the Address section, paste the API key into the Google Address API Key option and click on Save

Address Form Setup

1. Create or select a form on the ez Form Calculator main page
2. Select the Other section in the Add elements group and add the Address element
3. Open the recently added Address element and configure the element to your needs

Test the form on a separate page and enter a valid address into the address element. If everything works correctly, you should see autocompleted address fields you can choose from. If it doesn’t work, make sure to check if you have selected all necessary API keys (you might want to take a look into the browser console to look for errors).

Address Distance Calculation Form Setup

1. Create or select a form on the ez Form Calculator main page
2. Select the Other section in the Add elements group and add two Address elements
   1. If you have a fixed address and only need to calculate the distance to the target address, you only need to add one address element
3. Select the Calculation section and add the Distance element
4. Open the Distance element and select your home address element (Distance_home_address_element) as well as the target address element (Distance_target_address_element)
   1. If you have a fixed address, enter this into the Distance_home_address element
5. (optional) If you want to to show the calculated distance (and route), perform the following steps:
   1. Add an HTML element, click on Text and enter the following code:
      <div id='distance-map'></div>
   2. In the Distance element, enter the value distance-map into the Map_dom_id option