• Skip to main content
  • Skip to primary sidebar

How to Add Google Maps in WordPress?

Reading Time: 4 mins. Posted on March 11, 2020, last updated on April 24, 2020 .

How to add or embed Google Maps in WordPress Using a Plugin or directly via the Google Embed Code in Classic and Gutenberg Editor

How to Add Google Maps in WordPress?

Having Google maps on your contact page can help your customers locate you. WordPress allows you to add or embed Google Maps in posts and pages of your website.

In my earlier articles, I shared how to add Google Tag Manager, Google Adsense, and Google Analytics in WordPress. In this article, I will show you how you can add or embed Google Maps to any page or post of WordPress.

There are two methods to add or embed Google Maps in WordPress.

  1. Manually (In the classic Editor as well as using Gutenberg)
  2. Using a Plugin

Let’s see both of them one-by-one.

Manually Add Google Maps in WordPress

Browse the Google Maps site. Here type full address of the location along with Pincode in the search bar. The address must be accurate so that the user gets precise location details.

Google will display your location on the map. Refer to the image below.

amazon india location search in google maps

For easy understanding, I have taken Amazon India Head office location of Bengaluru, India. Click on the Share button on the left panel. A popup will open up on the main screen.

embed a map in google

Click on embed a map option. It will show you the embed code. Copy the iframe code or click on the copy HTML link. Copy the Google Map iframe code.

Now go to your WordPress post or page where you want to embed the Google maps.

WordPress has two editors viz Classic and Guttenberg. Hence, I will be showing how to add Google Maps in both the editors.

Embed Google Maps in WordPress Classic Editor

If you are using the Classic editor in WordPress, then paste the code in the text tab. See the below image.

paste code in wordpress editor text tab

Now click the visual tab in the WordPress editor to see the embedded map. Besides, you can copy or paste the HTML code anywhere in the classic editor to display the map. Save your post or page and preview the Google map.

Embed Google Maps in WordPress Guttenberg Editor

Guttenberg is the latest WordPress editor. All you have to do is select an appropriate block for a specific task.

For example, adding images would require adding an image block first. Likewise, you will need to add a custom HTML block and then paste the iframe code in it.

Refer to the image below:

wordpress guttenberg editor

To add a custom HTML code block, click the “+” sign. Click formatting and select custom HTML block.

Now paste the code in the HTML tab, as shown in the example image above. The preview button will show the visual map. Once you are done save as draft, publish or update the WordPress post or page.

One can add more than one Google Maps on a page by adding the code for each embed. Now let’s see how it is done using a plugin.

Embed Google Maps in WordPress Via a Plugin

If you don’t want to be adding multiple maps, the embed option is the preferred choice. However, there are many plugins for embedding Google maps in WordPress, but the best of all is the MapPress Google Maps plugin.

Install the plugin to be able to embed Google maps in WordPress.

MapPress Settings

Select Google as the map engine and add the required API key.  You can find the step by step guide by Google to getting an API Key on Google cloud here. Beyond a specific limit, the loading of maps is chargeable. If you don’t wish to pay, you can continue using the leaflet API.

MapPress WordPress settings

Once you are done configuring the plugin, head over to post or page editor, embed the maps, as shown in the image below.

mappress interface in wordpress

Click on the New Map button. Give a suitable title to your map. Select the display size from the set of preconfigured sizes. Besides, you can insert your custom map sizes too.

adding map using mappress plugin in wordpress

Now enter the address in the search bar that you want to display in your post or page. Once you verify that address is what you want it to be, hit the save button.

To insert the saved map click insert into post button. Update your post or page and see the preview.

You are Here: Home / Tools / How to Add Google Maps in WordPress?

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business. Read more about me here.

May I help You With ...

Upwork Proposal
Finding Clients
Start a Store
Start a Blog
 

Or Help Yourself ..

Primary Sidebar

About Shabbir Bhimani

Blogging Since 2009. If I can leave my high paying C# job in an MNC in the midst of global financial crisis of 2008, anybody can do it. @BizTips I guide programmers and developers to Start and Grow an Online Business.

Get in touch with me on LinkedIn or read more about me here.

Let me Guide You to Start and Grow your Online Business

Download my
FREE eBook NOW
to win more clients.
And it is not an annoying pop-up either

Additional menu

  • Twitter
  • Linkedin

BizTips

Shabbir Bhimani: Start and Grow an Online Business

  • Freelancers Start Here
  • Start An eCommerce Store
  • Start A Blog
  • About
  • Archive
  • Disclaimer
  • Contact
  • Glossary

2009 - 2023 All my content & images are licensed as Creative Commons.

WebTurtles LLP. LLPIN: AAL-5288. Hosted with Linode.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT