How to Add Google Maps Store Locator in WordPress?Do you want to add Google maps store locator in WP? Store locator is a map pointing to your business/store location. It enables users to locate you on map, find drive directions or share locations with friends. Adding store locator to business website or an online store helps you to instantly build user trust.
In this post, we show you how to easily add google maps store locator in WordPress. Google maps have introduced a paid API to display maps on website. They also offer limited free options to embed google maps on small sites.
Most WordPress plugins for google maps use Google API to retrieve and display maps. If you want to use plugin then you need to signup with Google API Platform and enable billing options.
It is pay as you go service which means you will be charged based on number of API calls made from website. Here we show you both free and paid ways with their pros and cons, then you can choose the one that best suits your requirements.
How to Add Google Maps Store Locator in WordPress?
Method 1:- Adding Google Maps to Your Website for Free:
This is easy and free method. The main disadvantage is that you can’t show multiple stores in single map. Its mostly recommended for those who just want to add single store location on their website.
At first you need to visit Google maps on your computer and enter your store’s address in search field and google maps will show it on the map with pinned marker on map. Make sure the marker is placed on the right location. You can select zoom level by clicking on zoom button. Once you are comfortable with zoom level, you need to click on share button from left column.
This will bring a popup where you need to switch to “embed a map” tab. You will see searched location on map with html code.
Click on copy html link to get code. Now head over to admin area of WordPress site. Once in admin area, go ahead and edit page or post where you want to display store location map. Normally users add store location map on contact page with their phone number & opening hour.
On post edit screen click on add custom html block. In the next area paste the html code you copied from Google maps. Now switch to preview tab to see Google maps embedded into page. It will show your store location marked on maps with links to direction to save location.
Method 2:- Add Google Maps Store Locator using WordPress plugin:-
This way is recommended for those users who want to show multiple store locations on map. First thing you need to do is to install & activate WP store locator plugin. It’s a free plugin that allows you to build a custom map with multiple store locations & custom fields.
The main cons of this method are that it needs you to add API key and you need to provide billing information to use API Key.
Step 1:- Generating Google Maps API Key:-
To use WP store locator plugin, you need to generate two API keys. First one is called browser API key and second one is called server key.
Let’s start with browser key first. Click on developer console link and it take you to Google API website with all required APIs enabled. You need to create new project & give its name that helps you to identify the project. Then you have to wait for a few minutes as the console create projects for you.
Next you will be redirected to API Configuration page. You need to provide title for API key, so you can easily identify it as browser api key for google maps project.
Next, you need to set “Application restrictions” to “HTTP Referrers”. Below that you have to set “Accept requests from” field to domain name as following format.
https://*.example.com/* (if you are using sub-domain)
Finally, click on “create” button. Console will now save your settings & will show you browser key. You need to copy paste this key in text editor to use it later.
Next create server API key. Click on Google developer console link and it take you directly to console with selected APIs enabled. You will now again see the create project page. Since you have already created project just click on drop-down menu & select project.
Then you will be redirected to API configuration page. Provide name for the API key that helps you recognize it as server key.
Under “application restriction” section, you need to select IP address. Basically we are telling google to accept server requests coming from specific IP>
Now you have to ask your WordPress hosting provider to tell you the IP range used by your hosting account. After that click on “create button” to save settings and copy the server API key.
Step 2:- Setting up WP store locator plugin:-
Once you have created API keys, you need to head over to Store locator>> settings to setup the plugin. Enter google maps browser & server API key that you have generated. Select maps language & region then click save changes to store these settings.
Now scroll down to map sections and enter a start point of map. This start point could be a country or a city so users can see markers placed at different locations.
Step 3:- Adding Store Location
Head over to store locator>> new store page to add first location. The new store page will look similar to the default post or page editor in wordpress. Provide title for your store then scroll down to store details section. Here you need to enter store address.
You will see a map in right column, however it updates automatically to the address you have entered. You need to click on publish button to save location. After that refresh the page and map will point to address you provided. repeat the proceed to add another location. You can add as many locations as you want.
Step 4:- Adding Store Locator map in WordPress.
To display store locator on WordPress page, simply create a new page, or edit existing one where you want to display the map.
On the edit post screen, you have to add shortcode block to your post edit area. After that add [wpis] shortcode inside it.
You can now save or publish the page and click on preview button to see Google maps store locator in action.