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.
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.
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.
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.
In the text location of custom-made HTML block, you require to paste the code you copied from Google Maps.
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.
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.
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.
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.
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/* (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.
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.
You will be then redirected to API configuration page. Supply a name for this API secret that helps you recognize it as Server key.
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:
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 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.
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.
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.
You can now conserve or release your page and click on the preview button to see Google Maps store locator in action.
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