WPLounge

Google Maps “Store Locator” for your WordPress website

Google Maps Store Locator WordPress

If you run a business with multiple stores or physical locations, you may want to offer your website visitors a “store locator”. A store locator is an interactive map that allows your visitors to find a store or office near their location.

When using WordPress, adding a store locator to your website can be fairly easy thanks to the free plugin WP Store Locator (by Tijmen Smit).

WPLOUNGE RECOMMENDS..
Divi theme & Divi Builder
Elegant Themes is selling more than
85 premium themes (including Divi!) for only $89!
Check Elegant Themes »
The links above are affiliate links.

How to add a Google Maps Store Locator in WordPress

To install the plugin, go to your WordPress admin panel and go to Plugins > Add New. Now search for “WP Store Locator” and look for the following plugin:

WP Store Locator

Click “Install Now” and wait for the “Activate” button to appear to active the plugin.

Google Maps API keys

After activating the plugin, you will get to see a notification on the top of your WordPress admin screen. The plugin notifies you to create API keys for using Google Maps:

Google Maps API keys

To generate an API key for your website, go to this page and create a new project:

Create a project

Now click “Agree and continue”. It can take a while before you reach the next screen. In the next screen, under “Application restrictions”, select “IP Addresses” and enter the IP address of your server. To find the IP address of your server, you can ping your website using “cmd” in Windows or “Terminal” on a Mac. You can also use a free ping service like site24x7.com.

IP Address

After entering your IP address, click “Create” and you will receive your API key. Copy the key and paste it somewhere. Now go back to this page, select the project you created and – this time – choose “HTTP Referrers“. Enter your website as follows:

HTTP referrersOnce again, click “Create” to receive the API key. Copy and save it for later.

Entering the API keys and setting up the plugin

Now go back to your WordPress admin panel and find the “Store Locator” menu. Go to “Settings” and enter your API keys:

Enter the API keys in WordPress

The Server key is the first key we created (above) and the Browser key should be the second one. Next, select a language and a region for your map. You can also choose to restrict the search results for your map to the selected region.

Setting up the Search settings

In the WP Store Locator Settings page, scroll down to find the “Search” options. In this screen you’ll be able to select a distance unit (kilometers or miles). You can also define the values your visitors can select for the maximum amount of results and search radius. To define a “default” setting, just put the number between [ and ]. In the example below, the default amount of search results is limited to 25 and the default search radius is 50.

Search settings WP Store Locator

Settings for your map

Map settingsScroll further down the Settings page to find the Map settings. You can enter a lot of settings for your map. One of those settings – the Start point – is necessary for the map to work. You can enter a country, city or even a specific address as the default starting point.

In addition, you can choose the default “zoom level” for your map and whether or not you want your visitors to be able to use Google Street View.

Another nice settings is “Enable scroll wheel zooming“. I usually disable this because it can be annoying for your visitors.

Adding store locations to the map

To add “Locations” to your map, in WordPress, go to Store Locator > New Store. Enter a title and (optional) some text for your store. Then scroll down to enter the “Store details”. This is where you enter the location of your store. You can enter an address and the store locator plugin will automatically add your location:

Add a store

In the second tab, you’ll be able to enter “opening hours” for your store. The third tab allows you to enter “store details”, such as the website and phone number:

Store details

Now scroll back up and click the blue “Publish” button. Your map will now contain one location.

Adding your map to a page

To show the map on a page on your website, you will need to use the [[wpsl]] shortcode. Enter this shortcode in a page and publish it. Now view your page to see the map in action:

The mapThe red marker is showing the “default location” of our map. I selected “Netherlands” as a default location, so the marker is showing in the middle of our country. Now, to add more locations go back to Store Locator > Add New and add more locations for your map. In the example below I have created two stores in the same street in Amsterdam.

Store Locator in action

As you can see, your visitor will be able to select a location and get directions to that location. In the example above, those directions are limited to directions by car.

Additional settings

If you are not happy with the way the Store Locator looks, there are a lot of extra settings. To find those, go to Store Locator > Settings in WordPress. Scroll down and you will find a lot of extra settings. For instance, you can change the dimensions (in pixels) of your store locator, choose an address format or even change the colours of the markers.

store locator markers
Change the colour of your markers.

Change the labels for your Store Locator

If you don’t like the text shown on the front end of the Store Locator, you can easily change this by scrolling down to “Labels” on the Store Locator settings page. This can come in handy when you want to quickly translate your Store Locator.

Labels
Personalize your store locator by changing the labels.

Rate this article

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Wouter Postma

Co-owner of WPLounge.nl, the biggest Dutch blog about WordPress.

Comment