How to Embed Google Map in WordPress Website (3 Steps)

You can embed Google Map in WordPress website without needing a plugin or a Google API key. All it takes is the WordPress block editor.

In this tutorial, we will demonstrate how to embed Google Maps onto a static page. If you’ve already created a static page in WordPress, you’ll find these steps easy to follow.

So, how do you add a Google Map to your WordPress site, and why should you? Let’s dive into the details below!

Why is Embeding a Google Map to Your WordPress Site Important?

Why should you learn how to embed Google Map in WordPress and implement it? Here are a few key reasons to consider:

1. Boosts Website Credibility

Visually displaying your business location can build trust and credibility in the eyes of your visitors or customers. By embedding a Google Map in WordPress, you allow visitors to see your exact location more clearly.

2. Simplifies Access for Users

By adding a Google Map to your WordPress site, visitors can easily access location information and get directions to find you.

3. Enhances Local SEO

Implementing a Google Map on your website can help with local SEO optimization, making your business easier to find in local searches.

Google Maps can also increase your business’s visibility in Google search results, especially for location-based queries. You can later monitor this traffic by installing Google Analytics on WordPress.

How to Embed Google Map in WordPress Website

This tutorial is broken down into three main parts: (1) creating the embed code, (2) adding the embed code to WordPress, and (3) adjusting the Google Maps layout on your website.

Stage 1: Create the Google Maps Embed Code

The first step is to generate an embed code from Google Maps. “Embedding” is a method of integrating content or functionality from one source directly into your own webpage.

Here are the steps to get started:

1. Open Google Maps and find the address you want to add to your WordPress site. For this example, we’ll use the address of PT. Tonjoo Gagas Teknologi.
   
2. Once the location appears, click the Share button. In the pop-up window, click the Embed a map tab.
   
3. Click the map size drop-down menu; you can choose Small, Medium, Large, or a Custom size. After selecting one, click Copy HTML.
   
4. Save this copied HTML code. You will be pasting this into your website shortly.

Next, you’ll need to add this embed code to your WordPress site. This process is easiest if you have an Administrator role.

If you are not an Admin, you may need to ask the site administrator to change your user role in WordPress. This will ensure you have the necessary permissions to add the Google Map.

Stage 2: Add the Google Maps Embed Code to Your WordPress Website

Once you have the code, you’re ready to add it to your WordPress site. To add the block, you should have a basic understanding of how to use the Gutenberg block editor.

Here, we’ll walk through adding the map to the homepage. If you don’t have one yet, you can try creating a homepage with Gutenberg, or place the embed code in a widget or another page.

1. Open your WordPress Admin dashboard, then click Pages in the left sidebar and select your Homepage.
   
2. In the section of the homepage where you want to add the map, click the [+] icon to add a new block. Type custom into the search box and select the Custom HTML block.
   
3. Paste the HTML embed code you copied from Google Maps. To see how it looks, click Preview.
   
4. That’s it! You have successfully displayed a Google Map on your WordPress website.

However, embedding a Google Map this way doesn’t offer a direct width adjustment feature. This might cause the map to look out of sync with your website’s overall design.

Stage 3: Adjust the Google Maps Layout

For this layout adjustment example, let’s assume our website’s content width is 1200px. To make the Google Map match this width, follow these steps:

1. First, turn the Google Map block into a Group. Click the Custom HTML block, then click the List View icon (1). Next, click the three dots next to the Custom HTML block in the list and select the Group option.
   
2. Open the Settings sidebar (1). In the Content and Wide fields, enter your website’s width. We’ll use 1200.
   
3. In the toolbar that appears above the block, click the width setting icon and select Wide width.
   
4. All done! Now save your changes, and you can view the result on the front-end of your site.

At this point, you have successfully added a Google Map to WordPress and aligned it with your website’s design, making your site look more professional.

Have You Successfully Embed Google Map in WordPress Site?

That’s how you can display a Google Map on your WordPress website without using a plugin. By avoiding extra plugins, you help keep your website from slowing down.

To further enhance your site’s performance, especially if it has many users, you might consider adding a Live Chat feature to your WordPress website.

If you have any questions, run into issues, or need an expert WordPress or WooCommerce developer, feel free to reach out to us through the Tonjoo Contact page, and we’ll be happy to help!

For more articles on WordPress, WooCommerce, and web development, check out Tonjoo Studio Blog by Moch. Nasikhun Amin.

Last Updated on August 27, 2025 by Moch. Nasikhun Amin