Step-by-Step example

Step-by-Step guide
In this step-by-step guide you will learn how to setup, manage and integrate a store-locator with the Nearest! location management platform. For a better understanding it is recommended to start with the term definitions before. If you're not familiar with our dashboard please have a look at the dashboard section. In every section of this guide you'll find the link to the additional information in the docs.
Described scenario: We have multiple stores which are stored in a Google Docs sheet with the following information: Name, address, opening hours, free parking, brand and phone. We want to add this static information into an interactive store-locator to our website and synchronize the data regularly.
Quick steps overview
1.Setup a locator app
1.Adding elements
2.Defining global contents
​
2.Adding locations
1.Manual creation
2.Automatic bulk import 
3.Scheduled synchronization
​
3.Adding an interface
1.Customizing UI
2.Map icons & filter
3.Integrate it into website
​
4.Analytics
1.Adding UA code
2.Setup analytics dashboard
Set up a locator app
In the first step we will register to Nearest! location management platform. Then we will add a new locator with New locator by adding the locator name MyStores Locator and clicking create. 
Adding elements
Under Locations > Elements & filter we can configure our custom elements. As described above our data source has the following information available: Name, address, opening hours, free parking, brand and phone. 
Elements & Filter
Name
By default the location name element is already added.
Address
The address element is a required element so it's added already by default.
Opening Hours
Add a new element by clicking Create Element and choose openingHours as element type.
Opening hours
Free parking
Free parking sounds like it is a boolean value and it would be nice to filter for that value. We add an element again, choosing bool as type and  enable the filterable option.
Brand
Brand sounds like every location can be of one or multiple brand values so we will choose select as the data type and we will add all available brand values to the element. It would also be helpful to filter for that element so let's enable the filterable option again.
Not sure about the correct element type? Learn more in data types...​
Adding a select element with values and set filterable
Select field
Phone
By default the phone element is already added.
Defining global contents
In contents & texts we can now add some information to the app. It is recommended to add at least one keyword to improve the user experience with better understanding of the interface. All other contents can be added or edited later.
Contents & Texts
Adding locations
Now we will add some data to our app. First we will add a location manually to check if all elements are added and configured correctly.
Manual creation
Click Locations > Add. First you need to add an address or coordinates. By clicking preserve you can drag/drop the marker on the map without changing the address field. This should be done if you want to add the marker to a more precise position without changing the postal address. After that you can fill in the element information for that location.
Automatic bulk import
Now that we checked the manual creation of a location and saw that everything is correct we can bulk import all locations from our Google Docs file.
You need to share your custom Google Docs file with [email protected] before importing to Nearest! Learn more ...​
Go to Locations > Import & Sync and create a new Import. Change the type to Google Docs and enter the Google DocsID for the file. 
Now we need to connect the data from the sheet with our elements with the Element Connector.
#1st step
#2nd step
#3rd step
Import & Synchronization
Scheduled synchronization
Ok,  the initial import is done but what if the data changes in that sheet? We need to synchronize our app with that data regularly by easily following the next steps: 
#1 step
#2 step
#3 step
Scheduling
Adding Interfaces
Now that we added data to our app and configured synchronization it's time to generate an interface and a view to our data.
Customizing UI
In Interface > Web-app > User Interface we can change the colors to adept our corporate identity. Then we can upload our logo. 
Map Icons & Filter
Wouldn't it be great if the marker icon could reflect the brand of the location? Sure it would so let's do that in a few simple steps. Go to Interface > Web-app > Map & Icons: We first should change the default icon by clicking Upload. Add the file and edit Size and Anchor to set correct display settings. 
Then click Optional settings > Add Icon to add a new icon rule. Add your icon file and settings and choose Add Condition. Select the brand element and choose the right value for the uploaded icon. Done!
Map & Icons
Integrate into website
For now we successfully generated our custom store locator. We will know integrate it into our website:
Code
<iframe src="https://yourapp.nearest.place" 
  height="500" 
  width="100%"
  allow="geolocation"
  style="border:none;"></iframe>
Copy and paste that code into your existing website and you're done!
iFrame
Check Analyzations
​
​
​
​