Configure/Install the Locator Widget

This article will explain in detail how you can publish the WP Maps product locator on your website. The whole process won’t take much time, and soon you will have a fully functional product locator up and running on your website.

Once you have access to WP Maps, follow the below steps to publish the product locator:

Step 1 #

Go to the “Widgets” tab and click on the “Install Widget” button to open the publishing tool for starting the process.

Step 2 #

On the “PRODUCT LOCATOR CONFIGURATOR” page fill in the following options under “MAP CONFIGURATION”.

  1. Maps Selection – Choose a Map service you would like to use using the dropdown menu
  2. Place API- Choose an API for the search address feature. (“Google Place API” is recommended)
  3. Adjust the rest of the options as you please such as “Default Zoom”, “Marker Cluster”, “Pitch”, etc.
step-2.jpg

Map Configuration Page

Step 3 #

Click on the “NEXT” button to go to the “UI SETTINGS”, and fill in the following options:

  1. Template – Choose from 3 pre-built templates for your product locator
  2. Layout – Choose how the products will be presented in the store locator 
  3. Option Type – Choose how the products will be categorized in the store locator
  4. Store Infobox- Select how the store’s information will be displayed
  5. Product Schema Filters –  Add attributes that can be used to filter your products, for example, “color”
  6. Store Schema Filters – You can add custom filters or add the pre-built filters
  7. Color Schema – Choose a color palette for the store locator. This can later be changed via the color customizer tool
  8. Change the rest of the setting according to how you see fit
step-3.jpg

UI Settings Page

Step 4 #

Click on the “NEXT” button in the bottom-right corner of the screen

Step 5  #

Finally, Click on the “PUBLISH” button and wait for your store locator to be published

Step 6  #

A generated script will appear on a popup window, copy this script and paste it into your website. After you update your website, you can view your new product locator to see how it looks.

step-6.jpg

Product Locator Script

Congratulations, you have successfully published your first WP Maps product locator on your website.