Nintex Forms – Automatically calculate distance between two cities with the Web Request Control and the Google Distance Matrix API


Badge +6

In this blog post I’d like to show, how to use the Nintex Forms “Web Request” control together with the Google Distance Matrix API to automatically calculate the distance between two cities and the estimated duration for that trip.

At the end the form will look like this (Edit mode):

image

Setup Google Distance Matrix API

Before the implementation of the SharePoint list and the Nintex form, some simple steps need to be performed, to be able to use the Google Distance Matrix API. The documentation of the Distance Matrix API can be found here: Developer's Guide  |  Google Maps Distance Matrix API  |  Google Developers 

The most important point is the generation of necessary API key, the process for this is described in the “Get a key” section of the documentation:

image

After reading the documentation I configured the following request:

https://maps.googleapis.com/maps/api/distancematrix/xml?origins=Hamburg+22763&destinations=Muenchen+80331&mode=driving&language=de-DE&key=************************  

In this request, there can be found the departure value (“Hamburg”) with the corresponding departure zip code value (“22763”) and the destination value (“Muenchen”) with the corresponding destination zip code value (“80331”). Furthermore, the mode is set to “driving” and the language is configured to be German (“de”). At the end of the request there’s the necessary API key.

Please be aware that you need your own API key! The URL provided in this blog post won’t work for you!

The result of this call looks like this:

<DistanceMatrixResponse>
    <status>OK</status>
    <origin_address>22763 Hamburg, Deutschland</origin_address>
    <destination_address>80331 München, Deutschland</destination_address>
    <row>
        <element>
            <status>OK</status>
            <duration>
            <value>26400</value>
            <text>7 Stunden, 20 Minuten</text>
            </duration>
            <distance>
            <value>797062</value>
            <text>797 km</text>
            </distance>
        </element>
    </row>
</DistanceMatrixResponse>

Creation and configuration of the needed list

For this scenario, I set up a simple custom list called “Driver’s logbook” and added the following columns:

image

Configuration and implementation of the Nintex form

Then I started to configure the Nintex form. As always, I first made some basic changes and adjustments like changing the background colour, the grid cell size and the logo. Furthermore, I removed some control that I didn’t need, like the “Distance” and the “Duration” control.

Afterwards my form looked like this:

image

Then I added two “Web Request” controls into the blank areas in my form:

image

Then I started with the configuration of the control that should show the distance, at the end the configuration looked like this. These are all the settings that I changed

Name = Distance
Text connected to = Distance
Display format = Text
Service URL = https://maps.googleapis.com/maps/api/distancematrix/xml?origins=Departure+Departurezipcode&destinations=Destination+Destinationzipcode&mode=driving&language=de-DE&key=************************
XPath for display = //row/element/distance/text
Execute in view mode = Yes

image

Afterwards I configured the control that should show the duration, at the end the configuration looked like this. These are all the settings that I changed:

Name = Duration
Text connected to = Duration
Display format = Text
Service URL = https://maps.googleapis.com/maps/api/distancematrix/xml?origins=Departure+Departurezipcode&destinations=Destination+Destinationzipcode&mode=driving&language=de-DE&key=************************
XPath for display = //row/element/duration/text
Execute in view mode = Yes

image

So, that’s the final configuration of my form:

image

When I now fill out the form and enter a destination the distance and the duration will automatically be calculated. To get a better result I decided to also add the destination zip code and made it mandatory, as in some cases cities also have the same name.

image

For this example, it doesn’t make a big difference (2 minutes and 8 km).

image

If you have any questions, found an error or have a better way to accomplish this, feel free to contact me!


2 replies

Userlevel 6
Badge +13

I like this solution. I created a store locator for my client, using just a basic list with Geolocation fields in. However, this would provide a nice extension for them as it is designed for customer services to help customers find their nearest store.

Userlevel 6
Badge +13

I have now implemented this for the client and really happy with it. Because we are not looking for a single destination I've used Polyline encoding to submit a list of our stores through the query string as the destinations and then using the XML that's returned I can sort the results so the result with the lowest mileage appears first. I've got to polish up the result but will blog it when done.

Reply