Making a Store Locator Map in Wordpress

Store Locators are favorites in the map plugin world, because a lot of businesses are looking for something snazzy to stand out and set up quickly. You want something simple, pretty, customizable, and a breeze to get through making.

My company maintains a free plugin for mapping in Wordpress, WP Mapbox GL JS Maps. A customer, Isto, emailed in and told me that a store locator would be a great new feature, because Google has changed to requiring API keys with billing enabled -- meaning maps are going down all over the place. I love following real user feedback, so we jumped right on it.

In this post I’ll introduce you to our plugin, and show you how to set things up and add a store locator. This should get you up and running quickly in your installation and get you a map that stands out against boring competition or at least upgrades your old Google map.

For more about Mapbox and their great free mapping tools, check out their website and set up an account.

Setting up WP Mapbox Map Maker

First, install the WP Mapbox GL JS Maps plugin. After installing, you’ll need to put in a Mapbox token, so make a Mapbox account and get your token. There are some instructions in the WP Mapbox Maps docs so check out some more there.

We recently went ahead and made the whole plugin free -- in the next couple days, you'll see a major update coming (before September 1, 2020), which will allow all the previously premium features to be usable, all in the free version! We're awesome like that.

After you’ve entered your API key, you should head to Mapbox Maps to make your store locator map. Press Add Map and you'll get to the editor. With the latest Gutenberg update, we've chosen to keep the old post editor look for WP Mapbox GL JS, at least for the moment. It should be easy to maneuver in, and you can see our tutorial videos for more help.

Making Your Map

If you want to get fancy, you can design your own style in Mapbox and enter your style token into the map. Or you can choose from one of the many default Mapbox styles on the right-hand side of the map.

Next, add a few locations to the map. You can do this by pressing the Marker icon at the bottom of the map, or going to the Edit Panel under the map and putting in an address for each marker. You can set a custom icon for the location, or select from a few hundred premade icons. You should also enter some text in the popups and leave them open for the user.

Make sure you give each Marker a specific name -- this is the name they’ll use in the Location Sidebar you’ll create.

Now, it’s pretty easy from here. Select the “Location Sidebar” option in the right-hand options area and save the post.

Showing it off

You’ll be best off embedding or using the map in a full-screen area, and setting the height manually in the shortcode options. By default, we’ve set up the location sidebar to look pretty much like the one from the Mapbox example. You can use pretty straightforward CSS to style this up a bit if you want to change it, though!

You can use the post directly, or just embed it using the shortcode. It's up to you where and how you want to drop it. Maybe into a footer, or maybe just as its own menu item.

You could even add some flair -- 3D icons for your stores, extrusions pushing out of the ground, more markers or shapes around different types of locations. We've made it extremely customizable.

And there we go! A store locator to put wherever you need on your site.

Conclusion

Overall, it kind of sucks that changes to Google have made some web mapping a little harder. We see that broken "API Required" message all over the web on old Google Maps. Luckily there are some good solutions out there, and Mapbox is one. It’s becoming more accessible to Wordpress and other platforms through plugins like WP Mapbox GL JS, as used in this post.

Check out more about the plugin and about Mapbox, and fire away with any questions in the comments below!