Menu
Disclosure: ULTIDA's content is free & reader-supported. We may earn a commission if you click & buy through our links. Your support helps us create the best content & make a difference.
Tutorials

How To Add Google Maps In WordPress (It’s Easy)

how to add google maps in wordpress

I will show you how to add Google Maps in WordPress – the FUN way.

Many requested this tutorial because adding maps is challenging for them.

Not anymore!

But first, you MUST ask yourself if you really need it on your website.

(Or jump straight to the how-to if you know you need it.)

You don’t need to show your location if you run a simple blog with cooking recipes, lifestyle hacks, or book reviews.

But it’s necessary if you have any local business.

It will help your customers to find your location by using Google Maps or any other GPS software with ease.

Remember, it can also help with your website’s SEO. YUP! (You can even get more visitors to your website because of it.)

And it can even enhance the design of your footer, so it’s not just plain text which can look boring.

I recommend adding it in the footer just above the general information about your business like contact, privacy policy, about us, etc.

Why Insert Google Maps Into WordPress?

why insert google maps into wordpress
Nothing is more frustrating than visiting a local business’s website and not knowing where to find navigation instructions.

SUCKS!

And while this will always be the main reason why it’s a must-have, there are other benefits of adding Google Maps to your website:

  • Great address visibility on your website (very eye-catching).
  • Improve your SEO: almost half of the searches are local according to Google.
  • Navigation is smooth and effortless because visitors can send the instructions directly to their phones.

How To Add Google Maps Into WordPress

Attention: If you are wondering why your Google Maps that you added years ago is not working anymore, it’s because Google Maps API is now required.

It also comes with a price, but that is only for advanced users.

For the majority, it’s fortunately still completely free to use.

THE LUCKY US!

There are more ways to insert Google Maps into WordPress, but we will focus on the two most commonly used.

Step 1. Embed Your Code Directly Without a Plugin

This is a more lightweight and clean approach because you don’t need to install another plugin that can slow down your website.

However, most plugins today (the ones I share below) are very code efficient, so they shouldn’t affect your website much.

But this is the perfect way to add Google Maps for all the speed freaks out there that obsess over every EXTRA kilobyte.

Before we start, we need to acquire the Google Maps API key:

  • Visit Google Maps Platform > Credentials page.
  • Click Create credentials > API key. The next dialog displays your newly created API key.
  • Set up the billing account. You will have to add your credit card, but don’t worry, you won’t be charged, unless you go over the very high usage limit.
  • Close the window and check your new API key on the Credentials page under API keys.

Video on how to add Google Maps API key

Google also has a great instructions video if you are still unsure how to create and display an API key (it’s easy):

So, now that you have the keys, it’s time to get that embed code and insert it into the website.

Let’s say you are a famous detective living at 221B Baker street.

Go to Google Maps and enter the address of your business.

Now click the menu icon next to the address like on the image below.

embed google maps code directly to wordpress

Now click on the share or embed map button:

share embed google maps to wordpress

A popup window will open with the embed code.

Click on the “Embed a map” tab.

You can choose between various sizes or even input your preferred custom size.

Click on the COPY HTML button once you are happy with the size and, voila, you have your embed code (it starts with the iframe src tag).

I told you it’d be fun.

google maps embed code share iframe link

Add your embed code to your website

All that is left to do is to COPY-PASTE that code to your WordPress post, page, widget, or any other place where you would like to display the map.

Switch to text mode before you paste the code if you’ll add it to the post or page.

After you switch back to visual mode, your location should display like the example below:

Bonus: Click on Custom HTML block and paste your code to it if you are using Gutenberg block editor.

Step 2. Add Google Maps To WordPress With A Plugin

The EASIEST and FASTEST way to add your address is to use one of the many WordPress Google Maps plugins.

But even when using a plugin, you still need to generate an API key, which you then add to the plugin’s settings.

I thoroughly tested and used the following four plugins over the past two years. Thus I vouch for them and highly recommend you use them.

