Expand google-map-react options spec to cover all valid options (#25665)

types/google-map-react/google-map-react-tests.tsx

@@ -1,9 +1,20 @@
-import GoogleMapReact, { BootstrapURLKeys } from 'google-map-react';
+import GoogleMapReact, { BootstrapURLKeys, MapOptions } from 'google-map-react';
 import * as React from 'react';
 
 const center = { lat: 0, lng: 0 };
 
 const key: BootstrapURLKeys = { key: 'my-google-maps-key' };
 const client: BootstrapURLKeys = { client: 'my-client-identifier', v: '3.28' , language: 'en' };
+const options: MapOptions = {
+    zoomControl: false,
+    gestureHandling: 'cooperative',
+    styles: [
+        {
+            featureType: "administrative",
+            elementType: "all",
+            stylers: [ {saturation: "-100"} ]
+        }
+    ],
+};
 
-<GoogleMapReact center={center} zoom={3} bootstrapURLKeys={client}/>;
+<GoogleMapReact center={center} zoom={3} bootstrapURLKeys={client} options={options} />;

types/google-map-react/index.d.ts

@@ -8,15 +8,48 @@ import * as React from 'react';
 
 export type BootstrapURLKeys = ({ key: string; } | { client: string; v: string; }) & { language?: string };
 
-export interface Options {
-  styles?: any[];
-  scrollwheel?: boolean;
-  panControl?: boolean;
+export interface MapTypeStyle {
+  elementType: string;
+  featureType: string;
+  stylers: any[];
+}
+
+export interface MapOptions {
+  // Any options from https://developers.google.com/maps/documentation/javascript/reference/3/#MapOptions
+  // excluding 'zoom' and 'center' which get set via props.
+  backgroundColor?: string;
+  clickableIcons?: boolean;
+  disableDefaultUI?: boolean;
+  disableDoubleClickZoom?: boolean;
+  draggable?: boolean;
+  draggableCursor?: string;
+  draggingCursor?: string;
+  fullscreenControl?: boolean;
+  fullscreenControlOptions?: {position: number};
+  gestureHandling?: string;
+  heading?: number;
+  keyboardShortcuts?: boolean;
   mapTypeControl?: boolean;
-  minZoomOverride?: boolean;
+  mapTypeControlOptions?: any;
+  mapTypeId?: string;
   minZoom?: number;
   maxZoom?: number;
-  gestureHandling?: string;
+  noClear?: boolean;
+  panControl?: boolean;
+  panControlOptions?: {position: number};
+  rotateControl?: boolean;
+  rotateControlOptions?: {position: number};
+  scaleControl?: boolean;
+  scaleControlOptions?: any;
+  scrollwheel?: boolean;
+  streetView?: any;
+  streetViewControl?: boolean;
+  streetViewControlOptions?: {position: number};
+  styles?: MapTypeStyle[];
+  tilt?: number;
+  zoomControl?: boolean;
+  zoomControlOptions?: {position: number};
+  minZoomOverride?: boolean; // Not a standard option; specific to google-map-react: https://github.com/google-map-react/google-map-react/pull/154
 }
 
 export interface Maps {
@@ -87,7 +120,7 @@ export interface Props {
   defaultZoom?: number;
   zoom?: number;
   hoverDistance?: number;
-  options?: Options | ((maps: Maps) => Options);
+  options?: MapOptions | ((maps: Maps) => MapOptions);
   margin?: any[];
   debounced?: boolean;
   draggable?: boolean;