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

Property	Type	Is Required	Default
apiKey	string	true
hideMap	boolean	false
hideInput	boolean	false
className	string	false
mapClassName	string	false
spinnerClassName	string	false
onPlaceSelect	onPlaceSelect	false
inputProps	https://www.rizzui.com/docs/components/input#input-props	false

onPlaceSelect

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

Location

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