# How to use the map widget

> Add a working Google Maps widget to your ProSite website by generating a Google Maps API key and entering it in the builder.

Source: https://www.kualo.com/knowledgebase/prosite-widgets/how-to-use-the-map-widget
Updated: 2026-06-09

---

To display a map on your ProSite website, you need a Google Maps API key. Google requires billing to be enabled on your Google Cloud account before you can generate one.

## What you need before you start

- A Google account
- A debit or credit card to enable billing on Google Cloud

## Step 1 - Set up Google Cloud billing

1. Go to [https://console.cloud.google.com/billing](https://console.cloud.google.com/billing).
2. Click **Add billing account**.

   ![Google Cloud billing page showing the Add billing account button](https://kb-cdn.kualo.com/be/b3/beb3b7a5b2bd2093d69058a0966fba8a064561ed.png)

3. Fill in your details and complete the setup.

## Step 2 - Enable the Maps JavaScript API

1. Go to [https://console.cloud.google.com/marketplace/details/google/maps-backend.googleapis.com](https://console.cloud.google.com/marketplace/details/google/maps-backend.googleapis.com).
2. Select an existing project or create a new one.
3. Click **Enable** to activate the Maps JavaScript API for your project.

   ![Google Cloud Marketplace page for the Maps JavaScript API](https://kb-cdn.kualo.com/7c/da/7cda9ed0db2449519558255007222397f10053cb.png)

## Step 3 - Create an API key

1. Go to [https://console.cloud.google.com/apis/credentials](https://console.cloud.google.com/apis/credentials).
2. Click **Create credentials**, then select **API key**.
3. Your new API key will appear in a dialog. Click **Close**.
4. The key is now listed on the Credentials page under **API keys**.
5. Copy the key.

   ![Google Cloud Credentials page showing a newly created API key](https://kb-cdn.kualo.com/8f/1e/8f1e0b8a98cecbf85b6d5702a5bc3652c5ce7769.png)

:::warning
Restrict your API key before using it on a live website. Unrestricted keys can be misused if exposed. You can set restrictions on the Credentials page in Google Cloud Console.
:::

## Step 4 - Add the API key in ProSite

1. Open your website in the ProSite builder.
2. Click on your map widget.
3. In the settings panel on the right, paste your API key into the API key field.

   ![ProSite builder showing the API key field in the map widget settings](https://kb-cdn.kualo.com/cc/5d/cc5d778817b2a4bb403b4f53b39d0a5c6cd373a1.png)

4. Use the additional configuration options to adjust the map's appearance and behaviour to suit your page layout.

   ![ProSite map widget configuration options panel](https://kb-cdn.kualo.com/bc/27/bc27c3e91c864414873d45deaf82cafdd7c0043c.jpg)


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/prosite-widgets/how-to-use-the-map-widget · © Kualo Ltd._