Table of Contents

Build a Map Directory or Store Locator App

Danielle Kellogg Updated by Danielle Kellogg

Scenario

This article will walk you through the steps to create a Map Directory like our Store Locator template app.

Requirements

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

  1. Create Your Locations Object
  2. Add Locations Records
  3. Add a Map View to Display Locations Records

Create Your Locations Object

In order to store your Location records, we will need a new Locations object in your app. In the Schema section of the Builder, click the green "+" button to add a new object.

In this scenario we will name this object "Locations", and add a minimum field a short text field for Location Name and an address field for Location Address.

You must use an address field type to store your address in order to use a map view.

Add Location Records

Now that you have a Locations object, there are two options to add new records to your app. You can either add them manually one at a time or you can import a spreadsheet (.csv) adding several records at once.

Manually Add Records to your Database

To add records to your Stores object, navigate to the Records section of the Builder and click the "+ Add Record" button in the top navigation.

Each new store record added will appear in the Records section of the Builder when viewing the Locations object.

You can read more on adding and managing records here.

Import Location Records From a Spreadsheet

You can quickly and easily bulk import new store location records using a .CSV file. You can learn more on how to format your CSV file here.

The spreadsheet must contain your address data in separate columns. Example: Street, City, State and Zip Code will each need to have a separate column; during the import setup, you will assign each column to the Address Field type in your Stores object.

To import your records, click the "Import" option while viewing your Locations object in the Records section of the Builder.

You can read more on importing records here.

Add a Map View to Display Location Records

Once you have your Locations object set up with at least one record, you can now add a map view to display those Location records in the Live App.

There are two ways you can add a map view. You can use the “new page” wizard to setup a new map page. You may also add a map view to an existing page. If you have no pages, you'll default to add a new page:

Add Map View With a New Page

In the Pages section of the Builder, click the green "+" button, then select the "Public Page" option to add a new page. This will add a new page that is visible to anyone with the URL. If you would like to password protect your page, you can read more about using logins here.

Next you will be prompted to name your page and select which view to add to your new page. In this scenario we will add a map view to the page.

You can read more on using map views here.

Add a Map View to an Existing Page

If you already have a page you would like to add a map view to, select that page in the Pages section of the Builder. Then click the "Add View" option in the top navigation.

From there you will be able to select what type of view to add to your page. In this case add a map view type, then choose the “Locations” object to display in the map view.

Login & Test

Now that you have set up your Locations object and added a map view to display those records you can view this page in your Live App. While viewing your page in the Pages section of the Builder, click the open icon or the "Go to Live App" button. This will open your Live App in a new window.

Notes

You can learn more on managing pages, views, and maps here:

How did we do?

Build an Orders App

Contact