Skip to main content

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.

Google Maps Platform is Google’s suite of location APIs and SDKs for geocoding, routing, places, and interactive maps. The Google Maps 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 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 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 appExample promptDescription
Property listingsBuild 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.
The app uses embedded maps for browsing, geocoding to place pins, and the Routes API to estimate commutes from each listing.
Local business directoryBuild a directory app where users search nearby restaurants, view details, and see opening hours and reviews on a map.Place search and discovery.
The app uses Places Autocomplete in the search bar and the Places API to fetch place details, ratings, and hours.
Delivery dispatch toolBuild an internal tool that plans delivery routes for drivers, optimizes stop order, and shows estimated arrival times.Routing and ETAs for operations.
The app calls the Routes API server-side to compute optimized routes and renders them on an embedded map.
Field service schedulingBuild a scheduling app where dispatchers assign jobs to technicians based on location and see travel times between appointments.Location-aware scheduling.
The app geocodes job addresses and uses the Routes API to compute travel times between back-to-back appointments.
Store locatorBuild 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.
The app uses Places Autocomplete to capture user addresses, geocoding to center the map, and an interactive map to display nearby stores.
Travel itinerary plannerBuild a trip planner where users add stops, see them on a map, and view driving distance and time between each leg.Multi-stop itineraries.
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 APIs you enable, how you restrict each key, and what you ask Lovable to build.

​
How Google Maps connections work

Google Maps 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 connections. Server-side calls always go through Lovable’s connector gateway; see 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.
Google Maps 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 usage when you bring your own keys. Google Maps Platform includes a recurring monthly free tier, see Google Maps Platform pricing for current details.

​
How to connect Google Maps

Workspace admins and owners can connect Google Maps. 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 becomes available to the projects you link it to. Follow the setup steps below based on how you want to connect Google Maps.

​
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.
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 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.
To connect Google Maps:
1

Open the connector

Open Connectors → App connectors and select Google Maps.
2

Add a connection

Click Add connection.
3

Name the connection

In Display name, enter a name, for example Google Maps Managed. This name is only used in Lovable to identify the connection.
4

Choose managed credentials

Select Managed by Lovable.
5

Set access

Under Who can access this connection, keep access limited to yourself, invite the entire workspace, or restrict to specific people. See Connection-level access for more information.
6

Connect

Click Connect.
When connected, your Lovable apps can use Google Maps 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 connections using different keys, which is useful for separating environments or attaching different Google Cloud billing accounts.
All Google Maps Platform usage is billed by Google Cloud to your billing account, not by Lovable.

​
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 APIs you need

In the Google Cloud Console, 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
Google has deprecated the legacy Directions API, Distance Matrix API, and the original Places API. Use the Routes API and Places API (New) instead.

​
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.
1

Open credentials

Open the Google Cloud Console credentials page and select your project.
2

Create the key

Click Create credentials → API key.
3

Name the key

Give it a descriptive name, for example, Lovable Google Maps server key.
4

Edit the key

Click Edit API key.
5

Restrict by API

Under API restrictions, select Restrict key and enable only the server-side APIs from Step 1 that your app uses.
6

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.
7

Save and copy

Save and copy the key. It starts with AIza and is 39 characters long.
Restrict the server key to only the APIs you actually call. This limits the impact if the key is ever leaked.

​
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.”
1

Create the key

On the same credentials page, click Create credentials → API key.
2

Name the key

Give it a descriptive name, for example, Lovable Google Maps browser key.
3

Edit the key

Click Edit API key.
4

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)
5

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.
6

Save and copy

Save and copy the key.
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.
For more on locking down keys, see Google’s API security best practices.

​
Step 4: Connect Google Maps to Lovable

1

Open the connector

Open Connectors → App connectors and select Google Maps.
2

Add a connection

Click Add connection.
3

Name the connection

In Display name, enter a name, for example, Google Maps Prod.
4

Choose your own credentials

Select Your own credentials.
5

Add the server key

Paste the key from Step 2 into Server API Key (“Server-restricted API key for backend use (geocoding, directions, places)”).
6

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)”).
7

Set access

Under Who can access this connection, keep access limited to yourself, invite the entire workspace, or restrict to specific people.
8

Connect

Click Connect.
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 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 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.
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:
1

Open Connectors

Open Connectors, then go to App connectors, and select .
2

Open the connection

Open the connection you want to manage.
3

Select projects

Under Linked projects, check the projects you want to unlink.
4

Confirm

Click Unlink projects and confirm.
When unlinked, those projects will no longer have access to through this connection. If a project needs again, you can link it to any available connection.

​
How to delete a connection

Workspace admins and owners can delete connections.
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.
Before deleting, review the Linked projects section to see which projects are currently using the connection. To delete a connection:
1

Open Connectors

Open Connectors, then go to App connectors, and select .
2

Open the connection

Open the connection you want to remove.
3

Review linked projects

Review the Linked projects section.
4

Delete

Under Delete this connection, click Delete and confirm.