GoogleMap

<GoogleMap /> component is used for display Map instance.

Basic Example

function App() {
  return (
    <Suspense fallback={...}>
      <GoogleMapApiLoader
        apiKey='YOUR_API_KEY'
        suspense
      >
        <GoogleMap
          // map container element props
          className='h-[400px]'
          containerProps={{ id: 'my-map' }}
          // map options
          zoom={16}
          center={{ lat: 37.5111158, lng: 127.098167 }}
          mapOptions={{
            mapTypeId: 'satellite',
          }}
        />
      </GoogleMapApiLoader>
    </Suspense>
  );
}

Props

Props	Type	Description
style	HTMLAttributes<HTMLDivElement>['style']	style props for map container element
className	HTMLAttributes<HTMLDivElement>['className']	className props for map container element
containerProps	HTMLAttributes<HTMLDivElement>	props object for map container element
initialCenter	google.maps.LatLng | google.maps.LatLngLiteral	initial Map center.
initialZoom	number	initial Map zoom level.
zoom	number	map zoom level.
center	google.maps.LatLng | google.maps.LatLngLiteral	map center coordiante.
mapOptions	google.maps.MapOptions	options for map. Please refer to the official documentation.
onLoad	(map: google.maps.Map) => void	callback for map creating success
onBoundsChanged	(map: google.maps.Map) => void	callback for bounds_changed event. Please refer to the official documentation.
onCenterChanged	(map: google.maps.Map) => void	callback for center_changed event. Please refer to the official documentation.
onClick	(map: google.maps.Map, event: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => void	callback for click event. Please refer to the official documentation.
onContextmenu	(map: google.maps.Map, event: google.maps.MapMouseEvent) => void	callback for contextmenu event. Please refer to the official documentation.
onDblclick	(map: google.maps.Map, event: google.maps.MapMouseEvent) => void	callback for dblclick event. Please refer to the official documentation.
onDrag	(map: google.maps.Map) => void	callback for drag event. Please refer to the official documentation.
onDragEnd	(map: google.maps.Map) => void	callback for dragend event. Please refer to the official documentation.
onDragStart	(map: google.maps.Map) => void	callback for dragstart event. Please refer to the official documentation.
onHeadingChanged	(map: google.maps.Map) => void	callback for heading_changed event. Please refer to the official documentation.
onIdle	(map: google.maps.Map) => void	callback for idle event. Please refer to the official documentation.
onIsFractionalZoomEnabledChanged	(map: google.maps.Map) => void	callback for isfractionalzoomenabled_changed event. Please refer to the official documentation.
onMapCapabilitiesChanged	(map: google.maps.Map) => void	callback for mapcapabilities_changed event. Please refer to the official documentation.
onMapTypeIdChanged	(map: google.maps.Map) => void	callback for maptypeid_changed event. Please refer to the official documentation.
onMouseMove	(map: google.maps.Map, event: google.maps.MapMouseEvent) => void	callback for mousemove event. Please refer to the official documentation.
onMouseOut	(map: google.maps.Map, event: google.maps.MapMouseEvent) => void	callback for mouseout event. Please refer to the official documentation.
onMouseOver	(map: google.maps.Map, event: google.maps.MapMouseEvent) => void	callback for mouseover event. Please refer to the official documentation.
onProjectionChanged	(map: google.maps.Map) => void	callback for projection_changed event. Please refer to the official documentation.
onRenderingTypeChanged	(map: google.maps.Map) => void	callback for renderingtype_changed event. Please refer to the official documentation.
onTilesLoaded	(map: google.maps.Map) => void	callback for tilesloaded event. Please refer to the official documentation.
onTiltChanged	(map: google.maps.Map) => void	callback for tilt_changed event. Please refer to the official documentation.
onZoomChanged	(map: google.maps.Map) => void	callback for zoom_changed event. Please refer to the official documentation.

Access the Map Instance

You can access the map instance through three methods.

• 1. Event Callbacks (onLoad and others)
• 2. ref
• 3. useMapContext

const [map, setMap] = useState<google.maps.Map | null(null);
<GoogleMap
  onLoad={(map) => setMap(map)}
/>

/// or
const mapRef = useRef<google.maps.Map>(null);
<GoogleMap
  ref={mapRef}
/>

/// or
<GooelMap>
  <MyComponent />
</GooelMap>

function MyComponent() {
  const map = useMapContext();
}