Lovablefeaturebeginner
Add Google Maps Embed to Lovable App
Add a responsive Google Maps embed with custom markers, info windows, and directions link.
What you'll get
A responsive Google Maps embed with custom marker, info window, and directions link.
The Prompt
Add a Google Maps embed to my Lovable app. REQUIREMENTS: 1. Embed a Google Map on the contact or location page using the Google Maps Embed API (iframe) or Maps JavaScript API. 2. Add a custom marker at the business location with the business name. 3. Add an info window that opens on marker click showing: business name, address, phone number, and "Get Directions" link. 4. Make the map responsive — full width of its container with a 400px height on desktop and 300px on mobile. 5. Add map styling to match the site's design (use a custom JSON style or a preset like "Silver" or "Dark"). 6. Add a "View Larger Map" link below the embed that opens Google Maps in a new tab. 7. Support multiple locations if the business has more than one office — show all markers with bounds fitting. DATABASE: - No database changes needed. Location data can be hardcoded or fetched from a settings table. ENVIRONMENT VARIABLES: - GOOGLE_MAPS_API_KEY (if using JavaScript API) SECURITY: - Restrict the API key to your domain in Google Cloud Console. - Use the embed API (no key needed) for simple use cases.
Replace these variables
| Variable | Replace with |
|---|---|
| [BUSINESS_ADDRESS] | Full business address for the map marker |
| [MAP_STYLE] | Map visual style (default, silver, dark, retro) |
Tips for best results
Use the free embed API (iframe) if you just need a basic map — no API key required.
Restrict your Maps API key to your domain to prevent unauthorized usage charges.
Follow-up prompts
Add store locator
Add a store locator page with a search-by-zip input, distance filtering, and results list showing nearest locations alongside the map.