Connect your app to Google Maps Platform

Google Maps Platform 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

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

​

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. For prototyping on *.lovable.app only. Not for production; server-side gateway requests are rate limited to at most 12,000 per day per workspace.
• Your own credentials: bring your own server and browser API keys. Required for custom domains and when going live to 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. To connect Google Maps Platform: 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.

​

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

​

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.

​

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

​

Step 4: Connect Google Maps Platform to Lovable

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 and for production.
• The managed connection is rate limited to at most 12,000 server-side gateway requests per day per workspace and is not intended for production workloads.
• 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.
• Server-side calls return 429 Too Many Requests on the managed connection. The workspace has hit the managed connection’s daily gateway limit (12,000 requests per day). Wait for the limit to reset, reduce call volume, or switch to Your own credentials for production traffic.

​

How to unlink projects from a 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: 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. Other members can delete a connection if they created it, or if they have been explicitly granted access to it. Before deleting, review the Linked projects section to see which projects are currently using the connection. To delete a connection: