How to Add Google Maps Store Locator in Divi (WordPress) - Local SEO

Do you own a business with more than one location?

Want to make it easy for your customers to find the store location and drive sales?

You need a store locator

According to Nielsen (2014 study), 76% of smartphone shoppers use store locator to plan their store visits.

Source: https://www.nielsen.com/ssa/en/insights/article/2014/shopping-lists-how-mobile-helps-consumers-tick-all-the-boxes/

The Local SEO For Divi & Gutenberg Blocks plugin adds a Store Locator Divi Module.

With this, add a store locator on any page. The divi module offers ability to style all the components of the store locator.

Pre-requisites

  1. WordPress Website
  2. Divi Theme by Elegant Themes
  3. Local SEO For Divi & Gutenberg Blocks plugin

Tools

  1. Computer

Estimated Cost : 49

Total Duration : 9 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Setup Local SEO Settings

  1. Ensure you've configured Local SEO essential for store locator to work.

    • Local SEO settings available at WordPress Admin > Settings > Locations & SEO
    • Ignore this setup, if you've done this before.
    • For details visit Local SEO Configuration
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Add Location Data To The WordPress Website

  1. Store locator shows business locations on a map.

    Ensure your business locations are setup on your website.

    Ignore this step, if you're business location data is setup

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Insert "Store Locator" Divi Module To Page

  1. You are ready to add store locator to a page.

    • Edit a page in Divi Visual Builder
    • With a divi row, click on + sign with label Add New Module
    • A popupover listing of module list shows up.
    • In the search box, type "Store Locator" & select the "Store Locator" module
    • That's it, you have the store locator divi module on the page.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Search Form (Content Tab) - Store Locator Module Settings

  1. "Search Form" refers to the search bar on top of the google map. It's used to search for locations based on criteria.

    Criterias are "Address Search", "Category" & "Radius"

    Settings are

    • Search Box Placeholder Text - Add placeholder text for the Address Search Input Box
    • Show Category Dropdown - A toggle to show/hide category dropdown
      • Category Placeholder Text - A placeholder text for the category dropdown.
    • Show Radius Dropdown - A toggle to show/hide category dropdown
      • Radius Options - A comma-separated list of numbers for radius dropdown options
      • Distant Units - Select kilometer or miles as the distant unit for radius.
      • Radius Placeholder Text - A placeholder text for radius dropdown
    • Search Button Text - Text for the search button
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - Locations (Content Tab) - Store Locator Module Settings

  1. Locations section helps set criteria for locations filtering

    Settings are

    • Filter By Category - A toggle to enable/disable filtering of locations by category
      • Categories - A list of categories checkboxes. Select one or more categories.
    • Include Locations (comma-separated IDs) - A comma-separated location IDs for inclusion
    • Exclude Locations (comma-separated IDs) - A comma-separated location IDs for exclusion
    • Number Of Locations To Fetch - Set the upper limit number of locations to fetch. Set -1 to get all locations
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 6 - Map (Content Tab) - Store Locator Module Settings

  1. Includes base settings for Google Maps

    Options are

    • Height - Set the height in pixels for the map.
    • Map Type - Select a map type.
      • Hybrid ➔ This map type displays a transparent layer of major streets on satellite images.
      • Roadmap ➔ This map type displays a normal street map.
      • Satellite ➔ This map type displays satellite images.
      • Terrain ➔ This map type displays maps with physical features such as terrain and vegetation.
    • Gesture Handling - Controls how the map handles gestures.
      • Auto ➔ Gesture handling is cooperative or greedy, depending on whether the page is scrollable or in an iframe.
      • Co-operative
        • Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map.
        • Two-finger touch gestures pan and zoom the map.
        • Scroll events with a ctrl key or ⌘ key pressed zoom the map.
        • In this mode the map cooperates with the page.
      • Greedy ➔ All touch gestures and scroll events pan or zoom the map.
      • None ➔ The map can't panned or zoomed by user gestures.
    • Show Cluster Markers - A toggle to enable/disable clustering of map markers
    • Restrict Locations By Countries
    • Ask User To Share Location
      • A toggle switch to ask the user whether to share his/her location
      • It's based on browsers location sharing
      • It works on https websites.
      • When user shares location, the map centers to that location
    • Default Zoom Level - Set the default zoom level for the map
    • Map Center - Latitude - Set the latitude for the map center
    • Map Center - Longitude - Set the longitude for the map center
      • To find latitude and longitude value visit google maps
      • After the page loads, go to the desired area of the map which you desire to set a center, right-click on that area.
      • You will see a context menu. The first option of the menu item is the latitude and longitude.
      • Click on it and it gets copied to clipboard.
      • Detailed article https://support.google.com/maps/answer/18539?hl=en
    • Empty Results Text - Text to show when there are no locations.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 7 - Map Controls (Content Tab) - Store Locator Module Settings

  1. Setup the controls for map

    Settings are

    • Show Map Type Control - A toggle to show/hide map type control
      • Map Types Following are the map types
        • Hybrid
        • Roadmap
        • Satellite
        • Terrain
      • Map Control Position
        • Set the position of the map control.
        • Options are combination of top, bottom, center with right, left
    • Show Zoom Control - A toggle to show/hide zoom control
      • Zoom Control Position
        • Set the position of the zoom control.
        • Options are combination of top, bottom, center with right, left
    • Show Scale Control - A toggle to show/hide scale control.
    • Show Street View Control - A toggle to show/hide street view control
      • Street View Control Position
        • Set the position of the street view control.
        • Options are combination of top, bottom, center with right, left
    • Show Rotate Control - A toggle to show/hide rotate control
      • Rotate Control Position
        • Set the position of the rotate control.
        • Options are combination of top, bottom, center with right, left
    • Show Fullscreen Control - A toggle to show/hide fullscreen control
      • Fullscreen Control Position
        • Set the position of the fullscreen control.
        • Options are combination of top, bottom, center with right, left
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 8 - Listing & Info Window (Content Tab) - Store Locator Module Settings

  1. This section setups the data to show on location listing & map info window.

    Options are

    • Show Info Window - A toggle to show/hide info window.
    • Show Title - A toggle to show/hide title on listing & info window
    • Show Address - A toggle to show/hide address on listing & info window
    • Show Telephone Number - A toggle to show/hide telephone number on listing & info window
    • Show Email - A toggle to show/hide email on listing & info window
    • Show Description - A toggle to show/hide description on listing & info window
    • Show Direction Link - A toggle to show/hide direction link on listing & info window
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 9 - Form Container (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper enclosing the search form

    Design options are

    • Spacing - Margin and padding
    • Background Color
    • Rounded Corner
    • Border
    • Box Shadow
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 10 - Input Container (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper enclosing the input text and select boxes of the search form

    Design options are

    • Spacing - margin and padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 11 - Search Input & Dropdown Fields (Design Tab) - Store Locator Module Settings

  1. Represents in the input search box, categories dropdown and radius dropdowns of search form.

    Design options are

    • Spacing - margin and padding
    • Font settings and styles
    • Rounded corner
    • Border
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 12 - Search Button (Design Tab) - Store Locator Module Settings

  1. Represents the search button of the search form.

    Design options are

    • Font settings and styles
    • Background
    • Rounded corner
    • Border
    • Icon
    • Alignment
    • Spacing - margin and padding
    • Box shadow
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 13 - Map & Listing Parent Container (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper that contains the map and the location listing

    Design options are

    • Layout - Supports two layout
      • Stacked - Map on top of listing - Map and listing stacked on top of each other
      • Inline - Map & listing on single row - Shows map & listing container on same row.
        • Map Container Width (%) - Set the width of the map container
    • Spacing - margin and padding
    • Rounded corners
    • Border
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 14 - Map Container (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper enclosing the map

    • Spacing - margin and padding
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 15 - Map (Design Tab) - Store Locator Module Settings

  1. Represents the google map object

    Design options are

    • Map Styles
      • Customize google map style
      • Goto https://mapstyle.withgoogle.com/
      • On page load, a popover show up.
      • Select No thanks, take me to the old style wizard
      • Setup custom google map styles.
      • Click on FINISH button.
      • A popover with JSON style shows up.
      • Copy and paste the JSON into your app or website code.
    • Your Location Icon
      • Set icon that represents current location / searched address on the map
      • Preferred size is 100px x 100px
    • Directions Icon
      • Select driving directions icon.
      • Preferred size is 100px x 100px
    • Address Icon
      • Select address icon. Used in listing & info window
      • Preferred size is 100px x 100px
    • Telephone Icon
      • Select telephone icon. Used in listing & info window
      • Preferred size is 100px x 100px
    • Email Icon
      • Select email icon. Used in listing & info window
      • Preferred size is 100px x 100px
    • Box Shadow
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 16 - Listing Control (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper for the location listing

    Design options are

    • Spacing - margin and padding
    • Rounded corners
    • Borders
    • Box Shadow
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 17 - Single Location Parent Container (Design Tab) - Store Locator Module Settings

  1. Represents the wrapper for a single location listing

    Design options are

    • Spacing - margin and padding
    • Rounded corners
    • Border
    • Box Shadow
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 18 - Location Title (Design Tab) - Store Locator Module Settings

  1. Represents the location title in the listing/info window.

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 19 - Location Description (Design Tab) - Store Locator Module Settings

  1. Represents the location description in the listing/info window

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 20 - Location Address (Design Tab) - Store Locator Module Settings

  1. Represents the location address in the listing/info window

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 21 - Location Telephone (Design Tab) - Store Locator Module Settings

  1. Represents the location telephone number in the listing/info window

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 22 - Location Email (Design Tab) - Store Locator Module Settings

  1. Represents the location email in the listing/info window

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 23 - Formatted Distance (Design Tab) - Store Locator Module Settings

  1. It's the distance between the searched address/users current location and the location in the listing/info window

    Design options are

    • Font settings and styles
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 24 - Custom CSS (Advanced Tab) - Store Locator Module Settings

    • Gain fine-grained control over UI elements of the store location.
    • Add custom css for those elements
    • Tons of element options provided
FREE DOWNLOAD

Start your FREE trial. No credit cards required.