How to Include Google Maps Store Locator in WordPress

Do you want to add Google Maps store locator in WordPress? A shop locator is a map indicating your business location.

It permits users to locate you on the map, find driving instructions, or share the area with pals. Including a shop locator to your company site and even an online shop assists you immediately earn user trust.

In this post, we will reveal you how to quickly include Google Maps store locator in WordPress.

How to add a Google Maps store locator in WordPress

Google Maps introduced a paid API to display maps on websites. They still use a minimal totally free option to embed Google maps on little sites

Many Google Maps plugins for WordPress utilize the Google API to recover and show maps. If you want to utilize a Google Maps plugin, then you will require to join Google API platform and enable billing option.

It is a pay as you go service, which implies you will be charged based upon the number of API calls made from your website.

We will show you both totally free and paid methods with their benefits and drawbacks, then you can choose the one that finest matches your requirements.

Technique 1. Adding Google Maps to Your Website for Free

This technique is simpler and complimentary. The disadvantage is that you can disappoint several shops on a single map.

It is advised for users who simply wish to include a single Google Maps store location on their website.

Initially, you need to go to the Google Maps website on your computer system. Next, enter your shop’s address in the search field and Google Maps will reveal it on the map with a pinned marker on the map.

Sharing a map in Google Maps

Make certain that the marker is put on the appropriate area. You can choose a zoom level by clicking the zoom button. As soon as you are satisfied with the zoom level, you need to click the share button from the left column.

This will bring up a popup where you need to change to the ‘Em bed a Map’ tab. You will now see your browsed area on the map with an HTML code.

Copy the Google Maps embed code

Click on the Copy HTML link to get the embed code.

Now head over to the admin location of your WordPress site. Once in the admin location, go ahead and modify the post or page where you desire to display the shop area map.

Typically, users add a store location map on their contact type page with their contact number and opening hours.

On the post modify screen, you require to include a customized HTML block.

Adding a custom HTML block in WordPress

In the text location of custom-made HTML block, you require to paste the code you copied from Google Maps.

Maps embed code in WordPress

You can now switch to the sneak peek tab to see Google Maps embedded into your page. It will reveal your shop area marked on the map with links to instructions or to conserve the place.

Store location marked on the map

Technique 2. Add Google Maps Store Locator Utilizing a WordPress Plugin

This technique is advised for users who wish to show numerous store areas on a Google Map.

The first thing you require to do is in install and activate the WP Store Locator plugin. For more information, see our action by action guide on how to set up a WordPress plugin

It is a free Google Maps plugin that allows you to produce a custom map with numerous store areas and customized fields.

The disadvantage of this technique is that it needs you to add an API key. You will need to supply your billing information to use the API key. For pricing and other details, please have a look at the Google Maps Platform website.

Ready, let’s start.

Step 1. Generating Google Maps API keys

.

To use WP Shop Locator plugin, you will need to generate 2 API keys. The very first one is called the Browser API key and the 2nd one is called the Server Key.

Let’s start with the Web browser key first. Click this Google Designer Console link and it will take you to the Google API site with all the required APIs made it possible for.

Create a new project

You need to create a brand-new project and offer it a name that assists you determine the project. After that, you will have to wait a couple of moments as the console creates the task for you.

Next, you will be redirected to the API essential setup page. You need to supply a title for your API secret, so you can easily identify it as the browser api key for your Google Maps task.

Browser api key settings

Next, you require to set ‘Application Limitations’ to ‘HTTP Referrers’. Listed below that you need to set the ‘Accept requests from’ field to your domain in the following format.

https://example.com/*


https://*.example.com/* (if you are utilizing a subdomain)

Lastly, click on the ‘Produce’ button. The console will now conserve your settings and will reveal you the Browser key. You require to copy and paste this type in a text editor, you will require it later on.

Copy browser api key

Next, you require to produce the server API key. Click this Google Developer Console link and it will take you directly to the console with picked APIs allowed.

You will when again see the create project page. Nevertheless considering that you have actually already created a job, you can just click the drop-down menu and choose your job.

Select your Google Maps project

You will be then redirected to API configuration page. Supply a name for this API secret that helps you recognize it as Server key.

Set IP restrictions

Under the ‘Application limitations’ section, you require to select IP Addresses. Essentially, we are telling Google to only accept server demands coming from specific IP addresses.

Now you would need to ask your WordPress hosting supplier to tell you the IP range utilized by your hosting account. It would remain in the following format:

172160.0/12

After that, you need to click the ‘Create’ button to conserve your settings and copy the Server API key.

Action 2. Setting up the WP Shop Locator Plugin

.

When you have produced your API secrets, you require to head over to Shop Locator” Settings page to set up the plugin.

Enter Google Maps Keys

Enter the Google Maps internet browser and server API secrets you produced earlier. Next, select Maps language and region and then click the save changes button to keep your settings.

Now, you require to scroll down on the settings page to the ‘Map’ area and enter a start point of the map. This start point might be a city or a country, so users can see markers placed at various areas.

Add a start point for your store locator map

There are many other alternatives on the settings page including map design, default zoom level, map type, search radius, country, and so on. You can review them and change them to your needs.

Once you are done, it is time to add locations.

Action 3. Adding shop places

.

Head over to Store Locator” New Store page to include your very first place. The New Store page will look just like the default post or page editor in WordPress.

Store address

Provide a title for your store and after that scroll down to ‘Store details’ area. From here, you need to enter your shop address.

You will see a map in the best column, however it will not immediately update to the address you have actually gotten in. You will need to click the Publish button to conserve your place. After that, refresh the page and the map will indicate the address you offered.

Now duplicate the process to include other shop areas. You can add as numerous shop locations as you desire.

Action 4. Including the store locator map in WordPress

.

To display your store locator on a WordPress page, simply create a brand-new page or edit an existing one where you want to show the map.

On the post modify screen, you need to add the ‘Shortcode’ block to your post modify location. After that include the [wpls] shortcode inside it.

Store locator shortcode

You can now conserve or release your page and click on the preview button to see Google Maps store locator in action.

Store locator map preview

It will reveal your map markers for each store area and start the map from your chosen beginning point. For instance, in this map, it is focused on the city of West Palm Beach and revealing two shop areas on the map.

That’s all we hope this article assisted you learn how to add Google Maps store locator in WordPress. You may also want to see our list of totally free Google Tools every site owner need to use

If you liked this article, then please sign up for our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook

Comments are closed.