Google Maps with WordPress

As we all know you can add all kinds of content to your WordPress site. Adding content from external sources allows you to create rich content that useful and highly interactive. One of them is Google Maps. Google Map is a very essential component in each and every website. Whether you run a business, organization, event, or just need to showcase a map for any other reason, it will be helpful to know how to add Google Maps to WordPress.

This article is all about how to integrate the Google Map API with WordPress in the current scenario. The current Scenario refers to the new Google API policies. From June 11, 2018, an API key is now mandatory for Google Maps. If you’ve already implemented Google Maps on your site and it’s no longer working or you’re getting the watermarked maps, this might be the actual reason. Or rather, you’re missing the API key.

If you don’t have one, this is where and how you can get one:

https://developers.google.com/maps/documentation/javascript/get-api-key

The best part is, for 99% of you, it should still be free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit Google gives you monthly for free. So as you can see unless you’re generating thousands of requests, using Google Maps on your site shouldn’t cost you anything.

For more information, see: Google Maps API Pricing

There are several different ways that you can embed Google Maps on your site depending on what type of map content you want to include. In this article, we’ll show you how to add Google Maps in WordPress without a plugin. Then, we’ll recommend some plugins that can help you to embed Google Maps.

Add Google Map in WordPress without a plugin:

If you want to just show a simple map and don’t need any extra detailed functionality like multiple markers or other annotations then you can add a map to your site without any plugin easily. Please follow the below steps to do it.

Step 1: Get the Google Maps Embed Code

First go to the Google Maps website, type in the address of the location, and create the map that you want to embed. For example, if you want to showplace a marker on the map open that place on the map, or if you want to show directions for a specific location open that.

Once you have the required map, go to the top-left corner and click on the hamburger menu. From the menu items select the option ‘Share or embed map’.

It’ll open a Share popup in that choose ‘Embed a map’ tab. There you can choose your desired size using the drop-down. According to your requirement, you can make the map larger or smaller.

Once you’ve done that, click on the Copy HTML button to copy the embed code.

It’ll be something like this:

Step 2: Add Google Maps Embed Code to WordPress Site

Now all you have to do is just add the embed code to the page or post of your site. If you’re using the Gutenberg Block Editor which was released with WordPress 5.0, you can use Custom HTML block and add the embed code in it.

Don’t forget to add your API key.

You can preview your map by clicking on the Preview button in the top-right corner.

In the same way, you can add the map in the widgets using custom HTML and add it in the sidebar or footer.

That’s it!!

Use a plugin instead to add Google Map in WordPress:

You can check out any plugin from the list below to achieve specific requirements like multiple markers, street-view support, colored maps, multisite compatible maps, map widget feature, etc.