Map

Renders a reactive Google Map

API Reference

Props

Property	Default	Type/Description
`ref`	-	`(map: google.maps.Map \| null) => void` A reference to the map instance.
`id`	-	`string` An id for the map, this is required when multiple maps are present in the same APIProvider context.
`style`	-	`JSX.CSSProperties` Additional style rules to apply to the map dom-element.
`class`	-	`string` Additional css class-name to apply to the element containing the map.
`colorScheme`	-	`'DARK' \| 'LIGHT' \| 'FOLLOW_SYSTEM'` The color-scheme to use for the map.
`renderingType`	-	`'VECTOR' \| 'RASTER' \| 'UNINITIALIZED'` The rendering-type to be used.The rendering-type to be used.
`controlled`	false	`boolean` Indicates that the map will be controlled externally. Disables all controls provided by the map itself.
`reuseMaps`	false	`boolean` Enable caching of map-instances created by this component.
`defaultCenter`	-	`{ lat: number; lng: number }` The default center point of the map. Required if `center` and `defaultBounds` are not provided.
`defaultZoom`	-	`number` The default zoom of the map. Required if `zoom` and `defaultBounds` are not provided.
`defaultHeading`	-	`number` The default heading of the map. Required if `heading` is not provided.
`defaultTitle`	-	`number` The default tilt of the map. Required if `tilt` is not provided.
`defaultBounds`	-	`{ lat: number; lng: number; padding: number \| google.maps.Padding }` The default bounds of the map. If this is provided, no `defaultCenter` or `defaultZoom` are required.
`backgroundColor`	-	`string` The background color of the map div. This color will be visible when tiles have not yet loaded as the user pans
`center`	-	`{ lat: number; lng: number }` The center point of the map.
`zoom`	-	`number` The zoom of the map.
`heading`	-	`number` The heading of the map.
`tilt`	-	`number` The tilt of the map.
`clickableIcons`	true	`boolean` If false, disables clickability of POI icons.
`disableDefaultUI`	false	`boolean` If true, disables all default UI of the map.
`disableDoubleClickZoom`	false	`boolean` If true, disables double click zoom on the map.
`draggable`	true	`boolean` If false, prevents the map from being dragged.
`draggableCursor`	-	`string` The name or url of the cursor to display when mousing over a draggable map.
`draggingCursor`	-	`string` The name or url of the cursor to display when the map is being dragged.
`fullscreenControl`	false	`boolean` The enabled state of the Fullscreen control.
`fullscreenControlOptions`	-	`google.maps.FullscreenControlOptions` The options for the Fullscreen control.
`gestureHandling`	-	`'cooperative' \| 'greedy' \| none' \| 'auto'` The gesture handling behavior for the map.
`headingInteractionEnabled`	false	`boolean` Whether the map should allow user control of the camera heading. The option is only in effect when the map is a vector map
`isFractionalZoomEnabled`	true for vector maps and false for raster maps	`boolean` Whether the map should allow fractional zoom levels.
`keyboardShortcuts`	true	`boolean` If false, prevents the map from being controlled by the keyboard.
`mapId`	-	`string` The mapId to use for the map. Required for Cloud Maps and Advanced Markers. `DEMO_MAP_ID` can be used to try out features that require a map ID
`mapTypeControl`	-	`boolean` The enabled state of the MapType control.
`mapTypeControlOptions`	-	`google.maps.MapTypeControlOptions` The options for the MapType control.
`mapTypeId`	'ROADMAP'	`google.maps.MapTypeId` The initial MapTypeId for the map.
`maxZoom`	-	`number` The maximum zoom level of the map.
`minZoom`	-	`number` The minimum zoom level of the map.
`noClear`	false	`boolean` If true, the map will be rendered with no clear.
`panControl`	-	`boolean` The enabled state of the Pan control.
`panControlOptions`	-	`google.maps.PanControlOptions` The options for the Pan control.
`renderingType`	'RASTER'	`'VECTOR' \| 'RASTER' \| 'UNINITIALIZED'` The rendering-type to be used.
`restriction`	-	`google.maps.MapRestriction` Defines a boundary that restricts the area of the map accessible to users. When set, a user can only pan and zoom while the camera view stays inside the limits of the boundary.
`rotateControl`	-	`boolean` The enabled state of the Rotate control.
`rotateControlOptions`	-	`google.maps.RotateControlOptions` The options for the Rotate control.
`scaleControl`	-	`boolean` The enabled state of the Scale control.
`scaleControlOptions`	-	`google.maps.ScaleControlOptions` The options for the Scale control.
`scrollwheel`	true	`boolean` If false, disables scrollwheel zooming on the map.
`streetView`	-	`google.maps.StreetViewPanorama` A StreetView Panorama to display when the Street View pegman is dropped on the map.
`streetViewControl`	-	`boolean` The enabled state of the StreetView control.
`streetViewControlOptions`	-	`google.maps.StreetViewControlOptions` The options for the StreetView control.
`styles`	-	`google.maps.MapTypeStyle[]` Styles to apply to each of the default map types. For satellite, hybrid and terrain modes, these styles will only apply to labels and geometry. Not available when using a mapId or Vector Maps
`tiltInteractionEnabled`	false	`boolean` Whether the map should allow user control of the camera tilt. The option is only in effect when the map is a vector map
`zoomControl`	-	`boolean` The enabled state of the Zoom control.
`zoomControlOptions`	-	`google.maps.ZoomControlOptions` The options for the Zoom control.

