Connect your app to Google Maps Platform

1. 1

   Decide if you want to use Lovable's managed connection for quick prototyping or your own Google Cloud credentials for production and custom domains.

   The managed connection is faster to set up but has limitations, while your own credentials offer full control and are necessary for live apps.

2. 2

   If using Lovable's managed connection: Go to 'Connectors' in your Lovable dashboard, select 'Google Maps Platform', click 'Add connection', name it, choose 'Managed by Lovable' under 'Authentication', and then click 'Connect'.

   This creates a connection where Lovable handles the API keys, letting you quickly start building without Google Cloud setup.

3. 3

   If using your own credentials: First, in the Google Cloud console, enable the specific Google Maps Platform APIs your app needs (e.g., Maps JavaScript API for browser, Geocoding API for server).

   Enabling only necessary APIs helps manage costs and security, as Google bills per API usage.

4. 4

   Still in Google Cloud, create a 'server API key' and restrict it by API to only the server-side APIs you enabled. Do not add a website restriction.

   This key is used by Lovable's backend to securely call Google's server-side APIs, and website restrictions would prevent it from working.

5. 5

   Also in Google Cloud, create a 'browser API key' and restrict it by website to include all your app's domains (e.g., `https://your-project.lovable.app/*`, `https://yourdomain.com/*`). Restrict it by API to only browser-side APIs like Maps JavaScript API.

   This key is public and used by your app's frontend to load maps; website restrictions prevent unauthorized use, and API restrictions enhance security.

6. 6

   Back in Lovable: Go to 'Connectors', select 'Google Maps Platform', click 'Add connection', name it, choose 'Use your own credentials', paste your server API key and browser API key into the respective fields, and then click 'Connect'.

   This links your Lovable app to your Google Maps Platform account, allowing your app to use all the features you've configured.

7. 7

   After connecting, ask Lovable in your project chat to link your project to the Google Maps Platform connection you just created.

   This makes the connection available for use within your specific Lovable project.

Connect my app to Google Maps Platform. I want to use my own credentials for a production app on a custom domain. I need to enable the Maps JavaScript API, Geocoding API, Routes API, and Places API (New). Please guide me through the setup.

API key

A secret code that identifies your app to a service like Google Maps Platform, allowing it to use the service's features. Think of it like a password for your app to access specific functionalities.

Geocoding

The process of converting a street address into geographical coordinates (like latitude and longitude) or vice-versa.

Connector gateway

A secure service that Lovable provides to handle communication between your app and external services like Google Maps Platform, especially for sensitive operations.

Server key

An API key used by Lovable's secure backend systems to access Google Maps Platform features that should not be exposed directly to your app's users.

Browser key

An API key used directly by your app in a user's web browser to load things like interactive maps. It's designed to be public but should have restrictions to prevent misuse.

Custom domain

Your own unique website address (like 'yourcompany.com') instead of a default address provided by Lovable (like 'your-project.lovable.app').

API restrictions

Settings on an API key that limit which specific features or services it can access, improving security.

Website restrictions

Settings on an API key that limit which specific websites or domains are allowed to use that key, preventing others from using it.

• Using the managed connection for production apps or on custom domains, as maps will not load and it's not designed for live usage.
• Not enabling all the necessary Google Maps Platform APIs in your Google Cloud project, which will cause features to fail.
• Adding a website restriction to your server API key, which will block all server-side requests.
• Not adding all your app's domains (including Lovable's `*.lovable.app` URL and any custom domains) to the browser API key's website restrictions, preventing maps from loading.
• Using the browser key for server-side operations like geocoding or routing, as it's only authorized for loading maps.
• Exceeding the 6,000 server-side gateway requests per 24 hours limit for managed connections or your own credentials, leading to 'Too Many Requests' errors.