How to Add a Google Map Store Locator in WordPress

With online businesses booming, WordPress has helped a multitude of users create and run their e-commerce stores, especially in recent times. Despite that, local businesses still represent a significant part of the market share, which means it is vital to have a way for buyers to find you. The easiest way of doing so is by adding a store locator to the WordPress website belonging to your business.

Store locators are interactive maps that customers can use to locate your store, get directions on how to reach it, and even share the location with their friends. As a bonus, your website will gain more credibility and likely increase its online presence in the process. In this article, we will discuss how you can add a Google Maps store locator using two possible methods. We will cover both in great detail, as well as their advantages and disadvantages so that you can best decide which is more suited for you.

If you’d like to skip to any specific part of the article, just click on one of the links below:

Adding a Google Map store locator in WordPress

While it’s clear why displaying store locators is beneficial to your WordPress website, the question remains how you can do so. Some WordPress themes may offer shortcodes that allow you to display a Google Map on your pages. This would be the easiest way you can use to add a Google Map store locator to your WordPress website. All themes from QodeInteractive include a Google Maps shortcode to help you display your location.

However, if you aren’t using a theme that offers ways to add Google Maps to your website, there are alternative approaches you can take. These include embedding a simple map iframe or creating custom maps with pins using suitable WordPress plugins. In this article, we will guide you through those two methods. Both come with their pros and cons, which we will also discuss. You should carefully consider both methods before you decide which one suits your needs.

And, if you’d like an alternative to Google Maps, you can take a look at our article on adding Bing maps to your website, as well. With that being said, let us begin.

Embedding an iframe

All WordPress users, regardless of the theme they’re using, can embed a map iframe inside the content of their pages to add a Google Maps store locator. This method is both free and easy to implement, as it requires only a couple of steps.

But, the major downside of this method is that you can only show a single store location with it. As such, if you own multiple stores or have offices across several locations, you won’t be able to show them on a single map. Also, this method doesn’t allow for extra map modifications, such as adding custom fields, settings, or stylization. However, if you need the map to show only a single location then you can follow along with the steps below as we explain how to embed a map iframe on one of your pages.

First, visit the Google Maps page and insert the address of your store. A map of the general area surrounding the address you inserted will be shown on the right, with the exact address marked with a pin. Make sure to adjust the zoom level of the map before sharing it. Once you’ve done that, press the Share button from the menu on the left to share the map.

This will open a popup window with two tabs—Send a link and Embed a Map. Send a link will be open by default. Switch to the Embed a map tab and press the Copy HTML link, afterward.

You can also edit the size of the iframe that will be displayed on your website beforehand. The size options include small, medium (default option), large, and custom size, which allows you to insert the width and the height of the iframe. For this article, we chose to insert a large-sized iframe.

The next thing after that is to add the HTML code you copied inside one of your pages. Whether you add it on an existing page or create a new one for this purpose is up to you. In either case, this code needs to be pasted into the custom HTML element of the page builder you are using.

If you are using Gutenberg, add the Custom HTML block and insert the copied HTML inside it. Then, press the Update button to save the changes on the page.

On the other hand, if you are using WPBakery as your preferred editor, you should insert the HTML code inside a Raw HTML element. And, if you are using Elementor, insert the HTML code inside an HTML widget.

After you add the code, check your page to see how the embedded map looks on your website. You can see below how the map looks on a page made with the Lekker theme.

Using a WordPress plugin

The other possible method for adding a Google Maps store locator is to use a WordPress plugin that integrates Google Maps API keys. The advantage of this method is that you can create a custom map with multiple pinned store locations, as well as customize its additional fields and style settings using the plugin options.

However, since Google API keys are needed for the map to show and work properly, it means this method includes some costs. And you will need to provide your billing information before you start. The fees are calculated based on the number of API calls, which means it can be quite expensive if your website has a lot of visitors. Therefore, you should think carefully about this method before deciding if you wish to use it.

If you decide to use this method, you should be aware that there are a lot of WordPress store locator plugins, both free and premium. For this article, we have decided to use the WP Store Locator plugin.

The WP Store Locator plugin is a free WordPress plugin that integrates Google Maps and allows users to create custom maps using the provided settings. These settings include directions and distance measuring, displaying additional data like email addresses, phone numbers, or website URLs, multilingual compatibilities as well as the option to add custom map styles.

After installing the plugin, navigate to Store Locator > Settings. Here, you will see the wide range of options included in this plugin and two warnings. These warnings concern all the requirements you need to sort out before using the [wpsl] shortcode this plugin provides. The first is for setting a start point and the second is for creating the API keys necessary for the shortcode to work.