Events

Event Name	Type/Description
`onBoundsChanged`	`MapCameraChangedEvent` Fired when the bounds of the map have changed.
`onCenterChanged`	`MapCameraChangedEvent` Fired when the center of the map has changed.
`onZoomChanged`	`MapCameraChangedEvent` Fired when the zoom of the map has changed.
`onHeadingChanged`	`MapCameraChangedEvent` Fired when the heading of the map has changed.
`onTiltChanged`	`MapCameraChangedEvent` Fired when the tilt of the map has changed.
`onCameraChanged`	`MapCameraChangedEvent` Fired when the camera of the map has changed.
`onClick`	`MapMouseEvent` Fired when the map is clicked.
`onDblClick`	`MapMouseEvent` Fired when the map is double-clicked.
`onContextMenu`	`MapMouseEvent` Fired when the map is right-clicked.
`onDrag`	`MapMouseEvent` Fired when the map is dragged.
`onDragEnd`	`MapMouseEvent` Fired when the map is done being dragged.
`onDragStart`	`MapMouseEvent` Fired when the map is starting to be dragged.
`onMousemove`	`MapMouseEvent` Fired when the mouse moves over the map.
`onMouseout`	`MapMouseEvent` Fired when the mouse moves out of the map.
`onMouseover`	`MapMouseEvent` Fired when the mouse moves over the map.
`onTilesLoaded`	`MapEvent` Fired when the visible tiles have finished loading.
`onIdle`	`MapEvent` Fired when the map becomes idle after panning.
`onProjectionChanged`	`MapEvent` Fired when the projection has changed.
`onIsFractionalZoomEnabledChanged`	`MapEvent` Fired when the fractional zoom setting has changed.
`onMapTypeIdChanged`	`MapEvent` Fired when the map type has changed.
`onRenderingTypeChanged`	`MapEvent` Fired when the rendering type has changed.

Event Types

All Map events extend the type MapEvent and have the following properties:

Property	Type/Description
`type`	`string` The type of the event.
`map`	`google.maps.Map` The map instance that the event was fired on.
`stoppable`	`boolean` Indicates if the event is stoppable.
`stop`	`() => void` A function that stops the event from propagating further.
`domEvent`	`MouseEvent \| TouchEvent \| PointerEvent \| KeyboardEvent \| Event` The original DOM event that triggered the map event.

MapMouseEvent

Contains a detail property with the latLng and placeId of the clicked location

{
  type: string
  map: google.maps.Map
  detail: {
    latLng: google.maps.LatLngLiteral | null;
    placeId: string | null;
  }
  stoppable: boolean
  stop: () => void
  domEvent?: MouseEvent | TouchEvent | PointerEvent | KeyboardEvent | Event
}

MapCameraChangedEvent

Contains a detail property with the position of the camera

{
  type: string
  map: google.maps.Map
  detail: {
    center: google.maps.LatLngLiteral
    bounds: google.maps.LatLngBoundsLiteral
    zoom: number
    heading: number
    tilt: number
  };
  stoppable: boolean
  stop: () => void
  domEvent?: MouseEvent | TouchEvent | PointerEvent | KeyboardEvent | Event
}