# Google Maps
In order to use the [Contact Info widget](/companion-theme-documentation/companion-widgets/contact-info.md) and [Google Maps Widget](https://elementor.com/help/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](https://developers.google.com/maps/documentation/embed/get-api-key).
### 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](/companion-theme-documentation/companion-widgets/contact-info.md) and [Google Maps Widget](https://elementor.com/help/google-maps-widget/)s into the page.
### Contact Info Widget
{% hint style="info" %}
A detailed description of the widget can be found [here](/companion-theme-documentation/companion-widgets/contact-info.md).
{% endhint %}
### Google Maps Widget
{% hint style="info" %}
A detailed description of the widget can be found [here](https://elementor.com/help/google-maps-widget/).
{% endhint %}
### Google Maps Styles
When maps are embedded using the [Contact Info Widget](/companion-theme-documentation/companion-widgets/contact-info.md), Google has its own default styles for the maps:
{% hint style="success" %}
Custom styles for Google Maps can be created with the help of the [Snazzy Maps service](https://snazzymaps.com/) so that the appearance of the map matches the styles of the site.
{% endhint %}
To do that, let's visit the [official website of the service](https://snazzymaps.com/) 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](/companion-theme-documentation/companion-widgets/contact-info.md) 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](/companion-theme-documentation/companion-widgets/contact-info.md) 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](/companion-theme-documentation/companion-widgets/contact-info.md) style settings.
{% hint style="success" %}
You can share the Custom Map style in the community by [creating an account](https://snazzymaps.com/account/register) on Snazzy Maps.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.stylemixthemes.com/companion-theme-documentation/integrations/google-maps.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.