Those of us who have been doing this for a few years remember how wonderful it was to embed a Google Maps map on a website. It was copy and paste. But one fine day a concept entered our days that changed everything: the API.
In this article I’m going to tell you how to sign up the Google Maps API, either to insert a map on your website, or to work with tools like Advanced Custom Fields, etc.
How to sign up for the Google Maps API
To sign up for the Google Maps API, you need to access the Google Maps developer platform. Specifically, we can directly access the Google Maps part.
Of course, for this tutorial, I’m assuming you have a google account, which will be required to authenticate to this platform, which belongs to Google Cloud.
Since Google Cloud is a paid service, this means that you have to sign up for your account as a customer, even if you have a Google account.
Therefore, when you click to start, it will force you to take a slightly redundant step since it will first take you to a screen with instructions, within which you will see a similar button to start.
If you’ve never signed up for Google Cloud Platform, you’ll see a welcome modal window, where you’ll be asked to approve the terms.
Of course, you must choose the country from which you accept the service, in my case Spain, and agree to the terms of service of Google Cloud Platform and the applicable APIs and services.
On the other hand, if you want to receive regular news in your inbox about this service, you can click on the following box, but that depends on whether you want to or not.
Finally, you’ll need to click OK and continue.
How much does Google Maps Platform cost?
Once this step is confirmed, you will be presented with an information window informing you that you will receive $300 in free credit to invest in 90 days. This is going to allow you to practice with the platform for a while.
Personally, I’m a little worried about being charged based on traffic, etc., especially since Google is very fond of changing prices. However, you don’t have to worry too much if you’re going to use it as usual, since embedding maps has zero price.
However, here is 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 2 of 3 step, all you have to do is add your phone number to be sent an account verification code, which is that we are getting too far ahead of ourselves.
Once you’ve added your phone number and received your code, you’ll need to verify your payment information in step 3 of 3. This is where it’s time to portray yourself (well, at least potentially).
Therefore, here you will need to add your tax details and enter the type of payment. A trick: what I do is put as a payment card one of those prepaid cards that banks provide you with for online purchases.
After adding the payment and tax data, you will have to fill out a small survey about what is the reason for registering on Google Maps Platform, what sector you belong to, that you promise to behave well, that you behaved well at school…
And finally the long-awaited moment will arrive, Google will provide you with your API key.
As you will see, it is an alphanumeric chain of a respectable length, which you should preserve and not share out there, because it is the key that anyone can use at your expense, inviting the house.
When offered, you can enable all Google Maps APIs for the project you’re signing up the API for. 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 no matter what.
How to secure your Google Maps API key
A bit as if it were a two-factor authentication, and since Google is very smart, they have enabled a system to protect your key using several methods that I show you and I will now list you.
There are 5 methods of securing a Google API:
- HTTP referrer URLs (websites): this is the most common, and basically consists of that API running 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 slash after the domain for any URL within the domain. 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 via the IP, such as from your VPS server. This would allow all websites within that hosting to make API calls.
- Apps for Android: As you can imagine, it will allow you to make requests from a specific Android app.
- Apps for iOS: Same as above, but to make requests from an iOS app.
- API Restriction: With this option, you will be able to select the APIs that can be allowed by that API key.
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 wpgis.com domain, which is my test site.
How to change your project name in Google Cloud Platform
As you can see above, on the left, you’ll see that My First Project appears, which I don’t know about, but I think it’s a shitty name for a project.
If you had multiple projects, if you display that selector, you could see them all and switch between them.
But now what we’re going to do is we’re going to change the name of that project, so make sure you’re in that particular project (My First Project). To do this, you’ll need to go to the sandwich menu (the three horizontal stripes) at the top left and pull down the 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 mentioned looks like this, with a link at the bottom (Go to project settings). Click on this link.
Here in the project data you can change the name to whatever you want. Then click save, which is the link right next to it.
How to access the different APIs
In the side menu that comes out of the sandwich menu, you can return to the previous dashboard via API & Services –> Dashboard, but if you want to access and manage the different APIs, click Library.
You’ll see something like a trellis where you’ll see filtered out the different map APIs.
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 go into each of them, you will see confirmation that the API is enabled and you will be able to manage them and deactivate the ones you don’t need.
From now on you can use any of the APIs enabled on your website.
You can now embed a map, insert the Google Maps API Key into your favorite map plugin, and more.