How to integrate the Google map support in Azure Bot Service / Luis

Context

A system needs to collect information related to the garbage locations from the user. You decide that one of the interfaces that you want to build is based on a chatbot.

What do we want to achieve?

The user is not all the time in the same location where the garbage was spotted. You want to provide the user the ability to use an interactive map to select the location where the garbage is.

Technology stack

The selected bot that you decide to use is Azure Bot Service and will be fully integrated with Facebook Messager. We are using Node.JS to write the custom code required to run the application.

The challenge

Azure Bot Service does not have the ability to display an interactive map in the chat, that would allow the user to select a location.

How to solve the problem

Allowing users to type a specific address or ZIP code might work, but would not indicate the exact location of the garbage.

Requiring GPS Coordinates would work, but would not be an easy task for an average user and you might lose people’s interest. There are multiple GPS coordinates standards and ways to express a location and you would need to handle a lot of data transformation. You would increase the error-prone in this way.

Another approach can be based on your favorite map provider. In my case, Google Maps is one of the best options that I have in my area. The solution is built around a custom web page that is shared with the user at the moment in time when he needs to select the location. That page is unique generated for that session and allows Azure Bot Service to get the exact coordinates where the garbage was spotted.

In the above solution, we are using Azure Functions to generate on the fly a custom web page where Google Map is displayed. Azure Web App is used to host a Node.JS web application used to render the map. We preferred Azure Web App because there is also some logic that needs to run behind the scene and was the most simple solution available. Another Azure Function is called once the user submits the GPS coordinates. From there, the coordinates are sent to Azure Bot Service and the user is notified that the coordinates were submitted successfully.

We covered only how we can get the GPS coordinates, around the solution we need additional Azure Functions and a database like Azure Cosmos DB.