How do I connect Google Maps?

Steps

1. In Google Cloud Console, create a project (or use an existing one) and enable the Maps JavaScript API (plus Places/Geocoding if you need search or address lookups).
2. Create an API key and restrict it — by HTTP referrer to your domain, and to only the Maps APIs you actually use.
3. Ask Lovable to store the key as a secret and add the map:

"Add a Google Map to the Contact page showing this address, using my Google Maps API key stored as a secret."

Front-end key vs. secret

Maps JavaScript API keys are inherently visible in the browser (the map has to load client-side), so the meaningful protection is the referrer restriction in Google Cloud Console, not hiding the key. Still store it as a Lovable secret and inject it at build/request time rather than hardcoding it into a component, so you can rotate it without a code change.

Common features to ask for

• A single marker with an info window.
• Multiple markers from a database table (e.g. store locations).
• Address search/autocomplete using the Places API.
• Directions or distance calculations, which need the Directions/Distance Matrix APIs enabled separately.

What usually goes wrong

• Forgetting to restrict the key, leaving it usable on any site if scraped.
• Enabling only the Maps JavaScript API but then asking for autocomplete, which needs the Places API enabled too — check Google's billing dashboard for "API not enabled" errors.
• Exceeding the free tier and getting silently rate-limited; check Google Cloud's usage and billing alerts.
• Map not rendering because the container element has no explicit height — a common CSS mistake, not an API issue.

For anything beyond a basic embedded map — custom styling, clustering hundreds of markers, route optimisation — PromptSites.com can implement it directly.