AdvancedMarker (w/ PinElement)

Before using advanced markers, you need a Cloud project with a billing account, and the Maps JavaScript API enabled. To learn more, see official document.

<AdvancedMarker /> component is used for display customize highly performant markers. You can customize default marker’s background, border, etc… or replace marker icon with custom react element.

Basic Example

function MyMap() {
  return (
    <GoogleMap
      className='h-[400px]'
      mapOptions={{
        mapId: 'YOUR_MAP_ID',
      }}
      ...
    >
      <AdvancedMarker lat={37.4} lng={-122.07}>
        <PinElement scale={1.5} />
      </AdvancedMarker>
      <AdvancedMarker lat={37.38} lng={-122.07}>
        <PinElement background='#FBBC04' />
      </AdvancedMarker>
      <AdvancedMarker lat={37.4} lng={-122.05}>
        <PinElement borderColor={'#137333'} />
      </AdvancedMarker>
      <AdvancedMarker lat={37.38} lng={-122.05}>
        <PinElement glyphColor={'white'} />
      </AdvancedMarker>
      <AdvancedMarker lat={37.4} lng={-122.03}>
        <PinElement glyph='' />
      </AdvancedMarker>
      <AdvancedMarker lat={37.38} lng={-122.03}>
        <img src='https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' />
      </AdvancedMarker>
      <AdvancedMarker lat={37.39} lng={-122.05}>
        <div className='px-5 py-3 rounded bg-[#0af] text-lg text-white'>
          whole new marker content.
        </div>
      </AdvancedMarker>
    </GoogleMap>
  );
}

Props

Props	Type	Description
lat	number	latitude
lng	number	longitude
content	Node	we recommend passing marker content to children, but you can also pass marker content manually using content props.
hidden	boolean	if flag is set to true, marker will not be displayed on the map.
collisionBehavior	google.maps.CollisionBehavior	Please refer to the official documentation.
gmpDraggable	boolean	Please refer to the official documentation.
title	string	…
zIndex	number	…
onClick	(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void	callback for click event. Please refer to the official documentation.
onDrag	(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void	callback for drag event. Please refer to the official documentation.
onDragEnd	(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void	callback for dragend event. Please refer to the official documentation.
onDragStart	(marker: google.maps.marker.AdvancedMarkerElement, event: google.maps.MapMouseEvent) => void	callback for drag_start event. Please refer to the official documentation.
onGmpClick	(marker: google.maps.marker.AdvancedMarkerElement, evnet: google.maps.marker.AdvancedMarkerClickEvent) => void	callback for gmp_click event. Please refer to the official documentation.

PinElement

<PinElement /> component is used for customize default marker’s background, borderColor, glyph, glyphColor, scale.

https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElement

Props

Props	Type	Description
background	string	Please refer to the official documentation.
borderColor	string	…
glyph	string | Element | URL	…
glyphColor	string	…
scale	number	…