Inserting a map on WordPress is a fundamental operation if you have a shop, a company, a professional studio. This way, your potential customers will always know where to find you. To implement a Google map on WordPress you have several alternatives . In this article we will examine them all, starting from the fundamental operation, without which it is not possible to view your Google map on the site, that is: the activation of an API key.
As always, I invite you to read the whole article and leave a comment for any curiosity, request, criticism.
The new Google Maps API Key: what it is and how to get it
If you try to insert a map on your site without the Google Maps API key, you will be shown such a screen, the error MissingKeyMapError :
The rules changed a few years ago, when Google made it mandatory to use API keys for maps. Let’s take a step back. What does API mean? It is an acronym that stands for Application Programming Interface . These are programming interfaces made available by the companies that make apps and software to allow developers to expand their functionality.
In the case of Google Maps, the APIs are used to create customized maps, create georeferenced search services, develop particular mobile applications, etc.
The Google Maps API Key is free for 99% of users , i.e. for basic functionality. Take a look at the table below to understand what I’m talking about:
As Google itself explains, since the prices of services depend on consumption, you only pay for the actual use. Each user has a $ 200 credit on their account which offsets the usage costs. It is possible to check the current use of the API through the Google Cloud Platform console and estimate the monthly costs with the price and use matrix.
Yeah, but what is the Google Cloud Platform, and how do you create an API key? Keep reading!
How to get a Google Maps API Key
Here are the steps you need to follow to generate your Google Maps API key and insert your map in WordPress!
- Create an account on Google Cloud Platform (or, if you already have one, log in).
- Create a project or select an existing one.
- Set up your billing account . This involves inserting a credit card. You will only be charged if the key usage exceeds Google’s $ 200 monthly credit (which is still a high limit).
- Go to Api and Services> Enable api and services , you will access the Google api library. From the Maps block click on “View all”.
- Choose the type of API that interests you. If you need to embed (insert) the map WITHOUT the use of a plugin, i.e. directly, then choose Maps Embed API . If you will be using a plugin, choose Maps Static API .
- Once you have chosen the type of API, click on “Enable”.
- From the API menu, select the API you have enabled and click on “Credentials” . You will find your API key this way.
- It is important to apply a restriction to your API key , to ensure that it is used only and exclusively on your site. Still in the “Credentials” section, click on the pencil symbol next to the chosen API and set an “HTTP Referrer”, adding, in the field immediately below, the domain on which the API key will be valid.
And now that we have our API key, let’s see how to insert a map in WordPress. There are two possibilities: with or without a plugin. Here they are both!
Insert Google Maps in WordPress without plugins
It is possible to insert a Google map on a WordPress site without using any plugins . Let’s see how.
First, you need to go to https://www.google.it/maps and search for the place that interests us. For example: Marco Loprete – Website development. Here is the screen that Google will show:
At the top left, click on the hamburger menu icon and select “Share or embed map” . From the pop-up that opened, click on “Embed a map”. You will then have access to the screen with the code to copy :
Establish the size of the map (small, medium, large, custom size) by acting on the relative drop-down menu. Then click on “Copy HTML” to copy the code.
At this point, log in to your WordPress control panel, open (or create) the page on which you want to insert the map. If you are using the classic editor , in the text entry field click on the “Text” tab and paste the code:
If you are using the new Gutemberg block editor, select the “Custom HTML” block and paste the code there.
At this point, you will need to add your API Key in the site code. The snippet you will need to enter looks like this:
<iframe src = “https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY¶meters allowfullscreen> </iframe>
Some themes offer, among their options, an empty field to be filled directly with the API Key. This way you will avoid getting your hands on the code.
Google MyMaps
Google MyMaps is a free service from Google that allows you to customize maps by adding multiple locations, annotations, routes, etc. You can access from here: https://www.google.com/intl/it/maps/about/mymaps/ and, by clicking on “+ CREATE NEW MAP”, create your personalized map .
When you are done, you can share it on your WordPress site by clicking on the “Share” button. In the popup that opens, you will need to click on “Change…” and “Active – Public on the web”, then on “Finish”. Click on the three vertical dots (top left) and go to “Embed on my site”. In this way you will get the code to embed according to the procedure we saw earlier.
Insert Google Maps on WordPress with a plugin
There are many WordPress plugins for Google Maps which can help you insert the map on your site. Let’s see some of the most important ones!
WP Google Maps
WP Google Maps is the most downloaded plugin from the official marketplace for inserting maps (400,000 downloads).
It allows you to add Google maps to WordPress posts and pages quickly and easily thanks to a shortcode. It is perfect for contact page maps, routes, maps showing delivery areas and any other use you can think of.
Here are some of the basic functions:
- 9 map themes to choose from
- Create or add your own map theme
- Drag the markers to the exact position
- Add a map block to your page
- Google Maps Streetview supported
- UTF-8 character support
- Widget functionality
- Full screen map functionality
- Localization support
- Choose from four types of Google maps: road, terrain, satellite and hybrid
- Define the height, width and zoom level for each map
- Add animations to your marker
There is also a paid Pro version of the plugin, which allows you to create customized Google maps with high-quality markers containing locations, descriptions, images, categories, links and directions and much more.
Maps Widget for Google Maps – Google Maps Builder
Maps Widget for Google Maps allows you to embed maps using the Google Maps Static API . This means that the map will load in a single request instead of the 20+ requests of the other plugins. Which, of course, guarantees a certain speed of loading of the site . It basically means that a static image will be loaded instead of an interactive map. The interactive map will open for a popup effect (check out the demos here ).
Among the options that you can set with this plugin:
- Custom map size
- Choice between different types of Google maps (road map, satellite map, terrain map, hybrid map, or, in the PRO version of the plugin, a custom image to save the monthly API budget)
- Lots of color combinations
- Zoom level
- Pin type (image, color, size, label. In the pro version, over 1500 pin types)
- Type of link (lightbox map, custom URL, or, in the PRO version, interactive map)
- Text above and below the map
And more. Maps Widget for Google Maps is a lightweight and easy to use plugin. The Google Maps API Key is inserted in the plugin settings.
Google Maps Easy
Google Maps Easy is ideal if you are looking for a plugin that customizes Google maps with your markers and annotations. In particular, with this plugin you can:
- insert unlimited maps and markers
- insert text, images, video, email, telephone in the marker description
- customize all aspects of the map
- choose from a variety of themes
- insert social sharing buttons
- insert tab and slider
- draw figures and paths on the map
Gutenberg Block For Google Maps Embed By Pantheon
If your WordPress site uses Gutemberg , you can use this plugin to insert the map (unless you have installed a plugin like Ultimate Addons for Gutenberg , which contains a specific block for maps).
With this plugin you can:
- choose the size of the map
- choose the zoom level
- choose whether to show a static image or the interactive map
- choose the type of map to show (Open Street Map, Google Maps, Bing, Mapbox)
- show the map with the use of a shortcode
Google maps and site performance
Interactive maps can slow down the performance of a website. There are two possibilities to avoid the risk.
First, instead of inserting the interactive map, you can take a screenshot of the map with your studio / business / office, insert it on the site and link the image to the complete map. It is, in some respects, the thing that a plugin like Maps Widget for Google Maps, which I told you about above, does.
Second, you can use a lazy loading plugin to optimize map loading. In this way, the map will not be loaded immediately, at the opening of the page , but when the user, scrolling it, reaches it.
Plugins that allow for this deferred loading of iframes are a3 Lazy Load or Lazy Load by WP Rocket . I recommend you try them out and see which one fits your site best!
