Marker

<Marker /> component is used for display Marker.

Basic Example

function MyMap() {
  return (
    <GoogleMap
      center={{ lat: 37.5111158, lng: 127.098167 }}
      {...}
    >
      <Marker lat={37.5111158} lng={127.098167} title='Lotte World' />
      {/* draggable */}
      <Marker lat={37.5111158} lng={127.096167} title={'I\'m draggable'} draggable />
    </GoogleMap>
  );
}

Props

Props	Type	Description
lat	number	latitude
lng	number	longitude
draggable	boolean	flag for draggable feature
anchorPoint	google.maps.Point	Please refer to the official documentation.
animation	google.maps.Animation	…
clickable	boolean	…
collisionBehavior	string	…
crossOnDrag	boolean	…
cursor	string	…
draggable	boolean	…
icon	string | google.maps.Icon | google.maps.Symbol	…
label	string | google.maps.MarkerLabel	…
opacity	number	…
optimized	boolean	…
shape	google.maps.MarkerShape	…
title	string	…
visible	boolean	…
zIndex	number	…
onAnimationChanged	(marker: google.maps.Marker) => void	callback for animation_changed event. Please refer to the official documentation.
onClick	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for click event. Please refer to the official documentation.
onClickableChanged	(marker: google.maps.Marker) => void	callback for clickable_changed event. Please refer to the official documentation.
onContextMenu	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for contextmenu event. Please refer to the official documentation.
onCursorChanged	(marker: google.maps.Marker) => void	callback for cursor_changed event. Please refer to the official documentation.
onDblClick	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for dblclick event. Please refer to the official documentation.
onDrag	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for drag event. Please refer to the official documentation.
onDragEnd	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for dragend event. Please refer to the official documentation.
onDraggableChanged	(marker: google.maps.Marker) => void	callback for draggable_changed event. Please refer to the official documentation.
onDragStart	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for dragstart event. Please refer to the official documentation.
onFlatChanged	(marker: google.maps.Marker) => void	callback for flat_changed event. Please refer to the official documentation.
onIconChanged	(marker: google.maps.Marker) => void	callback for icon_changed event. Please refer to the official documentation.
onMouseDown	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for mousedown event. Please refer to the official documentation.
onMouseOut	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for mouseout event. Please refer to the official documentation.
onMouseOver	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for mouseover event. Please refer to the official documentation.
onMouseUp	(marker: google.maps.Marker, event: google.maps.MapMouseEvent) => void	callback for mouseup event. Please refer to the official documentation.
onPositionChanged	(marker: google.maps.Marker) => void	callback for position_changed event. Please refer to the official documentation.
onShapeChanged	(marker: google.maps.Marker) => void	callback for shape_changed event. Please refer to the official documentation.
onTitleChanged	(marker: google.maps.Marker) => void	callback for title_changed event. Please refer to the official documentation.
onVisibleChanged	(marker: google.maps.Marker) => void	callback for visible_changed event. Please refer to the official documentation.
onZindexChanged	(marker: google.maps.Marker) => void	callback for zindex_changed event. Please refer to the official documentation.

Render custom HTML Marker

Please refer to CustomMarker page.

Conenct to the InfoWindow

Please refer to InfoWindow page.

Marker Clustering

Please refer to MarkerClusterer page.