Connect your app to Google Maps Platform

1. 1

   Go to the 'Connectors' section in your Lovable workspace and select 'Google Maps Platform'.

   This is where you start the process of linking Google Maps to your Lovable projects.

2. 2

   Click 'Add connection'.

   This begins setting up a new connection to Google Maps.

3. 3

   Give your connection a clear name, like 'My App's Maps'.

   This helps you identify this specific Google Maps connection later, especially if you have more than one.

4. 4

   Choose 'Managed by Lovable' for quick testing on Lovable's preview domains, or 'Use your own credentials' if you have a custom domain, need more requests, or want to manage billing directly.

   This decides whether Lovable handles the technical setup for you (limited) or if you provide your own Google Maps keys (full control).

5. 5

   If you chose 'Use your own credentials', paste your 'Server API Key' and 'Browser API Key' into the respective fields.

   These keys are what allow your Lovable app to talk to Google Maps services, with the server key for background tasks and the browser key for interactive maps in the app.

6. 6

   Decide who in your workspace can use this connection.

   This controls access to the Google Maps features within your Lovable projects.

7. 7

   Click 'Connect'.

   This finalizes the connection, making Google Maps features available to your linked Lovable projects.

I want to connect Google Maps Platform to my Lovable app. I need to display interactive maps, calculate routes, and search for places. I'll be using my own Google Cloud account and API keys for production. Please set up the connection for me, ensuring the server key is restricted to Geocoding API, Routes API, and Places API (New), and the browser key is restricted to Maps JavaScript API and Places API (New). My app will be hosted on 'https://my-project.lovable.app/*' and 'https://www.mycustomdomain.com/*'.

Geocode

To turn a street address (like '1600 Amphitheatre Parkway') into exact map coordinates (like latitude and longitude), or vice-versa.

API key

A secret code that identifies your app and allows it to use a specific service, like Google Maps. It's like a password for your app to access features.

Referrer-restricted key

An API key that only works when requests come from specific websites you've approved. This stops others from using your key on their own sites.

Server-side APIs

Features of Google Maps that your app uses 'behind the scenes' (on Lovable's servers), not directly in the user's web browser.

Frontend

The part of your app that users see and interact with in their web browser.

Gateway

A secure service that acts as a middleman, handling requests between your Lovable app and external services like Google Maps.

Environment variable

A named value that your app can access, often used for configuration settings or secret keys. 'Public' means it's visible in the user's browser.

Rate limited

A restriction on how many requests your app can make to a service within a certain time period (e.g., 6,000 requests per day).

• Using the managed connection on a custom domain will prevent maps from loading.
• Relying on the managed connection for production apps will lead to hitting daily request limits.
• Calling server-side Google Maps APIs (like Geocoding or Routes) directly from the browser will result in errors because the browser key isn't authorized for them.
• Forgetting to add all your app's domains (including Lovable's preview domain and any custom domains) to the browser key's website restrictions will cause maps to fail with 'RefererNotAllowedMapError'.
• Not enabling the specific Google Maps APIs you need in your Google Cloud project, or not restricting your server key to those APIs, will cause 'REQUEST_DENIED' errors for server-side calls.
• Trying to use IP-based restrictions on your server key will break requests because Lovable's gateway IPs are not public.
• Ignoring Google Cloud billing and quota settings can lead to unexpected charges or service interruptions.