CustomMarker

<CustomMarker /> component is used for display Maker with Custom React Element.

Basic Example

function MyMap() {
  return (
    <GoogleMap
      center={{ lat: 37.5111158, lng: 127.098167 }}
      {...}
    >
      <CustomMarker lat={37.5111158} lng={127.098167}>
        <div className='px-5 py-3 rounded bg-white text-lg text-black'>
          $ 2.5
        </div>
      </CustomMarker>
      {/* draggable */}
      <CustomMarker lat={37.5111158} lng={127.05} draggable>
        <div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
          $ 2.5 (draggable)
        </div>
      </CustomMarker>
    </GoogleMap>
  );
}

Props

Props	Type	Description
lat	number	latitude
lng	number	longitude
draggable	boolean	flag for draggable feature
preventDragOnClickable	boolean	prevent drag event on clickable element. (e.g. a tag, button tag)
onDragStart	(position: google.maps.LatLngLiteral) => void	callback for dragstart event.
onDrag	(position: google.maps.LatLngLiteral) => void	callback for drag event.
onDragEnd	(position: google.maps.LatLngLiteral) => void	callback for dragend event.

Alternative

You can also display custom element with AdvancedMarker.