Skip to main content

​
Marker / MarkerF

The Marker component renders a marker on the map at a specified location. Both Marker and MarkerF are available - they are functionally identical (MarkerF is the functional component, Marker is an alias).

​
Props

​
position
google.maps.LatLng | google.maps.LatLngLiteral
required
The marker position. Required.
​
options
google.maps.MarkerOptions
Marker options object.
​
animation
google.maps.Animation
Animation for the marker (BOUNCE or DROP).
​
clickable
boolean
Whether the marker is clickable.
​
cursor
string
Mouse cursor to show on hover.
​
draggable
boolean
Whether the marker can be dragged.
​
icon
string | google.maps.Icon | google.maps.Symbol
Icon for the marker.
​
label
string | google.maps.MarkerLabel
Label for the marker.
​
opacity
number
Opacity of the marker (0.0 to 1.0).
​
shape
google.maps.MarkerShape
Shape for the marker’s clickable region.
​
title
string
Rollover text.
​
visible
boolean
Whether the marker is visible.
​
zIndex
number
Z-index for stacking order.
​
clusterer
Clusterer | GoogleClusterer
Marker clusterer instance for clustering markers.
​
noClustererRedraw
boolean
Prevents redraw when adding/removing from clusterer.
​
children
ReactNode
Child components (e.g., InfoWindow).

​
Event Handlers

​
onClick
(e: google.maps.MapMouseEvent) => void
Fired when the marker is clicked.
​
onDblClick
(e: google.maps.MapMouseEvent) => void
Fired when the marker is double-clicked.
​
onDrag
(e: google.maps.MapMouseEvent) => void
Fired repeatedly while the marker is being dragged.
​
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when the marker is finished being dragged.
​
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when the user starts dragging the marker.
​
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is pressed on the marker.
​
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the marker area.
​
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the marker area.
​
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is released on the marker.
​
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the marker is right-clicked.
​
onClickableChanged
() => void
Fired when the clickable property changes.
​
onCursorChanged
() => void
Fired when the cursor property changes.
​
onAnimationChanged
() => void
Fired when the animation property changes.
​
onDraggableChanged
() => void
Fired when the draggable property changes.
​
onFlatChanged
() => void
Fired when the flat property changes.
​
onIconChanged
() => void
Fired when the icon property changes.
​
onPositionChanged
() => void
Fired when the position property changes.
​
onShapeChanged
() => void
Fired when the shape property changes.
​
onTitleChanged
() => void
Fired when the title property changes.
​
onVisibleChanged
() => void
Fired when the visible property changes.
​
onZindexChanged
() => void
Fired when the zIndex property changes.

​
Lifecycle Callbacks

​
onLoad
(marker: google.maps.Marker) => void
Called when the marker instance has loaded.
​
onUnmount
(marker: google.maps.Marker) => void
Called when the component unmounts.

​
Example

import { GoogleMap, Marker } from '@react-google-maps/api';

function MyMap() {
  const position: google.maps.LatLngLiteral = { lat: 40.7128, lng: -74.0060 };

  return (
    <GoogleMap
      center={position}
      zoom={12}
      mapContainerStyle={{ width: '100%', height: '400px' }}
    >
      <Marker
        position={position}
        title="New York City"
        onClick={(e) => console.log('Marker clicked', e)}
      />
    </GoogleMap>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us