> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.spreadsimple.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Google Maps Add-on

The Google Maps Add-on will allow you to mark your listings on Google Maps and show them on the map embedded on your website.

In this help article, we will show you how you can use Google Maps add-on on your website.

## Before you start

Please note that in order to use this add-on, you need to have a project with a billing account in [Google Cloud console](https://console.cloud.google.com/) and enable the Maps JavaScript API.

If you don’t have a project or Google Cloud account yet, you can [sign up here ](https://cloud.google.com/)using your Google account, then create a new project. Please refer to [these instructions for more guidance](https://developers.google.com/maps/documentation/javascript/get-api-key). 

## Enable Google Maps add-on

In your website editor, go to the **Add-ons Tab -> Maps** and click on **Google Maps add-on** card. 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-1_1vxgkrz.png)

Then switch on the **Enable** toggle.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-2_fgq26c.png)

## Get Google Maps API

Log in to your [Google Cloud console](https://console.cloud.google.com/home/dashboard) and select the necessary project.

In your Dashboard menu, open **Google Maps Platform -> Credentials**.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-4_1snpekk.png)

There you can click on **Show key** and copy it. 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-5_d24xb5.png)

If you don’t have the API key for your project yet, please [follow the steps from this guide](https://developers.google.com/maps/documentation/javascript/get-api-key) to create one.

After that, paste your API key to the corresponding field in the add-on settings: 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-3_1aoavcv.png)

And save the changes. 

Now you can enable [Map View](https://help.spreadsimple.com/en/article/setting-up-map-view-ilfdcu/) in the Content tab and proceed with your map setup.

## Customize your Google map design

The add-on allows you to select one of the following map styles: 

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-6_vtl0j0.png)

And give your website a more customized look:

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-7_1ro1dof.png)

And you can also use Google Styles Wizard to create your custom map style: 

1. Open [Styles Wizard](https://mapstyle.withgoogle.com/) and click on **Use the legacy JSON styling wizard**.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-8_1w14jgv.png)

2. Create your own custom style and once it’s ready, click **Finish**.

3. Copy JSON.

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-10_ze2pnd.png)

And paste it to the Custom Style JSON field in the add-on settings:

![](https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/google-maps-addon-11_1o3fks1.png)

Save the changes and you're all set.