Skip to main content
Version: v6.8.1

Google Map

Google Map

Enjoy the flexibility of our custom Google Map component! Whether you're showcasing a map, integrating autocomplete, or opting for a map without autocomplete, our component has you covered. Tailor your map experience to suit your needs effortlessly.

Map Showcase

import Autocomplete from '@/components/google-map/autocomplete';

export default YourAwesomeComponent() {
retun (
<Autocomplete
apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string}
onPlaceSelect={handlePlaceSelect}
mapClassName="rounded-lg"
spinnerClassName="grid h-full w-full place-content-center"
className="relative h-[500px] w-full flex-grow rounded-lg bg-gray-50"
hideInput={true}
/>
)
}

Autocomplete Input

import Autocomplete from '@/components/google-map/autocomplete';

export default YourAwesomeComponent() {
retun (
<Autocomplete
apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY as string}
onPlaceSelect={handlePlaceSelect}
spinnerClassName="hidden"
hideMap={true}
inputProps={{
prefix: <PiMapPin className="h-5 w-5" />,
placeholder: 'City, Neighborhood, ZIP, Address',
inputClassName:
'dark:[&_input::placeholder]:!text-gray-600 [&_input]:pe-3 [&_input]:ps-10',
prefixClassName: 'absolute start-3',
className: '[&_label>div]:p-0',
clearable: false,
}}
mapClassName="rounded-lg"
/>
)
}

API

PropertyTypeIs RequiredDefault
apiKeystringtrue
hideMapbooleanfalse
hideInputbooleanfalse
classNamestringfalse
mapClassNamestringfalse
spinnerClassNamestringfalse
onPlaceSelectonPlaceSelectfalse
inputPropshttps://www.rizzui.com/docs/components/input#input-propsfalse

onPlaceSelect

type onPlaceSelect: (place: Location) => void;

Location

type Location = {
address: string;
lat: number;
lng: number;
};