Google Maps

In order to use the Contact Info widget and 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.

Start a new Project

From the Google Cloud Platform, create a New Project

1. Name your project using a unique name (note: this cannot be changed later)

2. Fill out your Organization's 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

Billing Step One

1. Select a Country that applies to your project

2. Agree to Terms of Service

3. Click Continue

Billing Step Two

In the second step, you need to verify your Contact information:

After receiving the verification code confirm it:

Billing Step Three

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)

Click the Start My Free Trial button, and you can return the project dashboard. Your billing information is now complete for this project.

Creating Credentials

From the APIs and Services > Credentials Tab, click the + Create Credentials link and select the API key:

You will now get an API key. For your protection, it is best to restrict this key from being used elsewhere:

Adding Applications

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

Adding Maps Embed API

In the search box type in Maps. You will need the Maps Embed API for the Elementor Widget. Select this in the list below and Enable.

Click the Enable Maps Embed API Button

Then search for Maps JavaScript API:

Click the Enable Maps JavaScript API Button:

This will now show in your list of available APIs and start collecting data

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.

Now we can test the obtained Google Maps API by inserting the Contact Info widget and Google Maps Widgets into the page.

Contact Info Widget

A detailed description of the widget can be found here.

Google Maps Widget

A detailed description of the widget can be found here.

Google Maps Styles

When maps are embedded using the Contact Info Widget, Google has its own default styles for the maps:

Custom styles for Google Maps can be created with the help of the Snazzy Maps service so that the appearance of the map matches the styles of the site.

To do that, let's visit the official website of the service and popular ready map styles will be offered.

By selecting one of the popular styles we can customize it to match our website styles or use it without changes:

After selecting the map style, a single page with several options will appear:

There we can copy the ready Map style by clicking "Expand code" to use in our Contact Info Widget or customize it by clicking the brush button "". Before copying we will make some changes:

Map layers are arranged hierarchically and allow you to customize elements individually. After making changes it is necessary to copy the JavaScript Style Array code to use in the Contact Info Widget style settings.

Instead of editing the ready styles, you can begin from the scratch through Create a Style menu.

On the opened window you can customize the map layers by choosing hierarchically arranged elements. The layers where settings are applied will be marked with a green dot "":

After making changes it is necessary to copy the JavaScript Style Array code to use in the Contact Info Widget style settings.

You can share the Custom Map style in the community by creating an account on Snazzy Maps.