Instructions to embed Google Maps into Wordpress in many ways

Like many other things in WordPress, there are a number of different ways you can embed Google Maps on your site depending on the type of map content you want to include.

In this post, we'll start by showing you how to add Google Maps in WordPress without a plugin. We will then recommend a number of plugins that can help you embed Google Maps, as well as some of the benefits of that approach. We will also dive into the correct use of the Google API API, which is currently required.

Google Maps API is currently required

As of June 11, 2018, an API key is currently required for Google Maps. If you have implemented Google Maps on your site and it no longer works, this may be the reason. Or rather, you are missing an API key. The good news is, for 99% of you, it will still be free. Here it is Google Maps API pricing .

Google Maps API pricing

Google Maps API pricing

Google also gives you a recurring credit of $ 200 on your billing account each month to offset usage costs. So as you can see unless you make thousands of requests, using Google Maps on your site will not cost you any money.

What else has changed? Nothing, but now you will need to do the following if you want to use Google Maps in WordPress:

  1. Register for a Google Cloud Platform Console account and configure it.
  2. Add your billing information, though you may never be billed.
  3. Add an API key to your plugin settings or your Google Maps embed code.

How to get Google Maps API Key

Here are the steps on how to get your Google Maps API key.

Step 1

Move in Google Cloud Platform control panel . If you do not have an account, create one, it's free.

Step 2

Select or create a project.

Step 3

Set up your billing account. Although they will require you to put a credit card on file, you will never be charged unless you exceed the high usage limit.

Step 4

You will be asked to choose one or more products. This depends on the type of map you are using. For example, if you are embedding a map on your WordPress site without the plugin (as shown in the next steps below), then you'll choose the Google Maps embed API.

Google Maps Embed API

Google Maps Embed API

If you are using a plugin like the Google Maps Widget (as shown in the next steps below), then you will choose the static Google Maps API.

If you are using a third-party plugin or theme, they should have documentation about the type of Google Maps implementation they are using. Don't worry, you can always add more categories and change these later.

Step 5

Click Activate.

Enable Google Maps API

Enable Google Maps API

Step 6

Click on the API API, and then, under Credentials, you'll see your API key.

API key of Google Maps

API key of Google Maps

Step 7

If you simply embed your Google Maps API key, it will display in plain text in your source code. Therefore, you should limit this, otherwise, people can use your API key on their WordPress site or project and improve your usage.

To do this, simply click on your API key name and it will allow you to add a restriction. For your WordPress site, just adding an HTTP referrer is good enough. Such as https://yourdomain.com/*. This will allow it to only make calls on your site.

Restrict Google Maps API key

Restrict Google Maps API key

How to add Google Maps in WordPress without plugins

If you just want to embed a simple map and don't need more detailed functionality like custom location markers or other annotations, you can embed Google Maps without the plugin using the regular Google Maps website you use. Daily use.

This is how it works

Step 1: Copy the Google Maps embed code

To get started, use the Google Maps website to create the map you want to embed.

For example, if you want to embed a place marker, open it in Google Maps. Or, if you want to embed directions, open it in Google Maps.

When you have the map you want to embed, click on the hamburger menu in the top left corner:

How to access the embed code

How to access the embed code

In the list of menu items, select the option for Share or embed the map:

Open embedded options

Open embedded options

That will open a Share popup. In that popup window, click the Embed map tab.

You can then select your desired size using the drop down menu. For most WordPress sites, the default size works fine, but you can make the map bigger or smaller if needed.

Once you have done that, click the Copy HTML button to copy the embed code:

Google Maps embed code

Google Maps embed code

You will then need to add your API key to the code. So your code would look like this: