Adding a store locator to your WordPress website sounds simple, until you start dealing with Google Maps API keys, project configuration, enabled services, and billing account requirements.
What if you could skip all of that and get a working store locator on your website in just a few steps?
Fortunately, Google Maps isn't your only option.
By combining Agile Store Locator with MapLibre and OpenStreetMap tiles, you can create an interactive store locator without setting up a Google Maps API key or billing account.
In this tutorial, we'll walk through the process of configuring your map, adding store locations, embedding the locator on a WordPress page, and customizing its appearance.
How Can You Create a Store Locator Without Google Maps?
You don't necessarily need Google Maps to display an interactive store locator on your WordPress website.
An alternative is MapLibre, an open-source mapping library that renders interactive maps using tiles and styles from compatible providers.
MapLibre handles the map display, while providers such as OpenStreetMap-based tile services, Geoapify, and Mapbox supply the underlying map visuals.
For a simple setup, you can use MapLibre with OpenStreetMap's public tiles without creating a Google Maps API key, configuring Google Cloud services, or opening a Google billing account.
However, free map access doesn't always mean unlimited usage. Each tile provider has its own requirements and policies, which we'll cover later in this tutorial.
Introducing Agile Store Locator for WordPress
Now that we've covered the alternative to Google Maps, let's look at how to turn it into a working store locator without writing custom code.
Agile Store Locator is a WordPress store locator plugin that lets you create interactive location maps, manage store information, and help visitors find nearby locations directly from your website.
It supports both Google Maps and MapLibre, so you can choose the mapping option that best suits your requirements.
With Agile Store Locator, you can add stores through the WordPress dashboard, embed the locator using a shortcode, and customize its colors and labels without modifying the underlying code.
Let's walk through the four steps to get your locator running.
Watch the Complete 8-Minute Setup Tutorial
Prefer following along visually?
This walkthrough demonstrates how to configure MapLibre with OpenStreetMap tiles, add your first store, embed the locator using a shortcode, and customize its appearance, all without setting up a Google Maps API key or billing account.
Video: https://www.youtube.com/watch?v=HnlS8L1tWGU
Step 1: Set Up MapLibre with OpenStreetMap Tiles
The first step is to configure your map provider.
Instead of going through Google's API and billing setup, Agile Store Locator lets you switch to MapLibre directly from your WordPress dashboard.
Here's how to get started:
- Open your WordPress Dashboard → Agile Store Locator → Dashboard.
- Navigate to the Set Up Map button and click on it, then choose a Map Provider.
- Select Free Maps (MapLibre) as your mapping engine.
- Choose OpenStreetMap as your tile provider from the Maps tab in ASL Settings.
- Save your settings.
That's it! You now have an interactive map configured without generating a Google Maps API key or connecting a Google billing account.
MapLibre also supports other tile providers, giving you flexibility if your mapping requirements change later.
For a closer look at the available providers, configuration options, and usage requirements, check out this guide to free maps for WordPress store locators.
Note: OpenStreetMap's public tile servers are suitable for testing and limited usage, but production websites should review their usage policy and consider a dedicated tile provider when appropriate.
Step 2: Add Your First Store Location
With MapLibre configured, the next step is to add the store locations you want visitors to find.
Agile Store Locator lets you manage these directly from your WordPress dashboard without manually placing markers on the map.
To add your first store:
- Navigate to Agile Store Locator → Dashboard and click Add New Store.
- Enter the store's name, address, city, and country.
- Set the store's latitude and longitude to position it accurately on the map.
- Add useful details such as a phone number, website, and opening hours.
- Save the store to make it available in your locator.
Once saved, the location can appear on your MapLibre-powered store locator, complete with its map marker and store details.
You can repeat this process to add more branches, retail outlets, or service locations as your business grows.
Step 3: Embed the Store Locator on a WordPress Page
Now that your map is configured and your first store is added, it's time to display the locator on your website.
Agile Store Locator uses a WordPress shortcode, so you don't need to write JavaScript, manually embed a map, or configure additional APIs.
Follow these steps:
- Open your WordPress Dashboard → Pages → Add New, or edit an existing page.
- Add a Shortcode block in the WordPress editor.
- Paste the following shortcode:
[ASL_STORELOCATOR] - Publish or update the page.
- Open the page to check your interactive store locator.
Your visitors can now explore store locations through a map and location list directly on your website.
The best part? When you add or update stores in Agile Store Locator, those changes are reflected in the embedded locator without needing to edit the page again.
Step 4: Customize the Store Locator's Appearance
Your store locator is now live, but you probably want it to match your website's design rather than look like a separate component.
Fortunately, Agile Store Locator includes a built-in Customizer that lets you adjust the widget's appearance without editing CSS or writing custom code.
Here's what you can customize:
- Colors: Adjust buttons, backgrounds, and other interface elements to match your website's branding.
- Labels: Change text such as search placeholders, headings, and button labels to suit your audience.
- Layout appearance: Fine-tune the locator's visual presentation to create a more consistent experience.
To get started, open Agile Store Locator → Dashboard in your WordPress dashboard, click on the Open Customizer button, make your changes, and save them.
Your updated styling will appear on the embedded store locator, helping it blend naturally with the rest of your website.
Other MapLibre Tile Options: Geoapify and Mapbox
OpenStreetMap isn't your only option when using MapLibre.
If you want different map styles, additional features, or a tile service better suited to your website's traffic, Agile Store Locator also supports other providers.
Two alternatives demonstrated in our tutorial are:
- Geoapify: Offers customizable map styles and hosted map tiles, with a free usage allowance and paid plans for higher demand. You'll need a Geoapify API key.
- Mapbox: Provides professionally designed map styles and configurable map experiences. It requires a Mapbox access token and follows its own usage-based pricing.
You can select these providers through Agile Store Locator's MapLibre settings and enter the required credentials.
Unlike Google's setup, you won't need a Google Maps API key or Google billing account, although your chosen provider may require its own account and billing configuration.
Are Free Maps Suitable for Production Websites?
Using MapLibre with OpenStreetMap tiles is a convenient way to get started without Google Maps API keys or billing. However, free map access doesn't necessarily mean unlimited usage.
Before deploying your store locator on a production website, consider:
- Tile usage policies: OpenStreetMap's public tile servers have usage restrictions and aren't intended to provide unlimited commercial map hosting.
- Website traffic: High-traffic websites may benefit from dedicated providers such as Geoapify or Mapbox.
- Performance and reliability: Choose a provider that can support your expected traffic, map requests, and availability requirements.
For testing and lightweight usage, OpenStreetMap tiles can be a practical starting point. For growing businesses, selecting a suitable tile provider helps keep the store locator reliable as traffic increases.
Final Thoughts
Creating a WordPress store locator doesn't have to begin with complicated Google Maps API configuration.
With Agile Store Locator and MapLibre, you can configure a map, add store locations, embed the widget using a shortcode, and customize its appearance—all without setting up a Google Maps billing account.
The key is choosing a mapping provider that fits your technical requirements and expected usage.
Would you prefer using MapLibre with an open-source mapping setup, or do you think Google Maps is still worth the additional configuration?
