Skip to main content

Create a store locator for your website or customer portal

This step-by-step guide will help you create a powerful store locator with Masply's shared maps that can be embedded into your website

Written by Sergey Shurygin

This article will help you use the shared maps feature to embed a store locator into your website.

By store locator we mean a map that will show locations of your physical stores on a map embedded into your website and will allow a customer to find the closest store that sells the apparel brand they're interested in. The client will be able to filter out stores that don't sell this brand and sort by distance the stores that do.

Implementation is included in your Mapsly subscription!

Your Mapsly subscription comes with implementation services, so we're inviting you to book a web call with our engineer today - to learn more about your use scenario and set up shared maps for you during the call. Start embedding live maps today. You may also ask us for help in chat any time 24/7.

Book a call with Mapsly engineer

Implementation steps

Follow this guide to create a shared map that will serve as your store location:

Step 1. Create your shared map

Create a new shared map by following this guide. If you haven't set up a shared map before, start with the step-by-step guide.

In the shared map wizard:

  1. Select Embed in a website (Wordpress, etc.).

  2. Check Records and select the object that holds your store locations, for example, Companies. Under Additional features, check Show List view panel.

  3. Under When the map is first loaded, check Center on the user's location and set the Zoom level. For visitors who don't share their location, choose Center on or Show an area. Under Additional features, make sure Allow user to update "base" location is checked.

  4. Click Generate shared map, then Finish.

Step 2. Activate the search bar filter

A search bar filter is assigned to a user profile, so you need to activate it for your shared map's profile.

  1. Go to Setup → Profiles & permissions.

  2. In the Map section, check Search filter in your shared map profile's column.

  3. In the Search filter properties window, click Save.

  4. Click Save changes.

Step 3. Log in for setup

Go to Setup → Users → Users for shared maps. Click the three-dot menu next to your shared map user and select Log in as (for setup).

Visitors will see your store locator exactly as you set it up in this mode.

Step 4. Configure the search bar filter

  1. Click the filter icon under the search bar, then click the cog icon.

  2. In Filter properties, click + next to Fields.

  3. Add Distance, plus any other fields you want visitors to filter by, and click Save.

For more options, see Search bar filter.

Step 5. Customize the marker popup

  1. Click any store on the map, then click the cog icon in its popup to open the map properties. You can also open them from the Layers panel by clicking the marker icon next to your object.

  2. Click + next to Marker popup to choose which fields the popup shows.

  3. Click the cog icon next to Marker popup to open the Map popup template, and choose the buttons

  4. Click Save.

For more options, see Customize the map popup template.

Step 6. Configure the List view

  1. In the List view, click the cog icon to open List view properties.

  2. Under List block lines, click + to add a line, and use Insert tag to show each store's name, address, and distance.

  3. Under Sort by, select Distance so the closest stores appear first.

  4. Click Save.

For more options, see List view properties.

Your store locator is ready

Visitors can enter an address in the search bar, click Distance, enter a radius, choose less than or equal, and see only the stores within that range of their base location.

Did this answer your question?