Therefore, before we can start using this plugin, we need to create the API keys.

First, log in to the Google Cloud Platform with your credentials and create a new project. That’s done by clicking on the Create project button located in the Home > Dashboard section.

You can also click on the Select a project link at the top of the screen to see all your current projects and then click on the Create project that will appear in the top right corner of the popup window.

Next, insert the project name and press the Create button below. If you want, you can also edit the project ID and assign a location to the project beforehand.

Then, access the APIs & Services section from the navigation menu on the left.

Then, click on the Enable APIs and Services button, located in the top part of the APIs & Services page.

This will load the API Library page. To enable a Google map store locator, you will need to enable the Maps JavaScript API. Find it either by browsing or by using the search feature near the top. Then, click on the API to open it.

When the Maps JavaScript API page opens, click on the Enable button near the top to enable it.

Once you’ve done that, you can proceed to create your API credentials.

However, in some cases you might need to enable Geocoding API as well. You can find it within the same section as the Maps JavaScript API—simply click on the View All link in the Maps section to see all the map-related APIs.

Then, enable the Geocoding API the same way you enabled the Maps JavaScript API.

When you’ve added all your APIs, you will need to create the API credentials. To do so, return to the Google Cloud Platform’s dashboard page and access the APIs & Services > Credentials page.

Then, click on the Create credentials button located near the top of the Credentials page, and select the API key suboption.

Shortly after, a popup window where you can see your API key will open. You will need your API key for the later steps in this process. Apart from it, the popup window will have two buttons called Close and Restrict key. We advise pressing the Restrict key to restrict the use of this API key.

This will open a page where you can edit the API key name and its restrictions. If you have accidentally pressed Close in the previous popup window, you shouldn’t worry, as this page can also be accessed by pressing the Edit API key button next to the API key you previously created.

With that being said, you should set the Application restrictions to HTTP referrers (web sites). Then, in the new section that appears called Website restrictions, insert the allowed referrers—the websites that are allowed to use the API key. For more information on how to correctly add those website URLs, you can review the Google Cloud documentation, particularly the part on adding HTTP restrictions.

In our case, we added two entries; the first for our website without a trailing slash and the second for a wildcard path, which allows the use of the API key from any page on our website.

However, keep in mind that these URLs differ from user to user, so the best course of action is to check the documentation before concluding which referrers are appropriate for your website. After you add the appropriate URLs in the Website restrictions section, click on the Save button at the bottom to apply those restrictions.

You will have to wait a bit for the settings to take effect. As you can see from the notice near the bottom of the page, it may take up to 5 minutes for the changes to apply. When it is done, you will see a green success icon next to the API key.

This key will be used as the browser key within the WP Store Locator plugin. You will also need to create another API key, which will serve as the server key.

Therefore, click on the Create credentials button once more and select the API key suboption.

Then, click on the Restrict key button in the popup window to restrict this API key as well.

In the following window, set the Application restrictions option to IP addresses (web servers, cron jobs, etc.) and insert the IP address of your web server in the Accept requests from these server IP addresses section. As you can see from the note in that section, you can insert one IPv4 or IPv6 address or a subnet of either. Once you’ve done that, press the Save button below to apply the selected restrictions.

For those that aren’t sure what their website’s IP address is, asking your hosting provider is the easiest way of finding it out. However, there are ways you can find out the IP address on your own.

Since the necessary API keys have been made, the only thing that remains is to insert them within the plugin options and fill out the remaining settings accordingly.

Therefore, navigate once more to Store Locator > Settings and insert the two API keys you created as the browser and server keys, respectively. Then, press the Save Changes button below to save the API keys within the plugin settings.

Following that, we advise validating the API keys before proceeding to change any plugin settings. This is done by clicking on the Show response button next to the Validate API keys option. If you’ve done all the previous steps properly, you should shortly see two messages at the top of your screen stating that there wasn’t any problem with the API keys. Those messages will replace one of the warnings which was there previously.

In the case you weren’t able to validate both API keys, you should wait a bit and then try to validate it once more. If the issue persists, check that you’ve done all previous steps in keeping with the instructions. Additionally, you can take a look at the list of common API errors in the plugin’s documentation for more guidance on potential errors and how to solve them. After you succeed at validating both API keys, proceed as described below.

Then in the plugin’s options, select the map language and region and click on the Save Changes button below. In the example we made for this article, we kept the default map language and region settings.

