Skip to main content
The Marker component displays a marker on the map at a specified position. Both Marker and MarkerF variants are available and functionally identical.

​
Import

import { Marker } from '@react-google-maps/api'
// or
import { MarkerF } from '@react-google-maps/api'

​
Basic Usage

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

function MyMap() {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
  })

  if (!isLoaded) return <div>Loading...</div>

  return (
    <GoogleMap
      center={{ lat: 40.7128, lng: -74.0060 }}
      zoom={12}
    >
      <Marker position={{ lat: 40.7128, lng: -74.0060 }} />
    </GoogleMap>
  )
}

​
Props

​
position
google.maps.LatLng | google.maps.LatLngLiteral
required
The position of the marker on the map.Example: { lat: 40.7128, lng: -74.0060 }
​
options
google.maps.MarkerOptions
Additional marker options.
​
icon
string | google.maps.Icon | google.maps.Symbol
Custom icon for the marker. Can be a URL string or an Icon/Symbol object.
​
label
string | google.maps.MarkerLabel
Text label for the marker.
​
title
string
Tooltip text that appears on hover.
​
draggable
boolean
Whether the marker can be dragged by the user.Default: false
​
clickable
boolean
Whether the marker responds to click events.Default: true
​
visible
boolean
Whether the marker is visible.Default: true
​
animation
google.maps.Animation
Animation for the marker. Options: google.maps.Animation.DROP, google.maps.Animation.BOUNCE
​
opacity
number
Opacity of the marker (0.0 - 1.0).
​
zIndex
number
Z-index of the marker.
​
cursor
string
Mouse cursor to show on hover.
​
shape
google.maps.MarkerShape
Image map region definition for click detection.
​
clusterer
Clusterer | GoogleClusterer
Marker clusterer instance to group nearby markers.
​
noClustererRedraw
boolean
Prevents clusterer from redrawing when adding/removing this marker.

​
Events

​
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.
​
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when dragging starts.
​
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging ends.
​
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the marker.
​
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the marker.
​
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when the mouse button is pressed on the marker.
​
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when the mouse button is released on the marker.
​
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the marker is right-clicked.
​
onLoad
(marker: google.maps.Marker) => void
Callback invoked when the marker instance has loaded.
​
onUnmount
(marker: google.maps.Marker) => void
Callback invoked when the marker is unmounted.

​
Examples

​
Clickable Marker with InfoWindow

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

function ClickableMarker() {
  const [selected, setSelected] = useState(false)
  const position = { lat: 40.7128, lng: -74.0060 }

  return (
    <GoogleMap center={position} zoom={12}>
      <Marker
        position={position}
        onClick={() => setSelected(true)}
      >
        {selected && (
          <InfoWindow onCloseClick={() => setSelected(false)}>
            <div>New York City</div>
          </InfoWindow>
        )}
      </Marker>
    </GoogleMap>
  )
}

​
Custom Icon Marker

<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  icon={{
    url: '/custom-marker.png',
    scaledSize: { width: 40, height: 40 }
  }}
  title="Custom Marker"
/>

​
Draggable Marker

import { useState } from 'react'
import { Marker } from '@react-google-maps/api'

function DraggableMarker() {
  const [position, setPosition] = useState({ lat: 40.7128, lng: -74.0060 })

  return (
    <Marker
      position={position}
      draggable={true}
      onDragEnd={(e) => {
        if (e.latLng) {
          setPosition({
            lat: e.latLng.lat(),
            lng: e.latLng.lng()
          })
        }
      }}
    />
  )
}

​
Animated Marker

<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  animation={google.maps.Animation.DROP}
/>

// Bouncing marker
<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  animation={google.maps.Animation.BOUNCE}
/>

​
Marker with Label

<Marker
  position={{ lat: 40.7128, lng: -74.0060 }}
  label={{
    text: 'A',
    color: 'white',
    fontSize: '16px',
    fontWeight: 'bold'
  }}
/>

​
Children

The Marker component accepts children components that need to be anchored to the marker, such as InfoWindow. 
<Marker position={{ lat: 40.7128, lng: -74.0060 }}>
  <InfoWindow>
    <div>Marker information</div>
  </InfoWindow>
</Marker>

​
Component Variants

Both Marker and MarkerF are available and functionally identical:
  • Marker - Default export
  • MarkerF - Functional component variant (same implementation)
Use either based on your preference: 
import { Marker } from '@react-google-maps/api'
// or
import { MarkerF } from '@react-google-maps/api'

Build docs developers (and LLMs) love

Get started for freeTalk to us