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):
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:
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:
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:
Then I added two “Web Request” controls into the blank areas in my form:
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
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
So, that’s the final configuration of my form:
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.
For this example, it doesn’t make a big difference (2 minutes and 8 km).
If you have any questions, found an error or have a better way to accomplish this, feel free to contact me!
