Those of us who have been in this for a few years remember how wonderful it was to insert a Google Maps map on a website. It was copy and paste. But one fine day a concept that changed everything came into our days: the API.
In this article I am going to tell you how to register the Google Maps API, either to insert a map on your website, or to work with tools such as Advanced Custom Fields, etc.
How to register the Google Maps API
To register the Google Maps API, you must access the Google Maps developer platform. Specifically, we can directly access the Google Maps part.
Of course, for this tutorial, I assume that you have a google account, which will be necessary to authenticate on this platform, belonging to Google Cloud.
Since Google Cloud is a paid service, this means that you have to sign up for the account as a customer, even if you have a Google account.
Therefore, when you click to start, it will force you to take a step a little redundant since, first it will take you to a screen with some instructions, within which you will see a similar button to start.
If you have never registered with Google Cloud Platform, you will have a welcome modal window, in which you will be asked to approve the conditions.
Of course, you must choose the country from which you accept the service, in my case Spain, and accept the google Cloud Platform terms of service and the applicable APIs and services.
On the other hand, if you want to receive periodic news in your email about this service, you can click on the following box, but that already depends on whether you want or not.
Finally, you will have to click OK and continue.
How much does Google Maps Platfom cost?
Once this step is confirmed, you will get an informative window where you will be informed that you will receive $ 300 of free credit to invest in 90 days. This will allow you to practice with the platform for a while.
I personally worry a little about being charged based on traffic, etc., especially since Google is very given to changing prices. However, you do not have to worry too much if the use you are going to give it is the usual one, since embedding maps has zero price.
However, below I leave you a link where you can check the prices of this service, and you will see that they are not very far-fetched unless you are the owner of the Campsa Guide website and have all your infrastructure based on Google Maps maps.
In any case, in this step 2 of 3, all you have to do is add your phone number to send you an account verification code, which is that we are getting too far ahead.
Once you have added the phone number and received the code, in step 3 of 3 you will have to verify the payment information. This is where it’s time to portray yourself (well, at least potentially).
Therefore, here you will have to add your tax data and enter the type of payment. A trick: what I do is put as a payment card a prepaid card of these that banks provide you for purchases on the internet.
After adding the payment and tax data, you will have to fill out a small survey about what the reason is and register in Google Maps Platform, what sector you belong to, that you promise to behave well, that you behaved well in school …
And finally the long-awaited moment will come, Google will provide you with your API key.
As you will see, it is an alphanumeric chain of a respectable length, which you must preserve and not share out there, because it is the key for anyone to use at your expense, inviting the house.
When it offers it to you, you can enable all the Google Maps APIs for the project for which you are registering the API. This is not certain, in this case, as it is an exercise, I have done it, but in a conventional project, you should register only those APIs that you are going to use.
On the other hand, it also allows you to enable alerts to inform you of your monthly budget and if you are going over your free credit. This should be enabled yes or yes.
How to secure your Google Maps API key
A bit like a double authentication, and as Google’s are very smart, they have enabled a system of protection of your key using several methods that I show you and go on to list you.
There are 5 methods of protecting a google API:
- HTTP referrer URL (websites): it is the most common, and basically consists of that API being executed only under the URL or domain of your website. It allows wildcards, so, as you can see in the example, you can add a wildcard for subdomains and another after the bar after the domain for any URL within it. If you want, you can be more restrictive.
- IP addresses (web servers, cron jobs, etc.): With this mode you can allow the API to be called only from a specific server through the IP, such as from your VPS server. This would allow all the websites within that hosting to make calls to the API.
- Apps for Android: As you can imagine, it will allow you to make requests from a specific Android app.
- Apps for iOS: Same as the previous one, but to make requests from an iOS app.
- API restriction: With this option you can select the APIs that you can allow that API key to.
In my case, for the example I’m going to do, I’ve used the referrer URL restriction, and I’ve restricted it to the domain wpgis.com, which is my test website.
How to change the project name in Google Cloud Platform
As you can see above, on the left, you will see that My First Project appears, which I do not know about you, but to me it seems like a shit name for a project.
In case you had several projects, if you unfold that selector, you could see them all and switch between one and the other.
But now what we’re going to do is change the name of that project, so make sure you’re in that particular project (My First Project). To do this, you will have to go to the sandwich menu (the three horizontal stripes) that you have in the upper left and display this menu.
A side menu will be displayed, in which you must go to Home Page –> Panel, where you can edit the project information, in one of the cards that we see at the beginning of the screen.
That card I tell you has the following aspect, with a link at the bottom (Go to the project settings). Click on this link.
Here in the project data you can change the name to the one you want. Then click save, which is the link right next to you.
How to access the different APIs
In the side menu that comes out of the sandwich menu, you can return to the previous panel through APIs and services –> Panel, but if you want to access and manage the different APIs, click Library.
You will see something like a trellis where the different map APIs will be filtered.
In the categories on the side we can filter all the APIs for maps by clicking on Maps, where there are 17 APIs.
Remember that we had enabled all the APIs, but if you enter each of them, you will see the confirmation that the API is enabled and you can manage them and deactivate the ones you do not need.
From now on you can use any of the APIs enabled on your website.
Now you can embed a map, enter the Google Maps API Key in your favorite maps plugin, etc.