How to Add Google map in Gutenberg WordPress free in 2024

Adding Google Maps to your website makes it easy for visitors to find your location and can also help your site show up better in search results. This means more traffic and potential customers.

In this article, we’ll walk you through How to add Google map in Gutenberg WordPress site, improving both how users interact with your site and how well it performs in searches.

Let’s get started!

Why use Google Maps in WordPress?

Google Maps is very important for a WordPress site, it is the most popular navigational app in most platforms. Let us find out how we can reap the benefits.

Your site’s local SEO will improve

• If you add Google Maps to your WordPress site, Google search engine can easily get all your coordinates, which will improve your local SEO.
• With 1 billion people searching using Google Maps weekly, local SEO can help people find your site easily.

Easy to navigate directions: 

• People will set directions by car, foot, public transit, or bike to reach your business.

Increased Interactivity: 

• If your map is pretty Interactive people will interact more with your website and as more people interact it will build trust among them

Better User Experience:

• Maps can add flexibility to your site because people can find your business quickly, which makes it easier for them to locate you.

Locating Multiple stores:

• If your business has multiple branches in different locations, your customers can find it easily from the maps integrated into your websites. So your business will not have any boundaries and you can grow it further.

You need to add Google Maps to your WordPress site for these reasons. Now let us look at how to add Google Maps to WordPress.

How to Add Google Map in Gutenberg WordPress Free

If you want to add Google Maps to your website, you need an API key first. Google needs an API key for Google Maps to work right as of June 11, 2018. This API key verifies and authorizes requests to the Google Maps Platform. This helps to ensure that your usage is tracked and charged correctly.

How to create an API key for Google Maps?

To use Google Maps on your WordPress site, you need to:

Sign up for a Google Cloud Platform Console account by clicking the Get Started for free button.

Create a project and click the Agree & Continue button.

Click the Start Free button to set up your billing account and get your billing info verified.

Now answer each question, click continue, and finally hit the submit button.

Your API key is generated.

To load the map and deliver the required functionality, the Google Maps JavaScript API uses this API key. You can not use Google Maps on your site without an API key.

Well, now we will add Google Maps to our WordPress website for that we need a Gutenberg block for maps free.

How to install ZoloBlocks?

So we will install ZoloBlocks

Go to WordPress Dashboard

Now navigate to Plugins -> Add New Plugin.

Type ZoloBlocks on the Plugin search and click the button Install Now.

After installation, activate the plugin.

You will be welcome with the ZoloBlocks welcome page.

Now go to the Blocks tab and check if your Google Map block is enabled or not.

After enabling the Google Map block, go to the API settings tab and click the edit icon for Google Map.

Now place the API key you get from Google Cloud on the API field and click Save Changes.

Great, you have configured Google Maps successfully in WordPress.

It is time to place the map on a post or page.

Well, we can place the map on the Contact Us page. It is the most suitable place to look for your address and coordinates.

Go to the WordPress dashboard and navigate to Pages -> All Pages.

Now look for the Contact Us Page and click Edit.

Now click the + icon, type Google on the block search, and click on the Map block.

Wow, you just added the maps, let us check the general settings.

You can change the marked location name, its longitude, and latitude and if you have HTML embed code, you can paste it on the marker description.

How to add multiple locations on Google Maps in WordPress?

You can add more locations using ZoloBlocks Google Map block.

Under general Settings, you will find an option called More Locations.

Click the + icon at the right corner.

Type the location name and it will appear on the map with the mark.

You can enable or disable any elements on your map UI from the Map UI option

You can change the map settings under the Settings option.

Change the map view and language from there.

You can change the map height and border radius from the Style tab.

You can change the Marker color and typography from the Marker Info option.

Finally, you can adjust your whole block settings and add additional CSS from the Extra tab.

When all your settings are applied, simply click the Update button at the top and preview the changes.

Wow, your map is displaying perfectly.

Is not the walkthrough so simple?

If you still find any problem you can check the documentation for more information.

Final thoughts

You have come a long way and learned to add a Google Cloud API key to integrate maps on WordPress. But most importantly you learn how to add Google map in Gutenberg WordPress free using ZoloBlocks.  I hope you won’t regret following the walkthrough as you gather all the knowledge about map customization.

Thanks to the ZoloBlocks plugin adding a map is very easy in your WordPress. Your visitors will find you easily using the maps. Let people know where your business is using ZoloBlocks.