Back to contents

How to create Google Maps API key to use Advanced Map widget for Elementor

useful information

Discover information how to embed Google Maps to the site with the help of Advanced Map widget from JetElements.

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 are the API keys?

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

Step 1 — Go to Google Maps Platform and click the Get Started button.

Google Maps Platform

Step 2 — Tick Maps and click the Continue button.

Enabling Maps on Google Maps Platform

Step 3 — Enter your project’s name and click Next.

Project in Google Maps Platform

Step 4 — 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

Step 5 — 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

Step 6 – In the first step 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

Step 7 – 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

Step 8 – 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 Library.

Google APIs
library

Step 9 – In the Maps section click the View All option.

view all in Maps section

Step 10 – Open the Geocoding API block and click the Enable button.

geocoding API

Step 11 – Now go back to the API library and open the Maps JavaScript API and click the >Enable option too.

maps javascript API

Step 12 – Go to the Credentials and click the Credentials in APIs & Services.

credentials

Step 13 – Press the Create credentials button and pick the API key option from the dropdown list.
create credentials

Step 14 – You can set the restrictions by pressing on the Restrict key and adjusting the needed options.

restrictions

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

Adding an API key to Advanced Map JetElements widget

Step 1 — Log in to WordPress Dashboard and here access Elementor > JetElements Settings block on the left.

Step 2 — 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 integrations

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