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.
- 1 Introducing the Otter Blocks Google Maps Block
- 2 How to add Google Maps to WordPress (in 3 steps)
- 3 Conclusion
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.
- 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:
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:
Choose Create on the next screen. Then, you’ll be able to pick a name for your project:
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.
Return to your WordPress site and paste the key in the Google Maps API Key box:
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:
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:
In the text box, you can also add and format text that will display when a user clicks on the 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.
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.
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.
Hit publish and that’s it! Your map will now display perfectly on the front end of your site:
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.
“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:
- Add your Google Maps API key to WordPress.
- Create a new map and configure it using the plugin’s settings.
- 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!