After that, you can adjust the remaining settings according to your needs.

Since there are quite a few options, we will not go into a lot of details about them. Instead, we will only show the required settings for the shortcode to work. Apart from the API keys we previously added, another required setting is Starting point. It is used if the auto-locating option has failed or has been disabled within the plugin settings. You can use either a city or a country as the starting point. After you insert it, click on the Save Changes button.

As for the other options, which aren’t required, you should examine the plugin’s documentation. More precisely, you can take a look at the configuration page, which explains all the settings and provides additional tooltips and warnings. For the example we used in this article, we left most of the options set to their respective default values. But there was one notable exception—we added a custom map style from Snazzy Maps by pasting the JSON object into the map style field.

Once you’ve adjusted all the options according to your needs, the following step would be to set the location by adding information about your offices or stores. To do so, navigate to Store Locator > New Store and insert all the required information. You will need to add a title and address and click on the Publish button to publish it. You can also set the opening hours and additional information like phone number, fax, email, or website URL using the tabs named Opening Hours and Additional Information. Then you can proceed to do the same for all your remaining offices or stores.

Please note, the map you see in the Store Map section in the corner won’t auto-update after you insert the data. The changes you make will become visible after publishing and refreshing the page.

When you’ve added locations you want to display on your map, you need to insert the shortcode provided by this plugin to your chosen page. That can be a page with existing content or a brand new page where you want your map to be shown.

If you are using the Gutenberg editor, add the shortcode block and insert [wpsl] inside it. Then, click on the Update button to publish the map with store locators.

For users that use WPBakery or Elementor page builders, you can add the same shortcode inside the Text Block or Text Editor elements, respectively. If you’d like to learn more about inserting or using shortcodes, you can take a look at our article on creating custom shortcodes.

After you insert the shortcode, the only thing that’s left is to check the page to see if you’re happy with the result. How your map looks will depend on the options you set and the stylization you used. You can see the example we made in the screenshot below.

As we mentioned earlier, most of the settings that we used for this article were left on default, we only styled the map with Snazzy Maps. Once your map is displayed on the page, you can explore the wide range of settings this plugin offers and try them out to find the ones that suit you the most. Don’t forget, you can also change your map’s look by adding custom map styles to bring it in line with your brand image.

Bonus tip – Finding your IP address

Your IP is your identifier in the online world, and there are plenty of reasons why you might want to find out what yours is. Whether you need it for making store locators or mapping domains or anything in-between, knowing how to find your IP can be very useful. Fortunately, there are several ways you can do this, and we will explore them below.

Apart from asking your hosting provider, your website’s IP address can be seen in the General Information section within cPanel. To find it, log in to cPanel using your credentials and look for the IP address within the General Information section in the top right corner of your screen.

If you weren’t able to locate your webserver IP address there, you can also click on the Server Information link within the General Information section to see additional information regarding your server.

In the page that opens, look for the server IP address within the Server Information subsection.

Another way to figure out your web server IP address is to run a ping test using a third-party website.

Generally speaking, pinging a website address is another way of letting search engines know about your newly created content, which should be indexed so it’s visible to them. But, in a pinch, it can be used to figure out the website’s IP address.

How it works is that you navigate to an online tool for running ping tests, insert your domain name, and then click on the Ping Now button.

Your website will be pinged from several locations and you will be able to see your IP address within the IP column, as shown below.

Finally, you can also ping your website using the Command Prompt application in Windows or Terminal in Mac.

To do so, open the appropriate application for your device (Command Prompt on Windows or Terminal on Mac), insert ping your-domain-name, and press the Enter key on your keyboard. You will need to replace the your-domain-name part for this to work, of course.

Now that you’re armed with the knowledge on how to find your IP, you can proceed to confidently set up your store locator or apply the information wherever else you need.

Final Thoughts

Having an interactive map on your website with the locations of your stores or offices marked can improve your business revenue, earn the trust of your clients and visitors and even boost your website’s ranking in local searches. Whether you’re selling food and trying to snag hungry passers-by or wanting to attract curious tourists or local traffic, you need to give potential clients and customers a way to locate you.

In this article, we explored the different ways of implementing store locators on your site using Google Maps. While there are different ways you can do this, the two methods we discussed are both accompanied by detailed explanations so you can choose the one you prefer. Both come with a unique set of pros and cons, but we are confident that you will be able to implement whichever one you decide to use with ease. And as store locators can be a vital asset in expanding your business, we recommend bookmarking this article so you can always have it on hand.