Register the Google Maps API

· Por

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.

Página de inicio de Google Maps Platform
Google Maps Platform homepage

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.

Acceso desde la ayuda de Google Maps Platform
Access from Google Maps Platform Help

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.

Pantalla de aceptación de las condiciones de contrato de Google Maps Platform
Google Maps Platform contract terms acceptance screen

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.

Google Maps api pricing

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.

Verificación de contacto de Google Cloud
Google Cloud contact verification

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.

Confirmación de los datos de pago para el servicio
Confirmation of payment details for the service

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 …

Pequeña encuesta sobre nuestro objetivo en la plataforma
Small survey about our goal on the platform

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.

Obtención de la clave de la API
Getting the API key

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.

Reglas de protección de la API
API protection rules

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, which is my test website.

Protección de la API mediante URL

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.

Selección del proyecto para el que se va a aplicar la API
Selecting the project to apply the API to

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.

Botón del menú principal de Cloud Platform
Cloud Platform main menu button

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.

Acceso al panel de la API de Google Maps
Access to the Google Maps API dashboard

That card I tell you has the following aspect, with a link at the bottom (Go to the project settings). Click on this link.

Ir a la configuración del proyecto
Go to project settings

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.

Cambio del nombre del proyecto
Changing the project name

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.

Acceso a la biblioteca de la API
Accessing the API 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.

Selección de las diferentes APIs dentro de google maps
Selection of the different APIs within google maps

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.

Confirmación de que la API está habilitada
Confirm that the API is enabled

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.

Leave a Comment