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

Easily set up and style an interactive store locator inside the WordPress Block Editor (Gutenberg). A complete store locator includes:

• Interactive Search Box
• Google Map with Location Pin Markers
• Filtered Location Listing

Customize every component visually with real-time live updates—no clunky shortcodes required!

For businesses with multiple physical branches, a store locator makes it effortless for customers to find nearby stores and boosts walk-in foot traffic.

According to a Nielsen study, 76% of smartphone shoppers use store locators to plan their physical store visits.

(Source: Nielsen Mobile Shopping Insights)

The Local SEO For Divi & Gutenberg Blocks plugin provides a dedicated Store Locator Gutenberg block.

Pre-Requisites

Pre-Requisites

• A WordPress Website
• Divi Theme or Gutenberg Block Editor
• Local SEO For Divi & Gutenberg Blocks Plugin

Setup Local SEO Settings

1. Ensure you have configured your core Local SEO settings before displaying your store locator:

   • Access settings in WordPress Admin > Settings > Locations & SEO.
   • If you have already configured local SEO settings, you can skip this step.
   • For a complete guide, see Local SEO Configuration.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add Location Data To Your Website

1. The store locator displays your physical business addresses on an interactive map.

2. Ensure your location entries are created in WordPress.

3. If your location data is already set up, you can skip this step:

   • Each location entry stores essential details (address, phone number, hours) used for Local SEO Schema data.
   • Fill in key address and contact fields for maximum SEO impact.
   • For step-by-step instructions, see Add Business Locations In WordPress.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Insert “Store Locator” Block On a Page

1. To add the Store Locator block to any page:

   • Open a page in the WordPress Block Editor.
   • Click the + button in the top left corner, or type / directly inside the editor canvas to search for blocks.
   • Search for Store Locator.
   • Click Store Locator to insert the block onto your page.

2. To use pre-styled block layouts, refer to the “Store Locator” Block Patterns section below.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Store Locator” Block Settings

1. The Store Locator block provides comprehensive sidebar inspector panels for content and design customization:

   • General Panel
     • Class Name (Unique): Add a unique custom CSS class name if desired.
   • Search Form Panel: Show or hide search form elements and customize field placeholder text:
     • Search Box Placeholder Text: Set custom placeholder text for the address search field.
     • Show Category Dropdown?: Toggle visibility of the category filter dropdown.
       • Category Placeholder Text: Custom prompt text for the category dropdown.
     • Show Radius Dropdown?: Toggle visibility of the search radius dropdown.
       • Radius Options: Enter comma-separated distance values (e.g., 5, 10, 25, 50).
       • Distance Unit: Choose distance units (Kilometers or Miles).
       • Radius Placeholder Text: Custom prompt text for the radius dropdown.
   • Location Query Panel: Configure filtering parameters for displayed locations:
     • Filter By Categories: Enable category filtering. Select one or more category checkboxes.
     • Include Locations (comma-separated IDs): Specify exact location post IDs to display.
     • Exclude Locations (comma-separated IDs): Specify exact location post IDs to hide.
     • Number of Locations to fetch: Set maximum locations retrieved. Use -1 to load all locations.
   • Map Setup Panel: Configure Google Maps settings:
     • Map Height: Set map frame height in pixels.
     • Map Type: Select preferred map view:
       • Hybrid: Satellite imagery overlaid with road networks.
       • Roadmap: Standard Google Maps street view.
       • Satellite: High-resolution aerial satellite imagery.
       • Terrain: Displays physical terrain features and natural vegetation.
     • Gesture Handling: Control touch and scroll interaction behaviors:
       • Auto: Toggles cooperative or greedy behavior automatically based on page layout.
       • Co-operative: Single-finger touches scroll the web page smoothly without trapping map navigation. Two fingers pan and zoom the map.
       • Greedy: All touch and scroll events directly pan or zoom the map.
       • None: Disables interactive panning and zooming gestures.
     • Show Cluster Markers: Toggle to group dense nearby location pins into numbered clusters.
     • Restrict Location Search By Countries: Limit autocomplete address searches to specific countries by entering 2-letter country codes (e.g., US, CA, UK). View ISO Country Codes.
     • Ask User To Share Location?: Prompt visitors for automatic browser geolocation (requires an HTTPS secure website connection).
     • Zoom Level: Set default map magnification level.
     • Latitude & Longitude (Map Center): Set custom geographic coordinates for initial map centering. Right-click any spot on Google Maps to copy coordinates. View Google Maps Coordinates Guide.
   • Map Controls Setup Panel: Toggle visibility and placement of map control buttons:
     • Show ‘Map Type’ Controls: Toggle map view selector buttons (Roadmap, Satellite, Hybrid, Terrain) and choose control position.
     • Show Zoom Control: Toggle (+/-) zoom buttons and choose control position.
     • Show Street View Control: Toggle Google Pegman Street View button and choose control position.
     • Show Fullscreen Control: Toggle full-screen map expansion button and choose control position.
   • Listing & Info Window Data Panel: Select which information fields appear in popup info windows and store lists:
     • Show Info Window: Toggle popup info window on marker click.
     • Show Title: Toggle location name display.
     • Show Address: Toggle street address display.
     • Show Telephone Number: Toggle phone number display.
     • Show Email: Toggle email contact link display.
     • Show Description: Toggle summary description display.
     • Show Directions Link: Toggle driving directions link display.
   • Form Container Design Panel: Customize search form wrapper styling (Margin, Padding, Background, Border, and Border Radius).
   • Input Container Design Panel: Customize spacing around search input fields (Margin and Padding).
   • Search Input & Dropdown Fields Design Panel: Style search inputs and dropdown menus (Margin, Padding, Background, Typography, Font Size/Weight/Color, Border, and Border Radius).
   • Map & Listing Parent Container Design Panel: Customize container holding map and listings:
     • Layout: Choose between Stacked (Map on top of listing) or Inline (Map & listing side-by-side in a single row).
     • Margin, Padding, Border, and Border Radius.
   • Map Container Design Panel: Customize map frame wrapper spacing (Margin and Padding).
   • Map Design Panel: Configure custom map style JSON and custom pin icon images:
     • Map Style: Paste custom styling JSON generated from the Google Maps Styling Wizard.
     • Your Location Icon: Select custom pin icon for user search locations.
     • Directions / Address / Email / Telephone Icons: Select custom pin icons for specific contact fields.
   • Listing Container Design Panel: Customize location list panel styling (Margin, Padding, Border, and Border Radius).
   • Single Location Parent Container Design Panel: Customize individual store card item wrappers (Margin, Padding, Border, and Border Radius).
   • Location Title / Description / Address / Telephone / Email Design Panels: Customize typography, font family, font size, line height, letter spacing, and text color for each data element.
   • Distance & Direction Icon Design Panel: Style distance calculation text and driving direction icon size.
   • Empty Results Design Panel: Customize message text and typography displayed when no matching stores are found.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

“Store Locator” Block Patterns

1. The plugin includes 2 ready-to-use Block Patterns for instant layout setup:

   • Store Locator - Stacked
   • Store Locator - Inline

   To insert a Store Locator block pattern:

   • Open your page in the WordPress Block Editor.
   • Click the + (Toggle block inserter) button in the top toolbar.
   • Select the Patterns tab.
   • Choose Design - Multi Locations (Local SEO) from the pattern category dropdown.
   • Click Store Locator - Stacked or Store Locator - Inline.
   • A professionally designed store locator section is instantly added to your page canvas.
   • Customize settings to match your brand styling.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial