# Find Nearest Location

With this template, your customers can easily find your business' nearest branch by simply asking your chatbot! After asking the user for their address, the bot will look through an external database (Airtable) which contains the data for all your branch locations. Then it will calculate which location is closest to the user’s address by using the Google Maps API. Finally, the bot will show the result on Google Maps, within an iFrame.&#x20;

Keep reading to learn how you can customise this template for your own organisation.&#x20;

## How to customise this template

{% hint style="info" %}
Make sure to always [update the NLP](https://docs.chatlayer.ai/understanding-users/natural-language-processing-nlp#updating-the-nlp) after loading a template!
{% endhint %}

This template uses two third party services:

1. Airtable, as a database for branch locations
2. Google Maps API, for finding the user address

To let your bot interact with these services you will need an API key for each and configure these in the Action blocks where the bot makes the API calls.\`

#### &#x20;Setting up your own Airtable base

If you have not worked with Airtable before, you can sign up for free [here](https://airtable.com/signup) and learn the basics [here](https://support.airtable.com/hc/en-us/articles/360021518753-Getting-started-starting-with-the-base-ics).

For each of your organisation's locations, your Airtable will need fields with the following information:&#x20;

1. Name of the branch&#x20;
2. Address&#x20;
3. Latitude&#x20;
4. Longitude&#x20;

When you’ve newly imported the 'Nearest Location' template, it will automatically link to [this Airtable](https://airtable.com/invite/l?inviteId=invF76GY9tGp3hGyz\&inviteToken=224dcd7cbf041e3e39f7caefbbe6798f4dc4f5ef1643586d2a1a5cbcb286f1f3\&utm_source=email). Feel free to use it for testing, but make sure to replace it once you start using the bot for your own organisation!

For more information on how to integrate Airtable into your bot, check out [this tutorial](https://docs.chatlayer.ai/integrations/code-action/airtable).&#x20;

{% hint style="info" %}
Managing your branch locations in another database? You can link any type of database to this bot, as long as it has an API. Read more about  our API integrations [here](../../integrateandcode/custom-back-end-integrations/integrations-101).&#x20;
{% endhint %}



Below is an overview of the key blocks in each flow of the bot. Here we will walk you through how to configure the connection with the Airtable and Google Maps APIs, as well as some other tips  to customise this template for your business.

### Flow: General

#### Block: Ask address &#x20;

&#x20;In this block, the bot asks the user for their address and saves the response as a variable: `user_address`. &#x20;

#### Block: Locator&#x20;

To make this template work, your bot needs to be able to access the location data of your branch locations (in Airtable) and look up the user’s address (using the Google Maps API).&#x20;

This block uses a Code Action to call both the Airtable API and the Google Maps API with the Javascript code shown below. This code may look a bit intimidating, but don’t worry, you only have to change a few pieces of information!

```javascript
const allStations = await fetch(`https://api.airtable.com/v0/(YOUR_BASE_ID)/(YOUR_TABLE_NAME)`, { 
headers: {
Authorization: `Bearer (YOUR_AIRTABLE_API_KEY)`
}
}).then(r => r.json());
let re = / /g; 

const currLoc = args.user_address.replace(re, '+');
let minDistance = Number.MAX_SAFE_INTEGER; 
let nearestShop;
const chatlayer = ChatlayerResponseBuilder(); chatlayer.addSessionVariable('currLoc', currLoc); 
const addressFromMaps = await fetch(`https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=${currLoc}&inputtype=textquery&fields=geometry&key=(YOUR_GOOGLEMAPS_API_KEY)`).then(r=> r.json()); 
const geoLocation2 = { 
Latitude: addressFromMaps.candidates[0].geometry.location.lat, 
Longitude: addressFromMaps.candidates[0].geometry.location.lng, 
} 
//const geoLocation2 = {Latitude : "52.5001278", Longitude : "13.3121555"}; allStations.records.forEach(station=>{ 
const geoLocation1 = station.fields;
const lat = geoLocation1.Latitude - geoLocation2.Latitude; 
const lon = geoLocation1.Longitude - geoLocation2.Longitude; 
 
const val = Math.sqrt(Math.pow(lat, 2) + Math.pow(lon, 2)); if(minDistance>val){ 
minDistance = val; 
closestLocation = geoLocation1;
}
});

closestLocation.Address = closestLocation.Address.replace(/ /g, ' ');
chatlayer.addSessionVariable('closestLocation', closestLocation);
chatlayer.addSessionVariable('addressFromMaps', addressFromMaps); chatlayer.send();----------------------------------
```

In this piece of code, you should customise the following three things: &#x20;

1. **The Airtable link**\
   In the url on line 1 of the code block, replace `(YOUR_BASE_ID)` with the ID of your own Airtable base and `(YOUR_TABLE_NAME)` with the name or ID of the table that contains your location data. You can find your Airtable's base and table IDs [here](https://airtable.com/api), or in the URL of your table view.
2. **The Airtable API key**\
   In the url on line 3, replace `(YOUR_AIRTABLE_API_KEY)` with your own Airtable API key. You can find the API key on your [Airtable account page](https://airtable.com/account).&#x20;
3. **The Google Maps API key**  \
   On line 13, replace `(YOUR_GOOGLEMAPS_API_KEY)` with your own Google API key.

#### Block: Give address&#x20;

In this block, the bot shows the name and address of the closest location found in the database. The name is stored in the `closestLocation.Name` variable and the address in `closestLocation.Address`.&#x20;

#### Block: Show location on map

In this block the bot shows the closest branch location on a map, within an iFrame. In the Source Field of the iFrame action, also replace `(YOUR_GOOGLEMAPS_API_KEY)` with your own Google API key.

![The Show location on map block with the part of the source URL to change highlighted in red](https://2786867680-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2Fmzkidqk2qSMKONpq8O5S%2FScreenshot%202022-07-19%20at%2011.07.45.png?alt=media\&token=057096d9-de76-4e1d-9f45-de89dec8659f)

#### Block: Clear user address

Finally, in this block the bot clears the variable `user_address` so the user can start the flow again and use another address.

### Connect the flow to other flows

Now that you've added this new flow, make sure it connects to other flows. For example, if this is an important use case for your bot, make sure to mention it in the introduction.

####

That's it, now your bot can find locations nearest to the user's address! 👏
