feat(infowindow): add new headerContent prop (#396)

Starting with the current beta-version, the Maps API will add new options to control content and visibility of the InfoWindow-header.

This adds a new headerContent prop that renders JSX content into the InfoWindows header.

fixes #378

docs/api-reference/components/info-window.md

@@ -5,22 +5,26 @@ are typically used to display additional bits of information for locations on
 the map – for example, to add a label or image to a marker. They can be
 freely positioned on the map, or they can be "anchored" to a marker.
 
+Any JSX element added to the InfoWindow component as children will get
+rendered into the content area of the InfoWindow.
+
 When an `InfoWindow` is shown, the map will make sure to reposition the viewport
-such that the InfoWindow is well visible within the map container.
+such that the InfoWindow is well visible within the map container (this can
+be controlled using the [`disableAutoPan`](#disableautopan-boolean) prop).
 
 InfoWindows always use the same well-known styling and are limited in how much
-their look and feel can be customized. Any JSX element added to the
-InfoWindow component as children will get rendered into the content of the 
-InfoWindow.
+their look and feel can be customized.
 
 :::note
 
-The rendered InfoWindow includes a close-button that can't be removed or
-controlled via the Maps JavaScript API. This means that the application can't
-fully control the visibility of the InfoWindow.
+By default, the rendered InfoWindow includes a close-button that can't be
+controlled via the Maps JavaScript API. There are also situations where the
+map itself will close the InfoWindow (for example, when the InfoWindows
+anchor is removed). This means that the application doesn't always have full
+control over the visibility of the InfoWindow.
 
-To keep your state in sync with the map, you have to provide a listener for the 
-`onClose` event so the application knows when then InfoWindow was closed by 
+To keep your state in sync with the map, you have to provide a listener for the
+`onClose` event so the application knows when then InfoWindow was closed by
 the map or the user.
 
 :::
@@ -68,8 +72,8 @@ const MarkerWithInfoWindow = ({position}) => {
   const [infoWindowShown, setInfoWindowShown] = useState(false);
 
   // clicking the marker will toggle the infowindow
-  const handleMarkerClick = useCallback(() =>
-    setInfoWindowShown(isShown => !isShown),
+  const handleMarkerClick = useCallback(
+    () => setInfoWindowShown(isShown => !isShown),
     []
   );
 
@@ -121,12 +125,15 @@ When an `anchor` is specified, the `position` prop will be ignored.
 #### `anchor`: google.maps.Marker | google.maps.marker.AdvancedMarkerElement
 
 A Marker or AdvancedMarker instance to be used as an anchor. If specified, the
-InfoWindow will be positioned at the top-center of the anchor.
+InfoWindow will be positioned at the top-center of the anchor. References to
+the Marker / AdvancedMarkerElement objects needed can be obtained using the 
+`ref` property of the `Marker` and `AdvancedMarker` components (see example 
+above). 
 
 #### `zIndex`: number
 
 All InfoWindows are displayed on the map in order of their zIndex, with
-higher values displaying in front of InfoWindows with lower values. By
+higher values displayed in front of InfoWindows with lower values. By
 default, InfoWindows are displayed according to their latitude, with
 InfoWindows of lower latitudes appearing in front of InfoWindows at higher
 latitudes. InfoWindows are always displayed in front of markers.
@@ -189,6 +196,43 @@ The `minWidth` can't be changed while the InfoWindow is open.
 
 :::
 
+
+#### `headerContent`: string | React.ReactNode
+
+The content to display in the InfoWindow header row.
+This can be any JSX element, or a string that could also contain HTML. When
+a JSX Element is specified, the `headerContent` will be rendered to html via a
+[portal][react-portal], which requires an additional div element to be added
+as a container.
+
+```tsx
+<InfoWindow headerContent={<h3>InfoWindow Header Content</h3>}>
+  This is the content of the InfoWindow.
+</InfoWindow>
+```
+
+:::note
+
+This feature is currently only available in the beta channel of the Maps
+JavaScript API. Set the `version` prop of your `APIProvider` to `beta` to
+enable it.
+
+:::
+
+#### `headerDisabled`: boolean
+
+Disables the whole header row in the InfoWindow. When set to true, the
+header will be removed so that the header content and the close button will
+be hidden.
+
+:::note
+
+This feature is currently only available in the beta channel of the Maps
+JavaScript API. Set the `version` prop of your `APIProvider` to `beta` to
+enable it.
+
+:::
+
 ### Events
 
 #### `onClose`: () => void
@@ -205,3 +249,4 @@ This event is fired when the close button was clicked.
 [gmp-infowindow]: https://developers.google.com/maps/documentation/javascript/infowindows
 [gmp-infowindow-options]: https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions
 [react-dev-styling]: https://react.dev/reference/react-dom/components/common#applying-css-styles
+[react-portal]: https://react.dev/reference/react-dom/createPortal