How to embed Google Maps & auto complete addresses into to your app ?

Google Maps embed lets you place an interactive map on your site or app—users can zoom, see pins, and get directions without leaving your page. Autocomplete helps users type addresses or place names faster by showing smart suggestions as they type, reducing errors and keystrokes. You can use them together: when a user picks a suggestion, the map centers on that exact spot and you can save the place details (like coordinates).

Example: On a checkout form, the address field autocompletes “Koramangala…” to the full address, and a small embedded map updates to show the delivery location.

Add Google Maps Autocomplete + embedded map.

Requirements:
– Frontend: address input with autocomplete dropdown.
– On selection: save structured address to Supabase `locations`.
– Display selected location on embedded map below input.
– Env var for Maps API key.
– Responsive mobile design, Inter –6 spacing.
– Output: fully working location picker flow.