How to Add Google Maps to WordPress (Beginner’s Guide)

Chưa được phân loại

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.

In this guide, we’ll introduce you to the Otter Blocks plugin, an excellent and beginner-friendly tool. Then we’ll show you how to use it to add Google Maps to WordPress. Let’s take a look!

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. Themeisle 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.

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 & 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

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

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.