Table of Contents

Extract Data With Google Maps Geocoding API

Abby Updated by Abby

By using this API from Google we'll be able to extract a more accurate address and save it in variables such as postal code, locality, etc.

One thing to keep in mind while using the Google APIs is that they require you to enable billing in your account.

Here's what the flow will look like:

  1. Cloud Console
    Go to the Google Cloud Console, enable your APIs, and activate billing.

You'll need to activate 'Places API', 'Maps JavaScript API', and 'Geocoding API'.

Please check out their official documentation for more information.

  1. Address Block

    Set up the 'Address Question' block, here's how.

  1. Encode Address

    Next, you'll need to encode the address in order to send the request to Google Maps, you'll add a 'Code block' with the following snippet:

window.uriaddress = encodeURIComponent("@{address}");
this.setCustomData({ newvar: uriaddress});
console.log(uriaddress);

  1. User Input

In order to make use of the variable we created in the previous step we need a user input. This can be any question type, but here's what we used:

  1. API Key

Add your API key again.

  1. Webhook Request
    Now we'll do a webhook request with our encoded address, you'll need to connect the previous block to a 'Webhook block' and add the following in the input section on top, selecting 'Get':

https://maps.googleapis.com/maps/api/geocode/json?address=@{newvar}&key=@{googlemapsapikey}

You can then test your request and save 'Results' as @response.

You can connect the red flow to an error message, or back to the address questions block, and then connect the green flow to the following:

Code Block

Next, you'll need another 'Code block', in this block will set the variables that you'll see in the next section:

In this block you'll add the following snippet:

var True = false; 
var False = true;
var None = null;
var response = @{response};
var details;

console.log(response);

if (response[0].hasOwnProperty('property1partial_match') && response[0].partial_match === True){
    details = "partial match";
    console.log("partial match")
} else if (response[0].types[0] == "postal_code" || response[0].partial_match === False || response[0].partial_match === undefined ){
    details = response[0].address_components
    console.log(details)
}  else {
    details = "no results";
    console.log("no results")

}

console.log("details:",response)

var details_Address_Obj = {}
if (details !== "no results" && details !== "partial match"){

    for (var i = 0; i < details.length; i++){
        
        details[i][details[i].types[0]] = details[i]["long_name"]
        details_Address_Obj[details[i].types[0]] = details[i][details[i].types[0]]
    }
    
    details_Address_Obj["formatted_address"] = response[0]["formatted_address"]
    details_Address_Obj["latitude"] = response[0].geometry.location.lat
    details_Address_Obj["longitude"] = response[0].geometry.location.lng
    console.log(details_Address_Obj)
    
  this.setCustomData( {
        address_results: "Ok",
        address_administrative_area: details_Address_Obj.administrative_area_level_1 || " ",
        address_country: details_Address_Obj.country || " ",
        address_formatted_address: details_Address_Obj.formatted_address || " ",
        address_latitude: details_Address_Obj.latitude || " ",
        address_locality: details_Address_Obj.locality || details_Address_Obj.postal_town || details_Address_Obj.administrative_area_level_2,
        address_longitude: details_Address_Obj.longitude || " ",
        address_sublocality: details_Address_Obj.political || " ",
        address_postal_code: details_Address_Obj.postal_code,
        address_route: details_Address_Obj.route || " ",
        address_street_number: details_Address_Obj.street_number || " "
    })
} else if (details === "no results"){
    this.setCustomData ({
        address_results: "Fail"
    })
} else if (details === "partial match") {
    this.setCustomData( {
        address_results: "Partial"
    })
}

Here are all of the variables which have been set in the Javascript block:

User Input

After every code block we need a user input before the variables can be used within the bot, here's what we used:

Add Condition

We then set a 'Condition' using one of the variables from the Javascript block, we'll connect the green arrow to the next point in your flow and the red to an error message or the address block, up to you!

If this condition is true then your flow will continue. Remember the conditions are case-sensitive so it's important to input exactly as it is below:

Extra!

That's it! You can continue with your flow. The two user inputs are mandatory, as that's how we set the Landbot variables. Also, you can import the Google Maps API brick and remove the parts you won't need if you prefer to do that.

Due to Google API policy, while using the Geocoding API along with other Google Maps APIs in an app-like manner we are unable to use website restrictions.

Template

You can use this pre build template to see how it works. You only need to insert your Google API KEY where it says.

Just click here for the template

How did we do?

Google Maps API Key for Address block

Calculate Distances With Google Maps API

Contact