help center

On this page

Google Maps integration

Last Update: August 17, 2023

In order to use the Google Maps Widget, you must first create an API key. You also need a project with a billing account and the Maps Embed API enabled. Once completed, navigate to Elementor > Settings > Integrations and enter the key. To learn more, see this article in Google Set up Cloud Console.

Table Of Contents

Start a new Project

From the Google Cloud Platform, create a New Project

New Project API Google Maps integration 1
  1. Name your project using a unique name (note: this cannot be changed later)
  2. Fill out your Organization name
  3. Enter the Location of your project

Billing Information

We will now need to set up billing information for your project. You may do this from the Left Panel > Billing

MapsAPI2 Google Maps integration 3

Billing Step One

Billing One Google Maps integration 5
  1. Select a Country that applies to your project
  2. Agree to Terms of Service
  3. Click Continue

Billing Step Two

Billing Two Google Maps integration 7
  1. Select an Account type
  2. Enter a Business Name
  3. Select a Payment method
  4. Enter your Payment information as chosen above (example: credit card)
    Payment Info Google Maps integration 9
  5. Click the Start My Free Trial button

Return To Dashboard

Your billing information is now complete for this project.

Creating Credentials

  1. From the APIs and Services > Credentials Tab, click the + Create Credentials link and select API keyMapsAPI8 Google Maps integration 11
  2. You will now get an API key. For your protection, it is best to restrict this key from being used elsewhere
    Key Created Google Maps integration 13

Adding Applications

We can now associate applications to be used with your key. From the APIs and Services dashboard click library

image 43 Google Maps integration 15

Adding Maps Embed API

  1. In the search box type in Maps. You will need the Maps Embed API for the Elementor Widget. Select this in the list below
    LibraryMapsAPI Google Maps integration 17
  2. Click the Enable Maps JavaScript API Button
    image 35 Google Maps integration 19
  3. This will now show in your list of available APIs and start collecting data
    MapsAPI13 Google Maps integration 21

Add Your API Key to Elementor

You may now navigate to Elementor > Settings > Integrations and place the key in order to use the Maps Widget. 

image 42 Google Maps integration 23

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article