How to Add Google Maps in WordPress (2 Different Ways)

HomeWordPressHow to Add Google Maps in WordPress (2 Different Ways)

How to Add Google Maps in WordPress (2 Different Ways)

If you run a business that has a physical location, adding your business’ location to Google Maps could be a great idea to make it easier for your aspiring clients to find it. If you have a website for your business, you can also add the map to your website so that your clients don’t have to manually find your business on Google Maps. Instead, they can follow the map you provided on your website. WordPress has no specific feature to add a map from Google Maps to your website but it doesn’t mean you can’t add your map.

There are always two ways to achieve things in WordPress: manually and via a plugin. In this article, we will show you how to add Google Maps to your WordPress-based site with those two methods.

Adding Google Maps to WordPress manually

Google Maps supports embed feature to allow you to embed a map to a web page. You can make use of this feature to add the map of your business to a WordPress page or blog post. The downside of this method is that you can’t customize your map like setting the size and zoom level. You can only display the map the way it is just like the one you see on Google Maps.

First, visit the Google Maps website and search for the location of your business. Once you found it, click the Share button.

On the appearing popup window, click the Embed a map tab and copy the HTML code of the map.

Next, create a new post (Posts -> Add New) or a new page (Pages -> Add New) you want to add the map to. Of course, you can also edit an existing post or page. On the WordPress block editor, add the Custom HTML block and paste the HTML code you have just copied.

If you use Classic Editor, you can switch to the code editor mode to add the HTML code.

What if you want to add the map to the sidebar or footer? One of the plugins that you can use is Maps Widget for Google Maps. The plugin uses a WordPress widget to add the location so that you can add your location to any area that supports WordPress widgets like the sidebar, footer, and even header. You need a Google Maps API key in order for the plugin to work.

Adding Google Maps to WordPress using a page builder plugin

A page builder plugin allows you to create a beautiful page on your WordPress site without coding. You can use a page builder plugin to create a beautiful contact page, about page, homepage, and other page types on your WordPress site. Most page builder plugins — including Elementor, Divi Builder, and Brizy — allow you to add a map element to a page. Especially for Elementor, you can even create a map with multiple pins or a 360-degree virtual tour with the help of add-ons like Essential Addons and JetElements.

In this article, we will show you to add a map from Google Maps using Elementor. Elementor itself is a freemium plugin and the element (called widget) to add Google Maps is available on the free version. In other words, you can use the free version of Elementor to add Google Maps to your page.

Once the Elementor plugin is installed and activated, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor by clicking the Edit with Elementor button. This step will take you to the Elementor editor.

On the Elementor editor, add the Google Maps widget by dragging it from the left panel to the canvas area (you can read this article if you are completely new to Elementor).

Next, go to the left panel to customize the map. First, you can type your location on the Location field under on the Map block under the Content tab. From the Map block, You can also set the zoom level as well as the height of the map.

You can then switch to the Style tab to style up the map. There are not many styling options offered by the Google Maps widget. You can only apply some CSS filters. Once done customizing the map and editing your page (you can add any widget to your liking to your page to make it more compelling), you can publish your page by clicking the PUBLISH button on the bottom side on the left panel.

The bottom line

You can use one of the methods above to add a basic map from Google Maps. To add a more advanced map like a map with multiple pins, polygon, polyline, or panorama, you need a Google Maps API key. One key thing to note. Google requires you to provide the payment information (your credit/debit card) in order to make your map works (you can still use Google Maps for free). Otherwise, you will see an error message something like “For Development Purposes Only” when trying to preview your map.

hand-picked weekly content in your inbox


related posts