> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect your app to Google Maps Platform

> Connect Google Maps Platform to your Lovable app to geocode addresses, calculate routes, search places, embed interactive maps, and pull location-aware data like weather, air quality, and solar potential, using a managed connection or your own API keys.

export const connector_0 = "Google Maps Platform"

[Google Maps Platform](https://mapsplatform.google.com/) is Google's suite of location APIs and SDKs for geocoding, routing, places, and interactive maps. The Google Maps Platform app connector lets your Lovable app call server-side APIs through Lovable's secure gateway, and renders interactive maps in the browser with a separate referrer-restricted key. Both keys are managed at the workspace level, so any project you link to the connection can use them.

With Google Maps Platform connected, your app can:

* Geocode addresses and reverse-geocode coordinates
* Calculate routes and travel times with the Routes API
* Search for and retrieve details about places and businesses with the Places API (New)
* Embed interactive and static maps
* Validate addresses and snap GPS traces to roads
* Pull environmental data (Weather, Air Quality, Pollen, and Solar) for any location
* Use Aerial View, Geolocation, Elevation, Time Zone, Route Optimization, and Area Insights

Google Maps Platform is a good fit when your app needs location, mapping, navigation, or place data, whether in the backend (server-side calls) or in the frontend (embedded maps in the browser).

## Common use cases and example apps

| Example app                  | Example prompt                                                                                                                                         | Description                                                                                                                                                                       |
| :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Property listings**        | *Build a property listing app where users browse homes on a map, filter by neighborhood, and see commute times from each listing to a chosen address.* | **Map-driven discovery with travel times.**<br />The app uses embedded maps for browsing, geocoding to place pins, and the Routes API to estimate commutes from each listing.     |
| **Local business directory** | *Build a directory app where users search nearby restaurants, view details, and see opening hours and reviews on a map.*                               | **Place search and discovery.**<br />The app uses Places Autocomplete in the search bar and the Places API to fetch place details, ratings, and hours.                            |
| **Delivery dispatch tool**   | *Build an internal tool that plans delivery routes for drivers, optimizes stop order, and shows estimated arrival times.*                              | **Routing and ETAs for operations.**<br />The app calls the Routes API server-side to compute optimized routes and renders them on an embedded map.                               |
| **Field service scheduling** | *Build a scheduling app where dispatchers assign jobs to technicians based on location and see travel times between appointments.*                     | **Location-aware scheduling.**<br />The app geocodes job addresses and uses the Routes API to compute travel times between back-to-back appointments.                             |
| **Store locator**            | *Build a store locator page that shows my retail locations on a map, with filters for services offered and an address search.*                         | **Public-facing map with search.**<br />The app uses Places Autocomplete to capture user addresses, geocoding to center the map, and an interactive map to display nearby stores. |
| **Travel itinerary planner** | *Build a trip planner where users add stops, see them on a map, and view driving distance and time between each leg.*                                  | **Multi-stop itineraries.**<br />The app uses Places Autocomplete to add stops, the Routes API for legs and distances, and embedded maps for visualization.                       |

Exact behavior depends on **the Google Maps Platform APIs you enable**, **how you restrict each key**, and **what you ask Lovable to build**.

## How Google Maps Platform connections work

Google Maps Platform uses a two-key model because some APIs run on the server and others in the browser:

* **Server API key**: private, restricted by API. Used by Lovable's connector gateway to call server-side APIs like Geocoding, Routes, Places, Weather, and Air Quality. Never exposed to the browser. The gateway also attaches a per-workspace tracking ID for usage attribution.
* **Browser API key**: public, restricted by website referrer. Marked as **Public** in the connection form and injected into your project as a public environment variable named `VITE_LOVABLE_CONNECTOR_GOOGLE_MAPS_BROWSER_KEY`. Used by the frontend for the Maps JavaScript API and Places Autocomplete.

Within your Lovable workspace, you can create multiple Google Maps Platform connections.

Server-side calls always go through Lovable's connector gateway; see [Gateway-based connectors](/integrations/introduction#gateway-based-connectors) for limits and behavior. The browser key is only authorized for the Maps JavaScript API and Places API (New). Do not call Geocoding, Routes, or any other server-side API directly from the browser, those requests will fail with `REQUEST_DENIED`. Use the gateway instead.

<Note>
  Google Maps Platform usage is billed by Google Cloud directly to your billing account based on API calls and map loads. Lovable does not bill you for Google Maps Platform usage when you bring your own keys. Google Maps Platform includes a recurring monthly free tier, see [Google Maps Platform pricing](https://mapsplatform.google.com/pricing/) for current details.
</Note>

## How to connect Google Maps Platform

Workspace **admins** and **owners** can connect Google Maps Platform. When adding a connection, you can choose between:

* **Managed by Lovable**: no Google Cloud account or API keys required. Only works on `*.lovable.app` domains.
* **Your own credentials**: bring your own server and browser API keys. Required for custom domains and recommended for production.

When the connection is created, Google Maps Platform becomes available to the projects you link it to.

Follow the setup steps below based on how you want to connect Google Maps Platform.

### Managed by Lovable

Choose this option for the fastest setup, ideal for prototyping. You don't need a Google Cloud account or API keys. Lovable provides and manages the credentials for you.

<Warning>
  The managed connection only works on `*.lovable.app` preview domains. Maps will not load if your project uses a custom domain. To use Google Maps Platform on a custom domain, switch to **Your own credentials** and add your custom domain to your browser key's referrer restrictions. Lovable will also show a warning in the connection details and on the Publish dialog if it detects a managed connection on a project with a custom domain.
</Warning>

To connect Google Maps Platform:

<Steps>
  <Step title="Open the connector">
    Open **Connectors** → **App connectors** and select **Google Maps Platform**.
  </Step>

  <Step title="Add a connection">
    Click **Add connection**.
  </Step>

  <Step title="Name the connection">
    In **Display name**, enter a name, for example `Google Maps Platform Managed`. This name is only used in Lovable to identify the connection.
  </Step>

  <Step title="Choose managed credentials">
    Select **Managed by Lovable**.
  </Step>

  <Step title="Set access">
    Under **Who can access this connection**, keep access limited to yourself, invite the entire workspace, or restrict to specific people. See [Who can manage connections](/integrations/introduction#who-can-manage-connections) for more information.
  </Step>

  <Step title="Connect">
    Click **Connect**.
  </Step>
</Steps>

When connected, your Lovable apps can use Google Maps Platform for geocoding, routes, places, and embedded maps on `*.lovable.app` domains.

### Your own credentials

Bring your own credentials when you need a custom domain, want to manage Google Cloud billing directly, or want full control over which APIs are enabled and how each key is restricted.

You can create multiple Google Maps Platform connections using different keys, which is useful for separating environments or attaching different Google Cloud billing accounts.

<Note>
  All Google Maps Platform usage is billed by Google Cloud to your billing account, not by Lovable.
</Note>

#### Prerequisites

Before connecting, make sure you have:

* A Google Cloud project with billing enabled
* The Google Maps Platform APIs you plan to use enabled in that project (see Step 1)
* Permission to create and manage API keys in that project
* Your project's domains, including its `*.lovable.app` URL and any custom domains
* Lovable workspace admin or owner role

#### Step 1: Enable the Google Maps Platform APIs you need

In the [Google Cloud Console](https://console.cloud.google.com/), enable only the APIs your app uses.

For the **browser key**, enable the frontend APIs:

* Maps JavaScript API
* Places API (New)

Optionally, if you want server-rendered map images or map embeds, also enable:

* Maps Static API
* Maps Embed API

For the **server key** (called through Lovable's gateway), enable the APIs your app uses:

* Geocoding API
* Routes API
* Places API (New)
* Address Validation API
* Aerial View API
* Air Quality API
* Geolocation API
* Maps Elevation API
* Maps Platform Datasets API
* Places Aggregate API (Area Insights)
* Pollen API
* Roads API
* Route Optimization API
* Solar API
* Time Zone API
* Weather API

<Note>
  Google has deprecated the legacy Directions API, Distance Matrix API, and the original Places API. Use the Routes API and Places API (New) instead.
</Note>

#### Step 2: Create the server API key

The server key is called by Lovable's connector gateway. Restrict it by API, not by referrer or IP.

<Steps>
  <Step title="Open credentials">
    Open the [Google Cloud Console credentials page](https://console.cloud.google.com/apis/credentials) and select your project.
  </Step>

  <Step title="Create the key">
    Click **Create credentials** → **API key**.
  </Step>

  <Step title="Name the key">
    Give it a descriptive name, for example, `Lovable Google Maps Platform server key`.
  </Step>

  <Step title="Edit the key">
    Click **Edit API key**.
  </Step>

  <Step title="Restrict by API">
    Under **API restrictions**, select **Restrict key** and enable only the server-side APIs from Step 1 that your app uses.
  </Step>

  <Step title="Leave application restrictions off">
    Under **Application restrictions**, leave **None** selected. Lovable's gateway IPs are not published, so adding an IP allowlist will break requests.
  </Step>

  <Step title="Save and copy">
    Save and copy the key. It starts with `AIza` and is 39 characters long.
  </Step>
</Steps>

<Tip>
  Restrict the server key to only the APIs you actually call. This limits the impact if the key is ever leaked.
</Tip>

#### Step 3: Create the browser API key

The browser key is referrer-restricted and exposed to the frontend as a public environment variable. In the Lovable connection form, this field is marked **Public** with the caption "This value will be publicly visible in your published app."

<Steps>
  <Step title="Create the key">
    On the same credentials page, click **Create credentials** → **API key**.
  </Step>

  <Step title="Name the key">
    Give it a descriptive name, for example, `Lovable Google Maps Platform browser key`.
  </Step>

  <Step title="Edit the key">
    Click **Edit API key**.
  </Step>

  <Step title="Restrict by website referrer">
    Under **Application restrictions**, select **Websites** and add every domain your app is served on, for example:

    * `https://your-project.lovable.app/*`
    * `https://yourdomain.com/*` and `https://www.yourdomain.com/*` (any custom domains)
  </Step>

  <Step title="Restrict by API">
    Under **API restrictions**, select **Restrict key** and enable only **Maps JavaScript API** and **Places API (New)**. The browser key is not authorized for Geocoding, Routes, or other server-side APIs.
  </Step>

  <Step title="Save and copy">
    Save and copy the key.
  </Step>
</Steps>

<Warning>
  The browser key is public by design and will appear in your app's frontend code. The website-referrer restriction is what prevents other sites from reusing it, always set it before going to production.
</Warning>

For more on locking down keys, see [Google's API security best practices](https://developers.google.com/maps/api-security-best-practices).

#### Step 4: Connect Google Maps Platform to Lovable

<Steps>
  <Step title="Open the connector">
    Open **Connectors** → **App connectors** and select **Google Maps Platform**.
  </Step>

  <Step title="Add a connection">
    Click **Add connection**.
  </Step>

  <Step title="Name the connection">
    In **Display name**, enter a name, for example, `Google Maps Platform Prod`.
  </Step>

  <Step title="Choose your own credentials">
    Select **Your own credentials**.
  </Step>

  <Step title="Add the server key">
    Paste the key from Step 2 into **Server API Key** ("Server-restricted API key for backend use (geocoding, directions, places)").
  </Step>

  <Step title="Add the browser key">
    Paste the key from Step 3 into **Browser API Key** ("Referrer-restricted API key for the Maps JavaScript API (embedded maps, autocomplete)").
  </Step>

  <Step title="Set access">
    Under **Who can access this connection**, keep access limited to yourself, invite the entire workspace, or restrict to specific people.
  </Step>

  <Step title="Connect">
    Click **Connect**.
  </Step>
</Steps>

When connected, server-side calls are routed through Lovable's gateway using the server key, and the browser key is available to your frontend as `VITE_LOVABLE_CONNECTOR_GOOGLE_MAPS_BROWSER_KEY`. The connection form validates the key format (it must match `AIza` followed by 35 alphanumeric characters) but does not verify that the keys actually work against Google's APIs. Always test one backend request and one frontend map load after setup.

## Limitations

The Google Maps Platform connector has the following limitations:

* The **managed connection** only works on `*.lovable.app` domains. Use your own credentials for custom domains.
* The **browser key** is only authorized for the Maps JavaScript API and Places API (New). All other Google Maps Platform APIs must be called from the server through Lovable's gateway.
* **Billing and quotas** are managed in Google Cloud, not Lovable. Set budget alerts and quota caps in the Google Cloud console.
* The connector does not support **per-end-user authentication**, each connection uses a single shared set of keys for the workspace.
* The **connection-creation form** validates the key format only, not API restrictions or referrer rules. Always test a real request after setup.
* The Lovable connector gateway does not expose a public list of egress IPs, so **IP-based restrictions** on the server key are not supported.

## Common issues

* **Maps fail to render with `RefererNotAllowedMapError`.** The browser key's website restrictions don't include the domain the app is actually being served on. Add the exact origin (including subdomain and protocol) in the Google Cloud credentials page.
* **Server-side calls return `REQUEST_DENIED`.** Either the API isn't enabled in the Google Cloud project, or the server key's API restrictions don't include the API being called. Re-check both in the Google Cloud console.
* **`Geocoder` or `DirectionsService` calls fail when called from the browser.** The browser key isn't authorized for Geocoding, Routes, or other server-side APIs. Move those calls to the server so they route through Lovable's gateway with the server key.
* **Maps fail on a custom domain with the managed connection.** Expected, the managed browser key is locked to `*.lovable.app`. Switch to your own credentials and add the custom domain to the browser key's referrer restrictions.

## How to unlink projects from a {connector_0} connection

Editors and above can remove specific projects from a connection without deleting the connection entirely. The connection will remain available for other projects.

To unlink projects:

<Steps>
  <Step title="Open Connectors">
    Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
  </Step>

  <Step title="Open the connection">
    Open the connection you want to manage.
  </Step>

  <Step title="Select projects">
    Under **Linked projects**, check the projects you want to unlink.
  </Step>

  <Step title="Confirm">
    Click **Unlink projects** and confirm.
  </Step>
</Steps>

When unlinked, those projects will no longer have access to {connector_0} through this connection. If a project needs {connector_0} again, you can link it to any available connection.

## How to delete a {connector_0} connection

Workspace admins and owners can delete {connector_0} connections. Other members can delete a connection if they created it, or if they have been explicitly granted access to it.

<Warning>
  Deleting a connection is permanent and cannot be undone. It will remove the credentials from all linked projects, and any apps using this connection will stop working until a new connection is added.
</Warning>

Before deleting, review the **Linked projects** section to see which projects are currently using the connection.

To delete a connection:

<Steps>
  <Step title="Open Connectors">
    Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
  </Step>

  <Step title="Open the connection">
    Open the connection you want to remove.
  </Step>

  <Step title="Review linked projects">
    Review the **Linked projects** section.
  </Step>

  <Step title="Delete">
    Under **Delete this connection**, click **Delete** and confirm.
  </Step>
</Steps>