How to Set Up Google Maps Widget with Custom API?

The Google Maps widget allows the user to add customizable google maps on the page with simple drag and drop operation, but for this widget to work, we will need the Google Maps API. Let’s see how you can get that.

Google has made it mandatory to enable add the billing information such as credit card/bank account information while generating new API key.

Generating API for PowerPack’s Google Maps widget

Step 1: Go to this link which will lead you to Google Maps Platform.

Step 2: Click on the Get Started button and select Maps checkbox. Click on the Continue button.

Step 3: Select a project from the list or simply create a new project by entering the project name. Click on the Next button.

Step 4: If you don’t have a billing account, create one and enter the required details there. Select the Country, Account Type, Tax Information, Personal details, and payment information. When done, click on “Start My Free Trial” button.

Step 5: Select the website from the account opening page.

Step 6: Browse the Maps API and select the Maps JavaScript API. Enable the maps for your website then go to API Credentials and click on Create Credentials Button. Select the API key option.

Step 7: The API key will be generated. Copy this API key.

Adding the Google Maps API key to PowerPack’s Google Maps widget.

Step 1: Login to your WordPress Dashboard.

Step 2: Go to Elementor > PowerPack. Under the General tab, you can see the field for Google Map API key. Paste the API you have copied and click on the save changes button.

That’s it! You have successfully generated and added the API key to your PowerPack Maps widget. You can now start adding PowerPack’s Maps widget on your pages with the Elementor page builder.

This solution also works for the users who are facing Google Maps issue and are getting a warning message in the console : util.js:218 Google Maps JavaScript API warning: NoApiKeys