u/gurbaaaz

I needed address autocomplete in a Next.js form and kept landing on examples that still use AutocompleteService or the old embedded Google widget based on u/vis.gl/react-google-maps . Google’s current docs push you toward AutocompleteSuggestion instead. Even codex struggled to nail it in one shot. Took me a bit to wire that up with shadcn/ui, so I packaged it as a registry component.

It’s a normal shadcn-styled input with a suggestion dropdown, debounced search, keyboard nav, and session tokens so the autocomplete + place-details calls bill as one session. onPlaceSelect gives you { address, lat, lng, placeId } without dragging google.maps types through your app. There’s an optional countryCode prop if you want to bias results.

"use client"

import { PlacesAutocomplete } from "@/components/ui/places-autocomplete"

export function AddressField() {
  return (
    &lt;PlacesAutocomplete
      placeholder="Search for an address"
      onPlaceSelect={(place) =&gt; {
        console.log(place.address, place.lat, place.lng, place.placeId)
      }}
    /&gt;
  )
}

You will need Maps JavaScript API and Places API (New) enabled, plus NEXT_PUBLIC_GOOGLE_MAPS_API_KEY. Lock the key to your domains with HTTP referrer restrictions.

And I know, mapbox is a solid choice if you control the stack, but some products still need Google for user trust and the rich address coverage it provides.

Demo: https://shadcn-google-maps.vercel.app/

Happy to hear any feedback or ideas! A star on the repo is always appreciated.

shadcn-google-maps: Places autocomplete on the new Google API