Back to contents

JetElements: How to Create Google Maps API Key

useful information

From this tutorial you will learn how to embed Google Maps to the website page with the help of Advanced Map widget of JetElements plugin.

From this tutorial, you’ll learn what is an API key, for what reason there is a necessity to get it, and how to create your own Google Maps API key in order to have an opportunity to add Google Maps to your website. Find this outstanding feature within JetElements!

What is the API key?

API keys are the credentials that identify the project to which the application is making a call.

Google Maps API key is used to access Google Maps. Some applications or plugins using Google Maps require an individual token.

So if you need to use Google Maps on your site, you should go to the Google API Console and get your own key to embed a Google map.

Creating Google Map API key

Go to Google Maps Platform and click the “Get Started” button.

Google Maps Platform

Tick Maps and click the “Continue” button.

Enabling Maps on Google Maps Platform

Enter your project’s name and click “Next“.

Project in Google Maps Platform

Then you will be redirected to the billing page, but you can click the “Cancel” button in the popup window in order to create an API key for free.

Google Map Platform Billing

Now let’s open the Google Cloud console by clicking the “Console” button at the top of the page.

NOTE!
In order for this feature to work properly your Google Cloud account has to be activated. You can do that by clicking on the “Activate” button in the top right corner of the page.
console button

Choose your country and tick the checkbox in the Terms of Service section. Then, press the “Continue” button.

first step for activating Google cloud platform

In the second step select your account type “Business” and fill in the fields with your data.

second step for activating google console platform
NOTE!
Google gives the 12 months free trial for Google Cloud Platform to everyone, but only with the billing data provided from your site. Don’t worry! You won’t be charged for anything without your permission. But they have to be sure that you are not a robot.
payment method

After you passed all the billing formalities let’s label required services for the Advanced Map widget to work properly. Click the Google APIs section and go to the Library.

Google APIs
library

In the Maps section click the “View All” option.

view all in Maps section

Open the Geocoding API block and click the “Enable” button.

geocoding API

Now go back to the API library and open the Maps JavaScript API and click the “Enable” option too.

maps javascript API

Go to the Credentials and click the Credentials in APIs & Services.

credentials

Press the Create credentials button and pick the API key option from the dropdown list.

create credentials

You can set the restrictions by pressing on the “Restrict key” button and adjusting the needed options.

restrictions

Now you can copy the API key and proceed to the WP Dashboard.

Adding an API key to Advanced Map JetElements widget

Log in to WordPress Dashboard and here access JetPlugins > JetElements Settings block on the left. Open the Integrations tab and here you can see the Google Maps section, where you should paste the recently created API key in the corresponding field.

JetElements google map settings

Congrats! From now you can embed Google maps at your site using JetElements plugin!