They immensely speed up the process of adding Google Maps anywhere on your website.

MY 4 BEST GOOGLE MAPS PLUGINS:

Maps widget for Google Maps

maps widget for google maps
First, you’ll need to install and activate the Maps Widget plugin in WordPress. (This applis to all four plugins.)

Navigate to Settings – Maps widget for Google Maps, add your API key and save settings.

When done, go to Appearance > Widgets and add the widget to your sidebar or footer.

maps widget for google maps setup

You can set various settings – from functionality to design. And the Pro version lets you embed maps anywhere on your site with a shortcode.

Need inspiration? Go check these beautiful map examples that they prepared.

maps widget google maps examples

MORE INFO / DOWNLOAD

WP Go Maps (formerly WP Google Maps)

wp go maps free plugin
WP Go Maps is bragging to be the easiest (to use) Google Maps plugin with 400,000+ active installs and 4.8 ratings.

You can add a customized Google Maps, map widget, or store locator to your WordPress posts and pages quickly and easily with a shortcode.

Reminder: Don’t forget to add your API key. Now you are ready to add your map.

You will see the “Maps” section appear in your admin’s left navigation menu after installation and activation.

A clean UI design will lead you through the process of map creation.

First, choose a preset:

wp go maps presets

Now set the options for your map (height, width, zoom, etc.) and drag your map to your desired location. Press the “Save Map” button.

This is the “hard” work.

You then copy and paste the shortcode to where you want the map to appear and the plugin will take care of the rest.

There are also many advanced options, like directions, geolocation and custom styling (all in pro version).

But I rely to the amazing free features for the majority of project:

  • Responsive maps
  • Elementor block
  • 1-click to edit map draggable markers
  • 9 map themes
  • Create or add your custom map theme
MORE INFO / DOWNLOAD

Easy Google Maps

easy google maps plugin
I think this is the plugin I used the most, and just recently for a local bakery and accountant businesses.

It’s so easy to add that my clients comfortably manage it themselves after my initial setup.

This is how you create custom maps with various markers.

Start by clicking on Add Maps in the left menu of your admin dashboard.

Set height and width (in pixels or percentages) and add markers simply by clicking the Add Marker button.

Save and you’re ready to roll!

BTW, don’t forget to copy and paste the map shortcode.

MORE INFO / DOWNLOAD

Gutenberg Block For Google Maps

gutenberg block for google maps
If you are using WordPress with Gutenberg builder you can also use the integrated block.

It’s a simple tool that adds a Google Maps block to your Gutenberg-created page.

You can add any address, set dimensions, zoom level, and option to switch between interactive and static maps.

It doesn’t have all the fancy options like the plugins described above, but it gets the job done.

I go with this one any time I need to add a simple map.

MORE INFO / DOWNLOAD

Let’s talk about performance

Every INTERACTIVE and GRAPHIC-HEAVY addition to your website has its price.

And the same goes for Google Maps.

While your site will look much better, it will also load a bit slower.

There are numerous scripts that need to load and that takes time.

If you want to use the interactive version of the map, there is not much that you can do.

But, if the static version is enough for you, there is a simple hack.

Take a screenshot of your location and save it as an image. Then, instead of embedding the map, simply paste the image to where you want the map to be.

That also means that you don’t have to set up the API, embed code or install plugins.

So, you are ready to go in less than a minute with a nice image added to your website, showing your business’s location.

The only downside is that it doesn’t look as PRO as the actual map. But from my experience, rarely does anyone notice. 🙂

Conclusion

Adding Google Maps is a bit more complicated today because you have to set up the API key.

That’s why I wanted to create this tutorial, so you quickly get over (any) obstacles in setting up your perfect Google Map.

Remember, this is an excellent addition to your website to help your business grow.

Both in the Google search engine and in the eyes of your customers.

And that’s a WIN-WIN situation right there.

No Comments

    Leave a Reply