how to add Google Maps to WordPress

Whether you run a business, organization, event, or just need to showcase a map for any other reason, it can be helpful to know how to add Google Maps to WordPress.

What’s more, with the right plugin, you can even create customized and interactive maps that better showcase your physical location or other important information.

Why embed Google Maps in WordPress?

When you run a brick-and-mortar business such as a shop, restaurant, or office, displaying your precise location is key. By embedding Google Maps on your website, you ensure that your customers can find you. This not only eliminates the guesswork from their end when searching for directions, but having a visible, physical location assures them of your tangible presence, which also instills a sense of trust.

Another benefit of Google Maps integration becomes evident if you’re promoting events. Seminars, workshops, weddings, or other gatherings can be stressful for attendees, especially if the venue is unfamiliar. But when you incorporate Google Maps into your site, you’re giving your attendees a helpful navigational tool and increasing the likelihood that your event will have a high turnout.

Moreover, if local visibility is a goal, then you should consider the SEO advantages. With Google Maps, you can significantly enhance your website’s prominence in local search results. This can drive more local traffic to your site and bolster your reputation in your area.

Yet, the advantages don’t stop there. Depending on what your website is about, you may also benefit from the following:

  • If you’re into real estate or run property listing platforms, Google Maps lets your prospective buyers or tenants visualize a property’s location, providing them with clarity regarding its proximity to landmarks or essential amenities.
  • For travel bloggers and tourism sites, maps offer a way to visually guide your readers, painting a clear geographical context for places you discuss or recommend.
  • If your business involves specific routes or deliveries, such as a tour operator or a delivery service, displaying these on a map offers unmatched transparency to your clients.

Now that we’ve covered the benefits, let’s get into the practical portion of this tutorial – how to actually do it.

Introducing the Otter Blocks Google Maps Block

The easiest way to add Google Maps to WordPress is to use the right plugin, such as Otter Blocks. Our developers built this plugin to help users quickly create and customize maps to meet their needs. The powerful UI map builder lets you create as many maps as you’d like, as well as save, edit, and even clone them.

⚙️ Key Features

  • Customize many elements of your maps, including position, zoom level, and much more.
  • Style your maps through color schemes and other options.
  • Add multiple locations and markers to your maps.
  • Easily organize a library of your maps.

💵 Price

Otter Blocks is free with an optional Pro (paid) version. The Google Maps WordPress integration does not require the Pro version. In other words, you can embed Google Maps in WordPress completely for free using this method.

How to add Google Maps to WordPress (in 3 steps)

Now, we’ll show you how to create a map for your website. First, you’ll want to install Otter Blocks on your WordPress site like you would any other plugin. Then, simply follow the steps below to add Google Maps to WordPress!

Step 1: Add your Google Maps API key to WordPress 🧭

Once you’ve installed Otter Blocks, there will be a new section called Otter under the Settings tab in your dashboard. When you visit it, you should see a Maps section with a box for your API key, which must be added before you start creating maps:

Otter Blocks Google Maps API and Settings.

To get this key, visit the Google APIs Dashboard. Assuming you already have a Google account, you should be able to access this dashboard without needing to sign up for anything.

Inside the Google APIs dashboard, select the blue Create Project button near the top of the page:

Button to create a project for Google Maps.

Choose Create on the next screen. Then, you’ll be able to pick a name for your project:

Creating a Google Maps project.

Click on Create once more, and you’ll be taken back to the dashboard. Select Enable APIs and Services near the top of the screen and search the API Library for “Google Maps JavaScript API”. Once you’ve found it, select Enable:

Button to enable the Google Maps API.

On the next screen, click on the Create Credentials button in the top-right corner.

Then on the next page, select What credentials do I need? You’ll be presented with an API key, which you can now copy.

Google Maps API key.

Return to your WordPress site and paste the key in the Google Maps API Key box:

Adding Google Maps API to WordPress.

Don’t forget to save your changes! Now, you’re ready to start building your map.

Step 2: Create a new map 🌍

To create your first map, select the Google Maps block from the Otter section. You’ll immediately be presented with a lot of options:

Google Map Block options in Otter Blocks.

The first thing you’ll probably want to do is select the Add Marker button. This lets you determine a location for the map and place a marker. You can give the marker a title, choose a style for it, and enter an address:

The map marker options.

In the text box, you can also add and format text that will display when a user clicks on the marker:

An example of a map marker.

After that, you can start customizing your map using some of the other options within the map builder. Let’s walk through each tab one by one.

Positioning and zooming

Positioning and Zooming.

To set a certain zoom level and position for your map, you can simply zoom the sample map in and out and drag it wherever you’d like. The way you set it up in the editor is how it will display on your site.

You can also change the type of map, from terrain, satellite, road, or hybrid.

Controls

The controls tab.

In the Controls section, you can decide what kind of choices are available to users. This includes whether they can drag the map and if they have a street view option.

Styles

Map styles.

In the Styles section, you can tweak what your map looks like. You can also choose from several predefined map styles or even create your own.

However, by tweaking the above settings, you should be able to create a map that’s both stylish and useful to your visitors.

Step 3: Place the map on your site 💻

Once your map is tweaked to perfection, don’t forget to save it. Once you do, you’ll see it appear on the page, along with buttons to tweak width, change styles, or remove the map.

The map settings in Otter Blocks.

Hit publish and that’s it! Your map will now display perfectly on the front end of your site:

A map on a website.

You can use this method to place the same map in multiple places or even add a variety of maps to your site. That’s all it takes to add Google Maps to WordPress.

Conclusion 🧐

“Show, don’t tell” is a smart rule to follow on your website. Including a map, for example, shows visitors exactly how your business or organization fits into their community. Maps are a more compelling way to encourage people to visit your physical location than simply providing an address – especially when they are interactive.

👉 To take advantage of this technique on your own site, you can use the Otter Blocks plugin to add Google Maps to WordPress. Just follow these three steps:

  1. 🧭 Add your Google Maps API key to WordPress.
  2. 🌍 Create a new map and configure it using the plugin’s settings.
  3. 💻 Place the map on your site using the provided shortcode.

Do you have any question about how to use the Otter Blocks Google Maps block effectively? Ask us anything in the comments section below!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Antonio Asevedo
August 22, 2018 6:11 pm

Useful post, I’m guessing. Now that Google made the draconian move to raise API costs by 1,400%, small business’ and not-for-profits need to find a new map solution!

Hanna Whilson
April 18, 2018 11:01 pm

This is a very useful post! I used Google Maps plugin by Elfsight https://codecanyon.net/item/elfsight-google-maps-wordpress-plugin/20574814. It has a great design and support. It has to be noted, this plugin has a customizable and mobile-responsive map size. I should say, it was the most intuitive plugin I’ve ever used. But, your guide is very understandable, so thanks for sharing, I’m going to follow it in future. Thanks!

amirah
February 13, 2018 12:15 pm

Go to Google Maps website, and simply type in the address of the location you want to show or search for a location. Once you have found the location, click on the link button in the right hand panel. This will show you the embed code. Copy the iframe code or you can also click on the “Customize and preview the embedded map” to further customize the appearance of the map on your site.
Go to your WordPress website and paste the code in a post, page, or a template. That’s all, save your post/page and see Google map live in action on your site.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!