Many people need to embed a Google Maps item on a WordPress site.It may be for a specific event, or to enhance an organization or business website.
Of course, there are many other possible reasons for doing so. Learn how to do it below.
Those are only the technical aspects. Deciding things like layout and what type of map to use is a different story.
Some may feel it is too difficult, so they take a screenshot and use the picture. However, this does not look very professional.
Google Maps offers many features that are free and easy to use and they will make a website look more polished.
This article shows how to do it and how to make use of the Google Maps API key. The use of API keys is a prerequisite now.
Why Add Google Maps to WordPress
To attract people to a business or a location, providing the address is essential. With the address, people can find their way to the business.
But by adding a map, visitors will get a better idea of where to go. They can see where the street is, what other landmarks are nearby, and how to get there.
To help potential customers, taking a screenshot might do. It does give certain information.
But that is not as nice as using one of the free Google Maps features. These are some ways in which using a Google Map is superior:
- Because the user can move the map around and zoom in or out, they get a better idea of the location.
- Highlight any location. Even multiple locations are possible.
- Google Maps has the Street View options. So, people can see beforehand what the place looks like.
- Users can take the location and share it with a mobile device. This allows them to use GPS when traveling to a destination they are not familiar with.
Google Maps API: Now a Requirement
To be able to use the Google Maps features, it is necessary to create a Google Cloud account.For users to access certain functions, the Cloud console needs to generate an API key.
In this way, Google knows when the website with the map is used and which billing profile it’s connected to.
The API key requirement became effective as of June 11, 2018.
This might explain why a Google Maps that worked in the past, now no longer works. Linking to a Google Cloud account may solve the problem.
Although the Cloud account links to billing information details, the use of Google Maps is free for most users. This is according to the Google Maps API pricing site.
It appears that no other changes occurred. So, to continue using these features, check the following:
- Update the cloud account with valid billing information. This is a requirement, but it does not mean that the service is no longer free.
- Update the embedded Google Map code or plugin settings with the API key.
How to Create a Google Maps API Key
What is an API key? It is a unique identifier that links a request with a project.
Its main purpose is identification and billing. There should be at least one API connected with any one project.
The first step is to enable the relevant API Libraries. There are many different Google Maps APIs.
These are the most important ones:
- Google Places API Web Service (Essential)
- Google Maps Directions API
- Google Maps Distance Matrix API
- Google Maps Elevation API
- Google Maps Geocoding API
- Google Maps Geolocation API
- Google Maps Time Zone API
To enable them, go to the Google Maps API Libraries page. There are two libraries: ones that are currently enabled and those that are disabled.
At the top left corner select the relevant project. Now, enable all the necessary libraries.
Select them and click the Enable button. While here, disable the libraries that are not needed.
Choosing the right libraries depends on the features used in the Events Manager. Here is a list of the libraries that may be necessary:
- Places API for Web
- Geocoding API. This library is necessary when using search forms with a geolocation option.
- Maps Embed API. This must be enabled when using embedded maps or as a click action for a static map.
- Maps Static API. Select this one for using static maps.
Setting Up a Google Maps API Key
The instructions on Google’s own website are not very clear. They are especially confusing for someone without developing skills.
Here is a step-by-step guide that makes the process clearer:
- Navigate to the Google Cloud Platform’s Credentials page.
- Select the project for which the libraries were set up.
- To create the API key, click the Create Credentials button.
- Select API Key. Next, the website will say that an API key was created and it will show the new key in a confirmation window.
- Select Restrict Key.
- If there is an API key already in the list, select it.
- Change the Key Name to something recognizable and memorable. For example, “Events Manager Browser Key”.
- Copy the API key.
Now it is time to turn to the WordPress Dashboard.
- Click Maps
- Click Settings
- Go to Advanced
- Paste the API key in the Google Maps API Key box.
- Click the Save Settings button.
To avoid the API key showing in plain text on the website, follow the next steps.These steps are important because otherwise, people can copy the key.
This would allow them to use it for their website and consume the free uses.
Click the name of the API key to add restrictions. The easiest way to fix the issue is by adding an HTTP referrer, like https://yourdomain.com/*.
In this way, calls can only be made on this assigned website. The format of the restriction is very specific, so please use the format above.
Finally, click the Save button to keep the restrictions.
Restricting access to the API key
As mentioned, Google uses API keysfor billing purposes. So, they have set a limit on the number of free API requests that it can authorize per day.
This is important to monitor, especially for busy websites. There are ways to limit the number of API requests.
One way is to restrict the API key’s functionality and limit their use to white-listed domain names.
The Google website has some security tips to prevent unauthorized use of API keys. Please have a look at them if this is necessary.
We also wrote about a few related subjects like how to measure distance on Google Maps, how to drop a pin in Google Maps, what is a vector map, interactive maps, the choropleth map and how to make one, thematic map examples, how to find elevation on Google Maps and statistical maps.
I take it you like maps as well so make sure to check out MapSVG, a great WordPress maps plugin you should check out.