From this tutorial, you will learn how to create a Google Maps API key and use it to add the Advanced Map widget of the JetElements plugin to your WordPress website.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetElements plugin installed and activated
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 Maps Platform and get your key to embed a Google map.
In this guide, we will look through the API key creation process and adding an Advanced Map widget from JetElements to your WordPress website.
Create a Google Map API Key
Go to Google Cloud Console and click the “Get started for free” button.
You will be redirected to Step 1 of 2 of account registration. Choose your Google account and your Country. Afterward, hit the “Agree & continue” button.
The Step 2 of 2 page will be the billing page. Fill in all the required fields and remember to include the ZIP code.
You will also have to put in your card data in the Payment method section. Afterward, click the “Start free” button.
You will be asked to answer two more questions in a short survey, so Google Maps can serve you better. Once you have answered, click the “Next” button.
Type in the “Google Maps Platform” request in the search bar.
The API key is now generated. Copy it and click the “Go to Google Maps Platform” button.
Now, go to the APIs & Services. Find the “Geocoding API” service and make sure it is activated.
Activate the “Maps JavaScript API” service the same way.
Add an API Key to the JetElements Settings
Log in to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetElements settings.
Open the Integrations tab. Here you can see the Google Maps section, where you should paste the recently created API key in the Google Map API Key field.
You can also activate the Disable Google Maps API JS file toggle if it is already included by another plugin or theme.
Build a Page with an Advanced Map Widget
Head to the Elementor editor of the page where you want to place the map.
Add an Advanced Map widget to the page.
Select the Map center type and set the desired Map Center Address. For instance, we leave the default “London Eye” location.
Work on other widget settings and customize the page additionally according to your preferences.
When you’re ready, press the “Publish” button.
Check the Result
Open the just-edited page on the front end. Here, you can now observe the Advanced Map widget with the location you have selected as the Map Center Address.
That’s all; now you know how to embed Google Maps on your WordPress site using the JetElements plugin.
