If you own a physical store as well as an online store, then it’s a good idea to show customers where you’re located. You can easily do this by adding Google Maps to your WordPress website.
In this tutorial, I’ll show you two ways that you can use to add Google Maps to WordPress. I’ll also explain why you need to do so and share a video tutorial that walks you through the process.
There are four reasons why you need to add Google Maps to your WordPress website.
If you have a physical store as well as your online store, then adding Google Maps to your WordPress website is a must. The most obvious reasons is that it allows your online customers to see where you’re located and to stop by if they are in the vicinity.
It also helps with your SEO and makes it possible for local customers to find you when they’re searching for products that you’re selling. Not only that, but they can also immediately see pertinent business information such as your peak times, how busy your store is, and more.
Another reason why you need to add Google Maps to WordPress is because people visiting your website and online store can easily get directions to your store. They can then decide to visit in person without wondering how to get to you.
Lastly, adding Google Maps have many beneficial features. Users can see your store using StreetView which gives them a convenient virtual tour of your store’s location. They can also see what’s nearby which means they can create visual landmarks to remember your store. Google Maps will also display your rating and useful information such as business hours. All of this helps build trust with potential customers.
Now that we’ve covered the benefits of Google Maps, let’s take a look at how to add them to your store using an API key.
Start by going to Google Maps Platform and click the Get Started button. Select Maps in the popup window and click Continue.
On the next page, you’ll need to select or create a project. If this is your first time requesting an API key, create a project, name it however you want, and click continue.
Next, you’ll need to enable billing for your project so go ahead and do so. You will then need to create a billing account and enter your billing information. Keep in mind that they won’t actually bill you as you can use Google Maps API key for free up to a certain limit.
Once you’ve enabled billing, you’ll be able to generate your API key. When your key has been generated, you’ll need to add it to your theme.
In most cases, this option will be located in the Theme Options like in the case of Flatsome theme and Divi theme. In some cases, there may be a Google Maps module that will ask you for the API key.
Check your specific theme documentation to see where you need to add the Google Maps API key. After you have added it, save your changes and you will be able to see the map with your location.
According to Google, they’ve introduced the billing changes to allow for “[…]ability to scale easily with less downtime and fewer performance issues”.
Their new pricing model gives you $200 worth of credits on a monthly basis that you can use for unlimited static maps mobile loads which is equal to the former free account. If you want dynamic maps or interactive maps that allow for 360° viewing, you will be charged based on your usage.
You can find more details about their pricing model on the Pricing page and they even included a calculator that helps you estimate your monthly bill.
It’s worth mentioning that for most users, you will more than likely be fine and within $200 credit limits you get each month.
If your theme doesn’t support Google Maps API key, you will need to add the map manually. Luckily, this is a fairly straightforward process.
Start by going to Google Maps. Enter the exact location of your store and wait for the map to update.
Click the share icon and then click the Embed tab. Copy the embed code and go back to your WordPress website.
You will need to paste this code on every page you want the map to show up. An important thing to note here is that you will need to use the Text tab in your post editor and not the visual tab. If you paste the code in the visual tab, the code won’t work properly.
You can also paste this code in a sidebar or footer widget if your theme supports widgets in those areas. This means your location will be visible on all pages of your site and you won’t have to paste the code over and over on every page of your site.
It’s worth mentioning that you can also embed Google Maps in your WordPress website using a plugin like Google Maps Widget or MapPress Maps for WordPress. The benefits of using plugins are that you don’t have to mess with code and worry about properly inserting the code.
Google Maps Widget claims to help with your page loading times as it loads the entire map using one API request as opposed to using Google Maps API key by itself. The plugin is a simple solution that allows you to use Google Maps and customize how they appear. You can change the pin color, set the size for the map, add custom text, and more.
MapPress for WordPress makes it easy to add Google Maps to any blog or page on your site. All you have to do is enter an address and the plugin will automatically insert an interactive map into your blog. You can add markers for any address, place or latitude and longitude location, create custom text and HTML for the markers, and more. The plugin also supports Street view and your customers can get driving, walking and bicycling directions right on your website.
If you find video easier to follow, here’s a tutorial that shows both methods discussed above. For this tutorial, I’m showing you how to add Google Maps on a website that uses the Flatsome theme.
Adding Google Maps to your online store helps you buyers find your physical location so they can stop by if they are in the neighborhood and check out your entire offer. Use this tutorial to add Google Maps to your WordPress store.
I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!