Today we’ll be looking at how to generate a Google Maps API key, which can then be used to add a map to your website. We’ll be installing this key on a Divi website, which is a theme builder, but you should be able to use any theme with an interactive map component.
Up until recently, Google Maps was fairly open and they allowed anyone to embed a customisable map on almost any website. Google however changed this in 2018 when they announced that Google Maps would no longer be “free” and would now form part of what is called Google Cloud Platform. Google Cloud Platform or GCP is essentially a set of cloud computing services and includes some really cool APIs and tools for developers.
Now I explicitly put free in quotes because it technically is still free; provided you follow some simple actions when setting up your account. Google is offering 200 credits each month when you use their cloud services, which essentially means that Google is paying for your maps usage when you stick to a certain threshold.
Because of these changes, web developers are now forced to create an account on GCP, register the maps API, create an API key for it, and restrict that key so that only your website can access it. I’m going to show you how to go about doing this.
Getting started
When you first add a map to your website in Divi you’ll likely see a “for development purposes only” message. You will always see this warning when there is no API key present when using Google Maps and you can also see this in a bit more detail by opening Chrome Dev Tools (F12). If you go to the console tab you’ll see an error message in red that tells you that you’re using Maps without an API key.
What we’re going to do is jump over to GCP and create an account. You can use any Google Account to register, just follow the prompts until you get to your dashboard.
Once you’ve registered and you’re on your dashboard, you need to create a GCP project. You can do this by clicking on Create Project to the right. Name your project something that makes sense, I’m calling mine Helio Digital as that’s the name of the site we’re using to demo the process. You can leave it on “No Organization” for now, and click on Create Project. The project creation process will run in the background and you can also check on its status by click on Select a project. This process generally only takes a few minutes and once ready should redirect you to your updated dashboard with your project information.
Enabling the APIs we need
If you open up the menu you’ll see just how many services Google actually offers as part of GCP. What we want to do is go to the API & Services sections and click on Library. Search for the “Maps API” and Select Maps JavaScript API, as this is the first API used by Divi. Once on this next page, click on Enable to activate this API on your project. This process should just take a couple of seconds and you’ll be redirected automatically to the API’s dashboard.
We now need to follow the same process for the Geocoding API. This is the second API you’ll need in order to use Maps in Divi.
Creating credentials
The next thing we need to do is set up credentials. Credentials are like a password for your API, it’s a code that’s unique to your project and allows you to access Google services. You can see under credentials tab that we don’t currently have any API keys. Click on Credentials & API Services to go to the credentials creation screen. Next, click on Create Credentials and select API Key as this is what we’ll be using for Google Map’s Servers. Don’t worry about copying this key now, we’ll grab it later.
Restricting your credentials
Now that the key has been created you’ll notice a warning from Google to restrict it. Your key is unrestricted. Restructing your key is incredibly important because the API is technically a paid for service and you don’t want other people using your key.
So what we want to do now is click on Edit, this will open up the key settings. Firstly, give your key an appropriate name so that you know what it’s for. Next, we need to select how we want to restrict it. I’m going to select http refeferrers which is essentially restricting it by a website URL. This will now open a new section where you can add website URLs. I’m going to click on Add an item and enter my website URLinto the referrer box. You can use the same pattern as they recommended to target your entire site.
Last thing you want to do is to restrict your key to the Maps and Geociding API only, as this prevents other APIs from being accidentally used, which reducses your risk of having to pay for a service unneccessarily. We’re done now and you can click on Save which should make Google’s warning disappear.
Setting Quotas
Now that we’ve created our API key we need to set quotas. Quotas are a way to add some additional restrictions to your API key and really ensure that you don’t go over the free API usage limits. I’m going to head over to my API dashboard and click on the Maps Javascript API to view more. From the API dashboard, you want to click quotes and this will open up the quotas page for the maps API. Click on Map Loads as we want to restrict how many times a user can load your map. At the bottom you can see the existing quotes and already you’ll notice that the map limit per day is set to unlimited which is a big risk if you want to use maps for free.
I’m going to edit each of these quotas to an appropriate number. Take the amount of traffic you expect to receive on your website into account when deciding on these limits. I’m making mine quite low because I don’t expect to receive many visitors, especially on my contact page. That’s it for quotas, we can now hop over to billing to complete this set up.
Wrapping up: Adding billing
Because the Google Maps API is technically no longer free they do they do unfortunately require you to add your payment details to your GCP account. You should never get charged if you properly restricted your keys and added sufficient quotas. So adding a payment method is really just a formality.
I’m going to open up the menu and click on billing. Follow the prompts if you haven’t set up billing before. If you do however see your billing dashboard like I do here then it’s a sign that you’re ready to finally use your key.
Adding the key to Divi
The last thing we want to do is add our key to your website. Most theme builders will require you to use an API key and you would follow the same process for getting an API key, but how you add it to your theme might be a little bit different.
I will be using Divi for the purposes of this demo. Divi is an excellent theme builder packed with components, a visual builder and features that designers love. I highly recommend checking it out if you haven’t, and we would appreciate your support by using our affiliate link below.
Divi by Elegant Themes
We’re a proud affiliate.
On the page containing your map, click on Enable Visual Builder to open the page editor. Next, open the settings for the Maps component you want to configure. If you click on the Map accordion or section you’ll see that my API key is currently empty. Click on Change API key and this will take you to the WordPress backend where you can enter your key under Theme Settings for Divi. Grab the key from GCP under the Credentials section and paste it into the Google API Key box. Save your changes and head back to the builder. Refresh your page and you should now be able to find locations.
And we’re done
Adding the Maps API key seems like a lot of work, but once you get the hang of the process it just becomes another part of setting up a new website. You can also follow this methodology for most websites and themes as any interactive map will ultimately require the Geocoding and Javascript Maps APIs.
I hope you found this guide useful and learned something new. Feel free to reach out to me on YouTube if you have any questions!
