How to Build a Store Locator Page with HubDB

The short answer is that HubDB is a simplified database that can be used for anything which requires organizing and filtering content. You can store information in a HubDB table and then use HubL to access and output the information onto the front-end of a page. HubDB can also be used to build a store locator page for your website, which I’m going to walk you through below.

The output of what we’re building will be a Google map with dropped pins for each store location, as well as a list of search results with store details. Here are the basic steps below:

• Create a HubDB Table

• Build Custom HubL Module

• Add the HubL Module to a Template

Let’s go through them step by step and show how HubDB makes it all possible. 

Step 1: Create a HubDB Table

The first thing we’re going to do is create a HubDB table. From the Dashboard, we’ll go to Marketing on the top navigation, then Files and Templates, and then choose HubDB. We’ll select the Create Table button on the top right, and then give our table a name! In this case, we’ll call it “Store Locations”.

From here, we’ll create a column for each field that we want the table to have. For example, we have the Store Name, Address Street 1, Address Street 2, City, State, Zip, Phone, etc. HubSpot has different column types that we can choose from a dropdown, and for the most part we’ll just need the Text type for a store locator table. In our example, we also used HubSpot’s Location column type, which will be used to populate the Google Map.

If you have an existing excel sheet with all the store information, it’ll save you a lot of time to just import the sheet to the HubDB table. Otherwise, this is where the bulk of the manual work takes place. We’ll have to manually enter the information for each store location. For each HubDB table, you can enter up to 10,000 stores, which equals 10,000 rows in the table.

Once the table is created, populated and published, it’s time to build the custom HubL module that will pull out data from HubDB.

Build Custom HubL Module

All this data is useless to us if it’s just sitting in a table somewhere. The next step is to build a module that outputs the HubDB into a JSON object. We want to create a locations array so we can store each location in the JSON object for later.

    var locations = [];
    {% for row in hubdb_table_rows(HUBDB_ID, 'limit=9999') %}
        locations.push({
            "store_name": "{% if row.store_name %}{{ row.store_name|escapejson }}{% endif %}",
            "street_1": "{% if row.street_1 %}{{ row.street_1|escapejson }}{% endif %}",
            "street_2": "{% if row.street_2 %}{{ row.street_2|escapejson }}{% endif %}",
            "city":     "{% if row.city %}{{ row.city|escapejson }}{% endif %}",
            "state":    "{% if row.state %}{{ row.state|escapejson }}{% endif %}",
            "zip":      "{% if row.zip %}{{ row.zip|escapejson }}{% endif %}",
            "phone":    "{% if row.phone %}{{ row.phone|escapejson }}{% endif %}",
            "location": {
                "lat":      "{{ row.location.lat }}",
                "lng":      "{{ row.location.lon }}"
            }
        });
    {% endfor %}

Next we’ll want to ask for the user’s location using the browser (because location consent is sexy). Once they have given their consent, we can use that as a starting point in Google Maps.

Looping through all of the locations, and using the formula below, we calculate the distance each location is from the user, and then sort by distance.

distance = ( 3959 * Math.acos( Math.cos( Math.radians(USER_LAT) ) * Math.cos( Math.radians( LOCATION_LAT ) ) * Math.cos( Math.radians( LOCATION_LNG ) - Math.radians(USER_LNG) ) + Math.sin( Math.radians(USER_LAT) ) * Math.sin( Math.radians( LOCATION_LAT ) ) ) );

The final results are displayed as pins on a Google Map and a results list on the page, which we can style to match our website theme.

Add the HubL Module to a Template

At Salted Stone, we know that many clients have non-technical marketing team members creating a template or editing a page within HubSpot. With this in mind, we try to build things as flexible and user-friendly as possible. By building this as a custom module, we can add it to any page template and generate the same output. So we could add it to a standalone Store Locators page, or to the bottom of an About page, for example.

The great thing about having all your data centrally located in HubDB is if you need to add, remove, or change a stores address, changing it once on HubDB will change it wherever the store locations are displayed. 

What Else Can You Use HubDB For?

HubDB can be used anywhere you need to pull from a data table. Think about dynamic pages you might want to build where content is managed from one location, such as:

• Event calendars
• Product pages
• Team pages
• Pricing pages
• Resource centers