Table of Contents

How to extract data with Google Maps API and Calculate Distances

Abby Updated by Abby

Extracting data

When we collect information it's important to make sure that what the end user provides is accurate, and a great way do this is to use the Google Maps verification system that helps us with such process.

To achieve this we will use Google Maps API's to pinpoint the given location and let the end user verify themselves whether or not it's accurate, and we will handle all the inputs from the users from the flow of our bot.

For the first part, we will need to create a Google API account with Geocoding, Maps Embed, Maps Javascript, and Places enabled, which is free, however you will need to enter your billing information (https://developers.google.com/maps/api-key-best-practices).

We have built a Brick with a flow ready to be used, once you have your API key, you only need to do the following:

In order to use Google API's you must enable billing in your project

  1. Enable your API Key

These are the specific API's we'll be using for our brick, for the brick to work we need to be sure that all of these are enabled in our Google Cloud account.

Bear in mind that Google doesn't allow you to restrict the Geocoding API together with other Maps APIs, so you should leave off domain restrictions for this project
  1. Import the brick

Just go to "Bricks" in the Advanced Features, here you can search for this brick "Google Maps & API info v0.3"

  1. Connect the brick to your flow

Be sure you have an input as well as an output for your brick

  1. Enter the brick

Here the only blocks you need to pay attention to are "Questions Address" and "Set Variable" where you'll enter your personal API Key (the same one will go in both blocks)

  1. Add your API Key in two places

We need to add the API Key in both places as they serve different purposes

  1. Here's what we need to do

That's all there is to it! This is how the end result will look:

Calculating distances

  1. In order to calculate the distance between one point and another, we first need to follow all of the steps listed above and connect the green flow to our Set Variables, which will be our latitude and longitude.
    In this example, we'll call our coordinates lat1 and lon1:
  1. We'll then set the coordinates of the user, whose latitude and longitude we've extracted from the Google Maps brick with the variable name @address_latitude and @address_longitude we'll call them lat2 and lon2 to simplify things.

  1. After we've set our variables we'll connect them to a code block where we'll calculate the distance and create a new Landbot variable

Here's what we need to put inside of the code block:

//This function takes in latitude and longitude of two location and returns the distance between them as the crow flies (in km)
let distance;
function calcCrow(lat1, lon1, lat2, lon2)
{
console.log(lat1, lon1, lat2, lon2)
var R = 6371; // km
var dLat = toRad(lat2-lat1);
var dLon = toRad(lon2-lon1);
var lat1 = toRad(lat1);
var lat2 = toRad(lat2);

var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;

distance = d.toFixed(1);
}

// Converts numeric degrees to radians
function toRad(Value)
{
return Value * Math.PI / 180;
}
calcCrow("@{lat1}", "@{lon1}", "@{lat2}", "@{lon2}")
this.setCustomData({distance:distance});

  1. Remember to create a Landbot variable with Javascript we need a user input after the code block, which is why we add the button with only one option.

That's it! Now your distance will variable will be available in Landbot with the name @distance.

Here's what the results look like:

How did we do?

Contact