Back
Discover Woosmap
Get the newsletter
Getting Started with the Woosmap Store Locator Solutions
07/08/2020

-

8 min read

A Store Locator displays stores on a map and allows website or app users to find the closest and more convenient store from them. It will also help you show related information such as address, business hours, contact details or any available amenities and services. We offer two different ways to embed a Store Locator on your app or website, the Woosmap Store Locator Widget or Woosmap Store Locator JS API. We will help you choose which is the best solution for your needs.

Woosmap Store Locator Widget

The Woosmap Store Locator Widget is a one-stop-shop to create a Store Locator based on Google Maps API (or Baidu Maps). It is the short cut to provide your users with a powerful store locator. To match your preferences and website’s graphic style, all the properties of your Store Locator Widget can be customised client side thanks to the setConf() method.

Example

 

Benefits

pros

Easy to Configure: change theme color, marker styles, map languages, metrics units and more with just a couple of Javascript lines.

pros

Natively responsive layout based on your window width breakpoint.

pros

Labels support different languages.

pros

Bunch of prebuilt features such as Autocomplete Search, Driving Direction, Distance Matrix,...

pros

Fast to deploy and easy to maintain (source code of the widget is hosted by us)

To Be Considered

cons

Style is not fully customisable as you don't have access to CSS ClassNames and icons are inline svg.

cons

Tracking users interaction with an analytics tools (Google Analytics for example), is limited to existing HANDLED_EVENT properties list

cons

Possible styles collision with your own styles.

cons

Less flexibility for new features.

Woosmap Store Locator Widget with Custom Renderer

The side panel used to display detailed information for the nearby stores or a selected store is fully customizable. You might consider this option as an alternative to the Store Locator Widget without custom rendering as you’ll need familiarity with front-end development concepts.

Example

 

Benefits

pros

Customize stores information rendering: set your own style and display desired information for both summary renderer (list of nearby stores) and detailed renderer (selected store) in the side panel. see how.

pros

Greater ability to record how the user is using your Store Locator

pros

Same pros than the Widget without custom renderer

To Be Considered

cons

A bit longer and timeconsuming development

cons

Same cons than the Widget without custom renderer

Woosmap Store Locator JS API

This API lets you build your own Store Locator using Javascript. We provide helpers classes to display your stores data hosted on Woosmap Platform on top of a map provider (Google or Baidu). You will be able to easily set your own styles (markers, basemap, …) and display detailed stores information using custom HTML templates.

Example

 

Benefits

pros

Full control over UI/UX.

pros

You could develop advanced behaviour by extending JS Classes using MVCObject (search for stores names for example).

pros

More flexible to add new features as you remain owner of the source code.

pros

Tracking user interaction limited only to your ideas and creativity.

To Be Considered

cons

Longer and more complex development (and therefore timeconsuming).

cons

You'll need to host the integration source code on your side.

cons

Maps providers updates could impact the stability in cases you directly instantiate their classes.

Decision Matrix

First of all, our Customer Care team is here to help you make the right choice and make sure the job is done right. So please don’t hesitate to reach out to us.
To decide which option is best for you (using the Widget or developing with the JS API), you could write a small decision matrix. There are some tips that may helps you:

  • Invite the right people to work beside your core team for the exercise (this might include people who know the background, people of the implementation team, etc.).
  • Write the three options, standard widget, widget with custom renderer and JS API, as headings for the rows of your decision matrix table.
  • Consider the factors or criteria which will guide your decision: implementation cost, time to implement, impact on customer satisfaction, maintenance cost. Write these as headings for the columns of the table.
  • If you want, give each decision factor a weighting.
  • For each idea, assign a value on a fixed scale (0 to 5 is good) for each factor. Multiply the value by the appropriate weighting and write it in the box.
  • Continue for all ideas. Write total values for each idea in the last column.
FACTOR cost to
implement
time to
launch
cost to
maintain
customize
rendering
customize
style
users
analytics
 
WEIGHTING x4 x1 x2 x3 x2 x4 Total
Woosmap
Store Locator Widget
5 5 4 1 1 2 46
Woosmap
Store Locator Widget
Custom Renderer
4 4 3 4 3 3 56
Woosmap
Store Locator JS API
1 1 2 5 5 5 54

The implementation with the highest total value is the one to consider first. It really depends on what your priorities are. We’re always happy to help with code or other questions you might have! If you interested in sharing what would be your choice, feel free to contact us.

  

If you want to go further

x

Subscribe to our newsletter

and don't miss a single one of our news

Subscribe to our newsletter

and don't miss a single one of our news