Create Google Maps Store Locator Using Gutenberg Block (WordPress) - Local SEO

Setup & style a store locator within the gutenberg block editor. A store locator has :

  • Search box
  • Map with location markers
  • Location listing

Edit visually with on-the-fly updates. Stop using those store locator shortcodes!

For a business with multi-locations, a store locator helps to increase local customer footfalls.

As per a Nielsen study (2014), 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 offers a Store Locator block.

Pre-requisites

  1. WordPress Website
  2. Local SEO For Divi & Gutenberg Blocks plugin

Tools

  1. Computer

Estimated Cost : $

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.
  2. Ensure your business locations are setup on your website.

  3. 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" Block To Page

  1. To add the store locator block to a page

    • Goto WordPress Admin & open a page in the block editor
    • Click the + button in the top left corner or in the block editor of the page. Alternatively
      • You can type / within the block editor to search for blocks, OR
      • Click on the + within the block editor to search for blocks
    • Search for "Store Locator"
    • Click the Store Locator & add it
    • This adds the store locator block to the block editor
  2. To use pre-configured & styled block pattern layouts, refer to the "Store Locator" Block Patterns section below
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - "Store Locator" Block Settings

  1. The store locator block has the panels with content & design settings

    • General Panel
      • Class Name (Unique) : Add an unique class name.
    • Search Form Panel : Show/hide search form elements and set their text labels
      • Search Box Placeholder Text : A text to use as placeholder for the search input box
      • Show Category Dropdown? : A toggle to show/hide the category dropdown
        • Category Placeholder Text : A text to use as placeholder for the category dropdown
      • Show Radius Dropdown? : A toggle to show/hide the radius dropdown
        • Radius Options : A comma-separated list of positive number to represent the radius value
        • Distance Unit : The distance unit to use for the radius calculations. The options are kilometers and miles
        • Radius Placeholder Text : A text to use as placeholder for the radius dropdown
    • Location Query Panel : Setup the filters for the locations you want.
      • Filter By Categories : Enable the toggle for filtering locations using one or more categories
        • When selected, multi-category checkboxes show up. Select one or more checkboxes
      • Include Locations (comma-separated IDs) : To include specific location items provide comma-separated location IDs
      • Exclude Locations (comma-separated IDs) : To exclude specific location items provide comma-separated IDs
      • Number of Locations to fetch : Number of locations's to fetch. -1 fetch`s all.
    • Map Setup Panel : Settings for google maps
      • Map Height : Set the height of 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 : Contorls how the map api handles gestures on the map
        • Auto Gesture handling is either 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 be panned or zoomed by user gestures.
      • Show Cluster Markers : Enable toggle to cluster close-by markers.
      • Restrict Location Search By Countries : Restrict location search to specific countries. Enter comma-separated 2-character country codes
      • Ask User To Share Location? : Toggle to ask user to share their location. Works on https websites
      • Zoom Level : Set the default zoom level of the map
      • Latitude (Map Center) : Set the default latitude 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, to copy to clipboard.
        • Detailed article - https://support.google.com/maps/answer/18539?hl=en
      • Longitude (Map Center) : Set the default longitude for the map center
    • Map Controls Setup Panel : Sets the visibility of different controls panels on a map.
      • Show 'Map Type' Controls : Enable toggle to show the Map Type control on the map
        • Map Types : Select one or more map types. The options are
          • Hybrid
          • Roadmap
          • Satellite
          • Terrain
        • Map Control Position : Select the position on the map. The options are
          • Bottom Center
          • Bottom Left
          • Bottom Right
          • Left Bottom
          • Left Center
          • Left Top
          • Right Bottom
          • Right Center
          • Right Top
          • Top Center
          • Top Left
          • Top Right
      • Show Zoom Control : Enable toggle to show zoom control on the map
        • Zoom Control Position : Select the position on the map. The options are
          • Bottom Center
          • Bottom Left
          • Bottom Right
          • Left Bottom
          • Left Center
          • Left Top
          • Right Bottom
          • Right Center
          • Right Top
          • Top Center
          • Top Left
          • Top Right
      • Show Street View Control : Enable toggle to show street view control on the map
        • Street view Control Position : Select the position on the map. The options are
          • Bottom Center
          • Bottom Left
          • Bottom Right
          • Left Bottom
          • Left Center
          • Left Top
          • Right Bottom
          • Right Center
          • Right Top
          • Top Center
          • Top Left
          • Top Right
      • Show Fullscreen Control : Enable toggle to show fullscreen control on the map
        • Fullscreen Control Position : Select the position on the map. The options are
          • Bottom Center
          • Bottom Left
          • Bottom Right
          • Left Bottom
          • Left Center
          • Left Top
          • Right Bottom
          • Right Center
          • Right Top
          • Top Center
          • Top Left
          • Top Right
    • Listing & Info Window Data Panel : Control the location data to show on the info window and location listing
      • Show Info Window : Enable toggle to show info window on marker click
      • Show Title : Enable toggle to show location title on listing & info window.
      • Show Address : Enable toggle to show location address on listing & info window.
      • Show Telephone Number : Enable toggle to show location telephone number on listing & info window.
      • Show Email : Enable toggle to show location email on listing & info window.
      • Show Description : Enable toggle to show location description on listing & info window.
      • Show Directions Link : Enable toggle to show directions link on listing & info window.
    • Form Container Design Panel : A wrapper element that encloses the search form.
      • Margin and Padding
      • Background
      • Border width, color and style
      • Border Radius
    • Input Container Design Panel : A wrapper element that encloses the search form input fields
      • Margin and Padding
    • Search Input & Dropdown Fields Design Panel : Represents the input search box, category and radius dropdown fields
      • Margin and Padding
      • Background
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
      • Border width, color and style
      • Border Radius
    • Map & Listing Parent Container Design Panel : A wrapper that encloses the map and location listing
      • Layout : Select a layout for map & listing container elements. The options are
        • Stacked - Map on top of listing : The map container is on top of the location listing.
        • Inline - Map & listing on same row: The map & listing container are on the same row besides each other.
      • Margin and Padding
      • Border width, color and style
      • Border Radius
    • Map Container Design Panel : A wrapper that encloses the map
      • Margin and Padding
    • Map Design Panel : An element represents google maps
      • Map Style : To create custom style
        • Goto https://mapstyle.withgoogle.com/
        • Click on No thanks, take me to the old style wizard link
        • Adjust the styles on the map
        • Click on FINISH button when done.
        • On the modal popup, click on COPY JSON link
        • Paste the JSON in the Map Style textarea of the block setting
      • Your Location Icon : Select icon to represent the users location icon.
      • Directions Icon : Select icon to represent driving direction icon
      • Address Icon : Select icon to represent location address
      • Email Icon : Select icon to represent location email
      • Telephone Icon : Select icon to represent location telephone
    • Listing Container Design Panel : A wrapper that encloses the location listing
      • Margin and Padding
      • Border width, color and style
      • Border Radius
    • Single Location Parent Container Design Panel : A wrapper that encloses a single location listing item.
      • Margin and Padding
      • Border width, color and style
      • Border Radius
    • Location Title Design Panel : Represents the location title element on the info window and location listing
      • Margin and Padding
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Location Description Design Panel : Represents the location description element on the info window and location listing
      • Margin and Padding
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Location Address Design Panel : Represents the location address element on the info window and location listing
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Location Telephone Design Panel : Represents the location telephone element on the info window and location listing
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Location Email Design Panel : Represents the location email element on the info window and location listing
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Distance & Direction Icon Design Panel : Represents the distance length text & driving direction icon on info window and location listing
      • Direction Image Height : Set the height of the driving direction icon
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
    • Empty Results Design Panel : Represents the empty results thats displayed no locations are found
      • Empty Results Text Message : The text to show on no results
      • Font styles like
        • Font family : If you select a google font, make sure to load the font on the frontend.
        • Font Size
        • Font Weight
        • Font Style
        • Line Height
        • Letter Spacing
        • Word Spacing
        • Text Transform
        • Text Align
        • Font Color
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 5 - "Store Locator" Block Patterns

  1. Plugin includes 2 block patterns for the store locator

    • Store Locator - Stacked
    • Store Locator - Inline

    To add the block pattern

    • Open a location page for edit using the block editor
    • Click on the + sign (Toggle block inserter) on the top bar of the page.
    • A sidebar with list of blocks shows up.
    • Click on the Patterns tab
    • Click on the dropdown, as shown in the video, and select Design - Multi Locations (Local SEO)
    • Click and select either than Store Locator - Stacked or Store Locator - Inline block pattern
    • A well-designed store locations shows on the block editor.
    • Tweak the settings as per your liking
FREE DOWNLOAD

Start your FREE trial. No credit cards required.