Skip to main content

​
InfoWindow / InfoWindowF

The InfoWindow component displays a popup window with content above the map, either at a specific position or anchored to a marker. Both InfoWindow and InfoWindowF are available - they are functionally identical.

​
Props

​
options
google.maps.InfoWindowOptions
InfoWindow options object.
​
anchor
google.maps.MVCObject
The anchor for the InfoWindow (typically a Marker). If provided, the InfoWindow will be positioned at the anchor.
​
position
google.maps.LatLng | google.maps.LatLngLiteral
The position to display the InfoWindow. Either anchor or position must be provided.
​
zIndex
number
Z-index for stacking order.
​
children
ReactNode
Content to display in the InfoWindow. Only a single child is supported.

​
Event Handlers

​
onCloseClick
() => void
Fired when the close button is clicked.
​
onDomReady
() => void
Fired when the InfoWindow’s content DOM is ready.
​
onContentChanged
() => void
Fired when the content property changes.
​
onPositionChanged
() => void
Fired when the position property changes.
​
onZindexChanged
() => void
Fired when the zIndex property changes.

​
Lifecycle Callbacks

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

​
Example

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

function MyMap() {
  const [showInfo, setShowInfo] = useState(false);
  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}
        onClick={() => setShowInfo(true)}
      >
        {showInfo && (
          <InfoWindow onCloseClick={() => setShowInfo(false)}>
            <div>
              <h3>New York City</h3>
              <p>The Big Apple</p>
            </div>
          </InfoWindow>
        )}
      </Marker>
    </GoogleMap>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us