@wix/editor-react-components 1.2717.0 → 1.2719.0

package/dist/site/components/GoogleMap/component.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, useState, useCallback, useMemo, useImperativeHandle, Children, useEffect, useContext, useRef, useLayoutEffect, useReducer, memo, Suspense } from "react";
+import React__default, { forwardRef, useState, useCallback, useContext, useEffect, useRef, useMemo, useReducer, useImperativeHandle, createContext, useLayoutEffect, Children, memo, Suspense } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { e as getTabIndexAttribute, f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { createPortal } from "react-dom";
-import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
-import { G as GOOGLE_MAPS_DIRECTIONS_BASE_URL, M as MIN_ZOOM, a as MAX_ZOOM, T as TestIds, D as DEFAULT_ZOOM, b as MAP_IDS, c as MAP_TYPES, d as MAP_MOBILE_CONTROL_SIZE, A as API_KEY, e as DEFAULT_LOCATION, f as DefaultTranslations, g as TranslationKeys, h as TRANSLATIONS_NAMESPACES, C as COMPANY_NAME_DEFAULT, i as COMPANY_NAME_KEY, j as COMPONENT_NAME_DEFAULT, k as COMPONENT_NAME_KEY } from "../chunks/consts.js";
+import { G as GOOGLE_MAPS_DIRECTIONS_BASE_URL, M as MIN_ZOOM, a as MAX_ZOOM, T as TestIds, I as INFO_WINDOW_PIXEL_OFFSET, D as DEFAULT_ZOOM, b as MAP_IDS, c as MAP_TYPES, d as MAP_MOBILE_CONTROL_SIZE, A as API_KEY, e as DEFAULT_LOCATION, f as DefaultTranslations, g as TranslationKeys, h as TRANSLATIONS_NAMESPACES, C as COMPANY_NAME_DEFAULT, i as COMPANY_NAME_KEY, j as COMPONENT_NAME_DEFAULT, k as COMPONENT_NAME_KEY } from "../chunks/consts.js";
 import { p as parse } from "../chunks/index4.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
@@ -76,327 +75,1527 @@ const GoogleMapReact = forwardRef((props, forwardedRef) => {
     }
   );
 });
-var fastDeepEqual;
-var hasRequiredFastDeepEqual;
-function requireFastDeepEqual() {
-  if (hasRequiredFastDeepEqual) return fastDeepEqual;
-  hasRequiredFastDeepEqual = 1;
-  fastDeepEqual = function equal(a, b) {
-    if (a === b) return true;
-    if (a && b && typeof a == "object" && typeof b == "object") {
-      if (a.constructor !== b.constructor) return false;
-      var length, i, keys;
-      if (Array.isArray(a)) {
-        length = a.length;
-        if (length != b.length) return false;
-        for (i = length; i-- !== 0; )
-          if (!equal(a[i], b[i])) return false;
-        return true;
+function usePropBinding(object, prop, value) {
+  const writtenTo = useRef(null);
+  useEffect(() => {
+    if (!object)
+      return;
+    if (value === void 0 && writtenTo.current !== object)
+      return;
+    writtenTo.current = object;
+    object[prop] = value;
+  }, [object, prop, value]);
+}
+const SafeReact = Object.assign({}, React);
+const useInsertionEffect = SafeReact.useInsertionEffect;
+const useSafeInsertionEffect = (
+  // React 17 doesn't have useInsertionEffect.
+  useInsertionEffect && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+  useInsertionEffect !== SafeReact.useLayoutEffect ? useInsertionEffect : (fn) => {
+    fn();
+  }
+);
+function forbiddenInRender() {
+  throw new Error("useEffectEvent: invalid call during rendering.");
+}
+function useEffectEventPolyfill(fn) {
+  const ref = useRef(forbiddenInRender);
+  useSafeInsertionEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return ((...args) => ref.current(...args));
+}
+const useEffectEvent = useEffectEventPolyfill;
+const noop$1 = () => {
+};
+function useDomEventListener(target, name, callback) {
+  const eventFn = useEffectEvent(callback !== null && callback !== void 0 ? callback : noop$1);
+  const isCallbackDefined = Boolean(callback);
+  useEffect(() => {
+    if (!target || !name || !isCallbackDefined)
+      return;
+    const listenerCallback = eventFn;
+    target.addEventListener(name, listenerCallback);
+    return () => target.removeEventListener(name, listenerCallback);
+  }, [target, name, isCallbackDefined]);
+}
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+}
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function(resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function(resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, [])).next());
+  });
+}
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+const MSG_REPEATED_SET_OPTIONS = (options) => `The setOptions() function should only be called once. The options passed to the additional call (${JSON.stringify(options)}) will be ignored.`;
+const MSG_IMPORT_LIBRARY_EXISTS = (options) => `The google.maps.importLibrary() function is already defined, and @googlemaps/js-api-loader will use the existing function instead of overwriting it. The options passed to setOptions (${JSON.stringify(options)}) will be ignored.`;
+const MSG_SET_OPTIONS_NOT_CALLED = "No options were set before calling importLibrary. Make sure to configure the loader using setOptions().";
+const MSG_SCRIPT_ELEMENT_EXISTS = "There already is a script loading the Google Maps JavaScript API, and no google.maps.importLibrary function is defined. @googlemaps/js-api-loader will proceed to bootstrap the API with the specified options, but the existing script might cause problems using the API. Make sure to remove the script loading the API.";
+const MSG_API_KEY_USED = "The 'apiKey' parameter was used in setOptions(), but 'key' is the correct parameter name. Please update your configuration.";
+const MSG_TRUSTED_TYPES_POLICY_FAILED = (policyName, error) => `Failed to create Trusted Types policy "${policyName}": ${error instanceof Error ? error.message : String(error)}.
+
+If your Content Security Policy uses "require-trusted-types-for 'script'", allow this policy with "trusted-types ${policyName} google-maps-api-loader google-maps-api#html lit-html". The "google-maps-api-loader", "lit-html", and "google-maps-api#html" policies are required for full Maps JavaScript API execution. Falling back to a string script URL.`;
+const __DEV__$1 = process.env.NODE_ENV !== "production";
+const logDevWarning = __DEV__$1 ? (message) => {
+  console.warn(`[@googlemaps/js-api-loader] ${message}`);
+} : () => {
+};
+const logDevNotice = __DEV__$1 ? (message) => {
+  console.info(`[@googlemaps/js-api-loader] ${message}`);
+} : () => {
+};
+const TRUSTED_TYPES_POLICY_NAME = "@googlemaps/js-api-loader";
+const fallbackPolicy = { createScriptURL: (url) => url };
+let policy;
+function getPolicy() {
+  if (policy) {
+    return policy;
+  }
+  const trustedTypes = globalThis.trustedTypes;
+  if (!trustedTypes) {
+    policy = fallbackPolicy;
+    return policy;
+  }
+  try {
+    policy = trustedTypes.createPolicy(TRUSTED_TYPES_POLICY_NAME, {
+      createScriptURL: (url) => url
+    });
+  } catch (e) {
+    logDevWarning(MSG_TRUSTED_TYPES_POLICY_FAILED(TRUSTED_TYPES_POLICY_NAME, e));
+    policy = fallbackPolicy;
+  }
+  return policy;
+}
+function setScriptSrc(script, src) {
+  script.src = getPolicy().createScriptURL(src);
+}
+const bootstrap = (bootstrapParams) => {
+  var bootstrapPromise;
+  var script;
+  var bootstrapParamsKey;
+  var PRODUCT_NAME = "The Google Maps JavaScript API";
+  var GOOGLE = "google";
+  var IMPORT_API_NAME = "importLibrary";
+  var PENDING_BOOTSTRAP_KEY = "__ib__";
+  var doc = document;
+  var global_ = window;
+  var google_ = global_[GOOGLE] || (global_[GOOGLE] = {});
+  var namespace = google_.maps || (google_.maps = {});
+  var libraries = /* @__PURE__ */ new Set();
+  var searchParams = new URLSearchParams();
+  var triggerBootstrap = () => bootstrapPromise || (bootstrapPromise = new Promise(async (resolve, reject) => {
+    var _a;
+    await (script = doc.createElement("script"));
+    searchParams.set("libraries", [...libraries] + "");
+    for (bootstrapParamsKey in bootstrapParams) {
+      searchParams.set(bootstrapParamsKey.replace(/[A-Z]/g, (g) => "_" + g[0].toLowerCase()), bootstrapParams[bootstrapParamsKey]);
+    }
+    searchParams.set("callback", GOOGLE + ".maps." + PENDING_BOOTSTRAP_KEY);
+    setScriptSrc(script, "https://maps.googleapis.com/maps/api/js?" + searchParams);
+    namespace[PENDING_BOOTSTRAP_KEY] = resolve;
+    script.onerror = () => bootstrapPromise = reject(Error(PRODUCT_NAME + " could not load."));
+    script.nonce = ((_a = doc.querySelector("script[nonce]")) == null ? void 0 : _a.nonce) || "";
+    doc.head.append(script);
+  }));
+  namespace[IMPORT_API_NAME] ? console.warn(PRODUCT_NAME + " only loads once. Ignoring:", bootstrapParams) : namespace[IMPORT_API_NAME] = (libraryName, ...args) => libraries.add(libraryName) && triggerBootstrap().then(() => namespace[IMPORT_API_NAME](libraryName, ...args));
+};
+const __DEV__ = process.env.NODE_ENV !== "production";
+let setOptionsWasCalled_ = false;
+function setOptions(options) {
+  if (setOptionsWasCalled_) {
+    logDevWarning(MSG_REPEATED_SET_OPTIONS(options));
+    return;
+  }
+  if (options.apiKey) {
+    logDevWarning(MSG_API_KEY_USED);
+    if (!options.key) {
+      options.key = options.apiKey;
+    }
+  }
+  installImportLibrary_(options);
+  setOptionsWasCalled_ = true;
+}
+async function importLibrary(libraryName) {
+  var _a, _b;
+  if (!setOptionsWasCalled_) {
+    logDevWarning(MSG_SET_OPTIONS_NOT_CALLED);
+  }
+  if (!((_b = (_a = window == null ? void 0 : window.google) == null ? void 0 : _a.maps) == null ? void 0 : _b.importLibrary)) {
+    throw new Error("google.maps.importLibrary is not installed.");
+  }
+  return await google.maps.importLibrary(libraryName);
+}
+function installImportLibrary_(options) {
+  var _a, _b;
+  const importLibraryExists = Boolean((_b = (_a = window.google) == null ? void 0 : _a.maps) == null ? void 0 : _b.importLibrary);
+  if (importLibraryExists) {
+    logDevNotice(MSG_IMPORT_LIBRARY_EXISTS(options));
+  } else if (__DEV__) {
+    const scriptEl = document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+    if (scriptEl) {
+      logDevWarning(MSG_SCRIPT_ELEMENT_EXISTS);
+    }
+  }
+  if (!importLibraryExists) {
+    bootstrap(options);
+  }
+}
+const APILoadingStatus = {
+  NOT_LOADED: "NOT_LOADED",
+  LOADING: "LOADING",
+  LOADED: "LOADED",
+  FAILED: "FAILED",
+  AUTH_FAILURE: "AUTH_FAILURE"
+};
+const VERSION = "1.10.1";
+const DEFAULT_SOLUTION_CHANNEL = "GMP_visgl_rgmlibrary_v1_default";
+const DEFAULT_INTERNAL_USAGE_ATTRIBUTION_IDS = [
+  `gmp_visgl_reactgooglemaps_v${VERSION}`
+];
+const APIProviderContext = React__default.createContext(null);
+let loadingStatus = APILoadingStatus.NOT_LOADED;
+let serializedApiParams;
+const listeners = /* @__PURE__ */ new Set();
+function updateLoadingStatus(status) {
+  if (status === loadingStatus) {
+    return;
+  }
+  loadingStatus = status;
+  listeners.forEach((listener) => listener(loadingStatus));
+}
+function useMapInstances() {
+  const [mapInstances, setMapInstances] = useState({});
+  const addMapInstance = (mapInstance, id = "default") => {
+    setMapInstances((instances) => Object.assign(Object.assign({}, instances), { [id]: mapInstance }));
+  };
+  const removeMapInstance = (id = "default") => {
+    setMapInstances((_a) => {
+      var _b = id;
+      _a[_b];
+      var remaining = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+      return remaining;
+    });
+  };
+  const clearMapInstances = () => {
+    setMapInstances({});
+  };
+  return { mapInstances, addMapInstance, removeMapInstance, clearMapInstances };
+}
+function useMap3DInstances() {
+  const [map3dInstances, setMap3DInstances] = useState({});
+  const addMap3DInstance = (map3dInstance, id = "default") => {
+    setMap3DInstances((instances) => Object.assign(Object.assign({}, instances), { [id]: map3dInstance }));
+  };
+  const removeMap3DInstance = (id = "default") => {
+    setMap3DInstances((_a) => {
+      var _b = id;
+      _a[_b];
+      var remaining = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+      return remaining;
+    });
+  };
+  const clearMap3DInstances = () => {
+    setMap3DInstances({});
+  };
+  return {
+    map3dInstances,
+    addMap3DInstance,
+    removeMap3DInstance,
+    clearMap3DInstances
+  };
+}
+function useGoogleMapsApiLoader(props) {
+  const { onLoad, onError, apiKey, version, libraries = [], region, language, authReferrerPolicy, channel, solutionChannel, fetchAppCheckToken } = props;
+  const [status, setStatus] = useState(loadingStatus);
+  const [loadedLibraries, addLoadedLibrary] = useReducer((loadedLibraries2, action) => {
+    return loadedLibraries2[action.name] ? loadedLibraries2 : Object.assign(Object.assign({}, loadedLibraries2), { [action.name]: action.value });
+  }, {});
+  const currentSerializedParams = useMemo(() => {
+    const params = {
+      apiKey,
+      version,
+      libraries: libraries.join(","),
+      region,
+      language,
+      authReferrerPolicy,
+      channel,
+      solutionChannel
+    };
+    return JSON.stringify(params);
+  }, [
+    apiKey,
+    version,
+    libraries,
+    region,
+    language,
+    authReferrerPolicy,
+    channel,
+    solutionChannel
+  ]);
+  const importLibraryCallback = useCallback((name) => __awaiter(this, void 0, void 0, function* () {
+    if (loadedLibraries[name]) {
+      return loadedLibraries[name];
+    }
+    const res = yield importLibrary(name);
+    addLoadedLibrary({ name, value: res });
+    return res;
+  }), [loadedLibraries]);
+  useEffect(() => {
+    listeners.add(setStatus);
+    setStatus(loadingStatus);
+    return () => {
+      listeners.delete(setStatus);
+    };
+  }, []);
+  useEffect(
+    () => {
+      (() => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+          if (serializedApiParams && serializedApiParams !== currentSerializedParams) {
+            console.warn(`The Google Maps JavaScript API has already been loaded with different parameters. The new parameters will be ignored. If you need to use different parameters, please refresh the page.`);
+          }
+          const librariesToLoad = [
+            "core",
+            "maps",
+            ...libraries
+          ];
+          const options = Object.fromEntries(Object.entries({
+            key: apiKey,
+            v: version,
+            libraries,
+            region,
+            language,
+            authReferrerPolicy
+          }).filter(([, value]) => value !== void 0));
+          if (channel !== void 0 && channel >= 0 && channel <= 999) {
+            options.channel = String(channel);
+          }
+          if (solutionChannel === void 0) {
+            options.solutionChannel = DEFAULT_SOLUTION_CHANNEL;
+          } else if (solutionChannel !== "") {
+            options.solutionChannel = solutionChannel;
+          }
+          if ((_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.importLibrary) {
+            const shouldUpdateLoadingStatus = !serializedApiParams;
+            if (shouldUpdateLoadingStatus) {
+              serializedApiParams = currentSerializedParams;
+              setOptions(options);
+            }
+            yield Promise.all(librariesToLoad.map((name) => importLibraryCallback(name)));
+            if (shouldUpdateLoadingStatus) {
+              updateLoadingStatus(APILoadingStatus.LOADED);
+            }
+            if (onLoad)
+              onLoad();
+            return;
+          }
+          if (loadingStatus === APILoadingStatus.LOADING || loadingStatus === APILoadingStatus.LOADED) {
+            if (loadingStatus === APILoadingStatus.LOADED && onLoad)
+              onLoad();
+            return;
+          }
+          serializedApiParams = currentSerializedParams;
+          updateLoadingStatus(APILoadingStatus.LOADING);
+          setOptions(options);
+          yield Promise.all(librariesToLoad.map((name) => importLibraryCallback(name)));
+          updateLoadingStatus(APILoadingStatus.LOADED);
+          if (onLoad) {
+            onLoad();
+          }
+        } catch (error) {
+          updateLoadingStatus(APILoadingStatus.FAILED);
+          if (onError) {
+            onError(error);
+          } else {
+            console.error("The Google Maps JavaScript API failed to load.", error);
+          }
+        }
+      }))();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentSerializedParams, onLoad, onError, importLibraryCallback, libraries]
+  );
+  useEffect(() => {
+    if (status !== APILoadingStatus.LOADED)
+      return;
+    const settings = google.maps.Settings.getInstance();
+    if (fetchAppCheckToken) {
+      settings.fetchAppCheckToken = fetchAppCheckToken;
+    }
+  }, [status, fetchAppCheckToken]);
+  return {
+    status,
+    loadedLibraries,
+    importLibrary: importLibraryCallback
+  };
+}
+function useInternalUsageAttributionIds(props) {
+  return useMemo(() => props.disableUsageAttribution ? null : DEFAULT_INTERNAL_USAGE_ATTRIBUTION_IDS, [props.disableUsageAttribution]);
+}
+const APIProvider = (props) => {
+  const { children } = props, loaderProps = __rest(props, ["children"]);
+  const { mapInstances, addMapInstance, removeMapInstance, clearMapInstances } = useMapInstances();
+  const { map3dInstances, addMap3DInstance, removeMap3DInstance, clearMap3DInstances } = useMap3DInstances();
+  const { status, loadedLibraries, importLibrary: importLibrary2 } = useGoogleMapsApiLoader(loaderProps);
+  const internalUsageAttributionIds = useInternalUsageAttributionIds(loaderProps);
+  const contextValue = useMemo(() => ({
+    mapInstances,
+    addMapInstance,
+    removeMapInstance,
+    clearMapInstances,
+    map3dInstances,
+    addMap3DInstance,
+    removeMap3DInstance,
+    clearMap3DInstances,
+    status,
+    loadedLibraries,
+    importLibrary: importLibrary2,
+    internalUsageAttributionIds
+  }), [
+    mapInstances,
+    addMapInstance,
+    removeMapInstance,
+    clearMapInstances,
+    map3dInstances,
+    addMap3DInstance,
+    removeMap3DInstance,
+    clearMap3DInstances,
+    status,
+    loadedLibraries,
+    importLibrary2,
+    internalUsageAttributionIds
+  ]);
+  return React__default.createElement(APIProviderContext.Provider, { value: contextValue }, children);
+};
+function useCallbackRef() {
+  const [el, setEl] = useState(null);
+  const ref = useCallback((value) => setEl(value), [setEl]);
+  return [el, ref];
+}
+function useApiLoadingStatus() {
+  var _a;
+  return ((_a = useContext(APIProviderContext)) === null || _a === void 0 ? void 0 : _a.status) || APILoadingStatus.NOT_LOADED;
+}
+function useApiIsLoaded() {
+  const status = useApiLoadingStatus();
+  return status === APILoadingStatus.LOADED;
+}
+function useMapsLibrary(name) {
+  var _a;
+  const apiIsLoaded = useApiIsLoaded();
+  const ctx = useContext(APIProviderContext);
+  useEffect(() => {
+    if (!apiIsLoaded || !ctx)
+      return;
+    void ctx.importLibrary(name);
+  }, [apiIsLoaded, ctx, name]);
+  return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.loadedLibraries[name]) !== null && _a !== void 0 ? _a : null;
+}
+function useForceUpdate() {
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  return forceUpdate;
+}
+const DEFAULT_CAMERA_STATE = {
+  center: { lat: 0, lng: 0, altitude: 0 },
+  range: 0,
+  heading: 0,
+  tilt: 0,
+  roll: 0
+};
+const CAMERA_PROPS = ["center", "range", "heading", "tilt", "roll"];
+function updateCameraState(map3d, ref, prop) {
+  const value = map3d[prop];
+  if (value == null)
+    return;
+  if (prop === "center") {
+    const center = value;
+    ref.current.center = center.toJSON ? center.toJSON() : center;
+  } else {
+    ref.current[prop] = value;
+  }
+}
+function useTrackedCameraStateRef3D(map3d) {
+  const forceUpdate = useForceUpdate();
+  const ref = useRef(Object.assign({}, DEFAULT_CAMERA_STATE));
+  useEffect(() => {
+    if (!map3d)
+      return;
+    const listeners2 = [];
+    for (const prop of CAMERA_PROPS) {
+      const eventName = `gmp-${prop}change`;
+      const handler = () => {
+        updateCameraState(map3d, ref, prop);
+        forceUpdate();
+      };
+      map3d.addEventListener(eventName, handler);
+      listeners2.push(() => map3d.removeEventListener(eventName, handler));
+    }
+    return () => {
+      for (const removeListener of listeners2) {
+        removeListener();
+      }
+    };
+  }, [map3d, forceUpdate]);
+  return ref;
+}
+function useMap3DInstance(props) {
+  const maps3dLib = useMapsLibrary("maps3d");
+  const [customElementReady, setCustomElementReady] = useState(false);
+  const [, containerRef] = useCallbackRef();
+  const [map3d, map3dRef] = useCallbackRef();
+  const cameraStateRef = useTrackedCameraStateRef3D(map3d);
+  useEffect(() => {
+    customElements.whenDefined("gmp-map-3d").then(() => {
+      setCustomElementReady(true);
+    });
+  }, []);
+  useEffect(
+    () => {
+      if (!map3d)
+        return;
+      const {
+        center,
+        heading,
+        tilt,
+        range,
+        roll,
+        defaultCenter,
+        defaultHeading,
+        defaultTilt,
+        defaultRange,
+        defaultRoll,
+        // Non-element props to exclude
+        id,
+        style: style2,
+        className,
+        children,
+        onCenterChanged,
+        onHeadingChanged,
+        onTiltChanged,
+        onRangeChanged,
+        onRollChanged,
+        onCameraChanged,
+        onClick,
+        onSteadyChange,
+        onAnimationEnd,
+        onError,
+        mode,
+        gestureHandling
+      } = props, elementOptions = __rest(props, ["center", "heading", "tilt", "range", "roll", "defaultCenter", "defaultHeading", "defaultTilt", "defaultRange", "defaultRoll", "id", "style", "className", "children", "onCenterChanged", "onHeadingChanged", "onTiltChanged", "onRangeChanged", "onRollChanged", "onCameraChanged", "onClick", "onSteadyChange", "onAnimationEnd", "onError", "mode", "gestureHandling"]);
+      const initialCenter = center !== null && center !== void 0 ? center : defaultCenter;
+      const initialHeading = heading !== null && heading !== void 0 ? heading : defaultHeading;
+      const initialTilt = tilt !== null && tilt !== void 0 ? tilt : defaultTilt;
+      const initialRange = range !== null && range !== void 0 ? range : defaultRange;
+      const initialRoll = roll !== null && roll !== void 0 ? roll : defaultRoll;
+      const initialOptions = Object.assign({}, elementOptions);
+      if (initialCenter)
+        initialOptions.center = initialCenter;
+      if (initialHeading !== void 0)
+        initialOptions.heading = initialHeading;
+      if (initialTilt !== void 0)
+        initialOptions.tilt = initialTilt;
+      if (initialRange !== void 0)
+        initialOptions.range = initialRange;
+      if (initialRoll !== void 0)
+        initialOptions.roll = initialRoll;
+      Object.assign(map3d, initialOptions);
+    },
+    // this effect should only run when the map3d element first becomes
+    // available, so we skip re-running it when other props change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [map3d]
+  );
+  const isReady = !!maps3dLib && customElementReady;
+  return [map3d, containerRef, map3dRef, cameraStateRef, isReady];
+}
+function toLatLngAltitudeLiteral(value) {
+  if (!value)
+    return null;
+  if ("toJSON" in value && typeof value.toJSON === "function") {
+    return value.toJSON();
+  }
+  return value;
+}
+function useMap3DCameraParams(map3d, cameraStateRef, props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const centerLiteral = toLatLngAltitudeLiteral(props.center);
+  const lat = (_a = centerLiteral === null || centerLiteral === void 0 ? void 0 : centerLiteral.lat) !== null && _a !== void 0 ? _a : null;
+  const lng = (_b = centerLiteral === null || centerLiteral === void 0 ? void 0 : centerLiteral.lng) !== null && _b !== void 0 ? _b : null;
+  const altitude = (_c = centerLiteral === null || centerLiteral === void 0 ? void 0 : centerLiteral.altitude) !== null && _c !== void 0 ? _c : null;
+  const range = (_d = props.range) !== null && _d !== void 0 ? _d : null;
+  const heading = (_e = props.heading) !== null && _e !== void 0 ? _e : null;
+  const tilt = (_f = props.tilt) !== null && _f !== void 0 ? _f : null;
+  const roll = (_g = props.roll) !== null && _g !== void 0 ? _g : null;
+  useLayoutEffect(() => {
+    var _a2;
+    if (!map3d)
+      return;
+    const currentState = cameraStateRef.current;
+    if (lat !== null && lng !== null && (currentState.center.lat !== lat || currentState.center.lng !== lng || altitude !== null && currentState.center.altitude !== altitude)) {
+      map3d.center = {
+        lat,
+        lng,
+        altitude: (_a2 = altitude !== null && altitude !== void 0 ? altitude : currentState.center.altitude) !== null && _a2 !== void 0 ? _a2 : 0
+      };
+    }
+    if (range !== null && currentState.range !== range) {
+      map3d.range = range;
+    }
+    if (heading !== null && currentState.heading !== heading) {
+      map3d.heading = heading;
+    }
+    if (tilt !== null && currentState.tilt !== tilt) {
+      map3d.tilt = tilt;
+    }
+    if (roll !== null && currentState.roll !== roll) {
+      map3d.roll = roll;
+    }
+  });
+}
+const CAMERA_EVENTS = [
+  "gmp-centerchange",
+  "gmp-headingchange",
+  "gmp-tiltchange",
+  "gmp-rangechange",
+  "gmp-rollchange"
+];
+function createCameraEvent(map3d, type) {
+  const center = map3d.center;
+  let centerLiteral;
+  if (center && "toJSON" in center && typeof center.toJSON === "function") {
+    centerLiteral = center.toJSON();
+  } else if (center) {
+    centerLiteral = center;
+  } else {
+    centerLiteral = { lat: 0, lng: 0, altitude: 0 };
+  }
+  return {
+    type,
+    map3d,
+    detail: {
+      center: centerLiteral,
+      range: map3d.range || 0,
+      heading: map3d.heading || 0,
+      tilt: map3d.tilt || 0,
+      roll: map3d.roll || 0
+    }
+  };
+}
+function createClickEvent(map3d, srcEvent) {
+  const placeClickEvent = srcEvent;
+  return {
+    type: "gmp-click",
+    map3d,
+    detail: {
+      position: srcEvent.position || null,
+      placeId: placeClickEvent.placeId
+    }
+  };
+}
+function createSteadyChangeEvent(map3d, srcEvent) {
+  return {
+    type: "gmp-steadychange",
+    map3d,
+    detail: {
+      isSteady: srcEvent.isSteady
+    }
+  };
+}
+function useMap3DEvents(map3d, props) {
+  const { onCenterChanged, onHeadingChanged, onTiltChanged, onRangeChanged, onRollChanged, onCameraChanged, onClick, onSteadyChange, onAnimationEnd, onError } = props;
+  useMap3DEvent(map3d, "gmp-centerchange", onCenterChanged, createCameraEvent);
+  useMap3DEvent(map3d, "gmp-headingchange", onHeadingChanged, createCameraEvent);
+  useMap3DEvent(map3d, "gmp-tiltchange", onTiltChanged, createCameraEvent);
+  useMap3DEvent(map3d, "gmp-rangechange", onRangeChanged, createCameraEvent);
+  useMap3DEvent(map3d, "gmp-rollchange", onRollChanged, createCameraEvent);
+  useEffect(() => {
+    if (!map3d || !onCameraChanged)
+      return;
+    const handler = () => {
+      onCameraChanged(createCameraEvent(map3d, "camerachange"));
+    };
+    for (const eventName of CAMERA_EVENTS) {
+      map3d.addEventListener(eventName, handler);
+    }
+    return () => {
+      for (const eventName of CAMERA_EVENTS) {
+        map3d.removeEventListener(eventName, handler);
+      }
+    };
+  }, [map3d, onCameraChanged]);
+  useEffect(() => {
+    if (!map3d || !onClick)
+      return;
+    const handler = (ev) => {
+      onClick(createClickEvent(map3d, ev));
+    };
+    map3d.addEventListener("gmp-click", handler);
+    return () => map3d.removeEventListener("gmp-click", handler);
+  }, [map3d, onClick]);
+  useEffect(() => {
+    if (!map3d || !onSteadyChange)
+      return;
+    const handler = (ev) => {
+      onSteadyChange(createSteadyChangeEvent(map3d, ev));
+    };
+    map3d.addEventListener("gmp-steadychange", handler);
+    return () => map3d.removeEventListener("gmp-steadychange", handler);
+  }, [map3d, onSteadyChange]);
+  useMap3DEvent(map3d, "gmp-animationend", onAnimationEnd, (map3d2, type) => ({
+    type,
+    map3d: map3d2
+  }));
+  useMap3DEvent(map3d, "gmp-error", onError, (map3d2, type) => ({
+    type,
+    map3d: map3d2
+  }));
+}
+function useMap3DEvent(map3d, eventName, handler, createEvent) {
+  useEffect(() => {
+    if (!map3d || !handler)
+      return;
+    const listener = () => {
+      handler(createEvent(map3d, eventName));
+    };
+    map3d.addEventListener(eventName, listener);
+    return () => map3d.removeEventListener(eventName, listener);
+  }, [map3d, eventName, handler, createEvent]);
+}
+function useMemoized(value, isEqual) {
+  const ref = useRef(value);
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function useCustomCompareEffect(effect, dependencies, isEqual) {
+  useEffect(effect, [useMemoized(dependencies, isEqual)]);
+}
+const { getOwnPropertyNames, getOwnPropertySymbols } = Object;
+const { hasOwnProperty } = Object.prototype;
+function combineComparators(comparatorA, comparatorB) {
+  return function isEqual(a, b, state) {
+    return comparatorA(a, b, state) && comparatorB(a, b, state);
+  };
+}
+function createIsCircular(areItemsEqual) {
+  return function isCircular(a, b, state) {
+    if (!a || !b || typeof a !== "object" || typeof b !== "object") {
+      return areItemsEqual(a, b, state);
+    }
+    const { cache } = state;
+    const cachedA = cache.get(a);
+    const cachedB = cache.get(b);
+    if (cachedA && cachedB) {
+      return cachedA === b && cachedB === a;
+    }
+    cache.set(a, b);
+    cache.set(b, a);
+    const result = areItemsEqual(a, b, state);
+    cache.delete(a);
+    cache.delete(b);
+    return result;
+  };
+}
+function getStrictProperties(object) {
+  const symbols = getOwnPropertySymbols(object);
+  return symbols.length ? getOwnPropertyNames(object).concat(symbols) : getOwnPropertyNames(object);
+}
+const hasOwn$1 = (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  Object.hasOwn || ((object, property) => hasOwnProperty.call(object, property))
+);
+const PREACT_VNODE = "__v";
+const PREACT_OWNER = "__o";
+const REACT_OWNER = "_owner";
+const HAS_FLOAT_16_ARRAY = typeof Float16Array !== "undefined";
+const { getOwnPropertyDescriptor, keys } = Object;
+const sameValueEqual = (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  Object.is || function sameValueEqual2(a, b) {
+    return a === b ? a !== 0 || 1 / a === 1 / b : a !== a && b !== b;
+  }
+);
+function strictEqual(a, b) {
+  return a === b;
+}
+function areArrayBuffersEqual(a, b) {
+  return a.byteLength === b.byteLength && areTypedArraysEqual(new Uint8Array(a), new Uint8Array(b));
+}
+function areArraysEqual(a, b, state) {
+  let index = a.length;
+  if (b.length !== index) {
+    return false;
+  }
+  while (index-- > 0) {
+    if (!state.equals(a[index], b[index], index, index, a, b, state)) {
+      return false;
+    }
+  }
+  return true;
+}
+function areDataViewsEqual(a, b) {
+  return a.byteLength === b.byteLength && areTypedArraysEqual(new Uint8Array(a.buffer, a.byteOffset, a.byteLength), new Uint8Array(b.buffer, b.byteOffset, b.byteLength));
+}
+function areDatesEqual(a, b) {
+  return sameValueEqual(a.getTime(), b.getTime());
+}
+function areErrorsEqual(a, b, state) {
+  return a.name === b.name && a.message === b.message && a.stack === b.stack && state.equals(a.cause, b.cause, "cause", "cause", a, b, state);
+}
+function areMapsEqual(a, b, state) {
+  const size = a.size;
+  if (size !== b.size) {
+    return false;
+  }
+  if (!size) {
+    return true;
+  }
+  const matchedIndices = new Uint8Array(size);
+  const aIterable = a.entries();
+  let aResult;
+  let bResult;
+  let index = 0;
+  while (aResult = aIterable.next()) {
+    if (aResult.done) {
+      break;
+    }
+    const bIterable = b.entries();
+    let hasMatch = 0;
+    let matchIndex = 0;
+    while (bResult = bIterable.next()) {
+      if (bResult.done) {
+        break;
       }
-      if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-      if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-      if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-      keys = Object.keys(a);
-      length = keys.length;
-      if (length !== Object.keys(b).length) return false;
-      for (i = length; i-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-      for (i = length; i-- !== 0; ) {
-        var key = keys[i];
-        if (!equal(a[key], b[key])) return false;
+      if (matchedIndices[matchIndex]) {
+        matchIndex++;
+        continue;
       }
+      const aEntry = aResult.value;
+      const bEntry = bResult.value;
+      if (state.equals(aEntry[0], bEntry[0], index, matchIndex, a, b, state) && state.equals(aEntry[1], bEntry[1], aEntry[0], bEntry[0], a, b, state)) {
+        hasMatch = matchedIndices[matchIndex] = 1;
+        break;
+      }
+      matchIndex++;
+    }
+    if (!hasMatch) {
+      return false;
+    }
+    index++;
+  }
+  return true;
+}
+function areObjectsEqual(a, b, state) {
+  const properties = keys(a);
+  let index = properties.length;
+  if (keys(b).length !== index) {
+    return false;
+  }
+  while (index-- > 0) {
+    if (!isPropertyEqual(a, b, state, properties[index])) {
+      return false;
+    }
+  }
+  return true;
+}
+function areObjectsEqualStrict(a, b, state) {
+  const properties = getStrictProperties(a);
+  let index = properties.length;
+  if (getStrictProperties(b).length !== index) {
+    return false;
+  }
+  let property;
+  let descriptorA;
+  let descriptorB;
+  while (index-- > 0) {
+    property = properties[index];
+    if (!isPropertyEqual(a, b, state, property)) {
+      return false;
+    }
+    descriptorA = getOwnPropertyDescriptor(a, property);
+    descriptorB = getOwnPropertyDescriptor(b, property);
+    if ((descriptorA || descriptorB) && (!descriptorA || !descriptorB || descriptorA.configurable !== descriptorB.configurable || descriptorA.enumerable !== descriptorB.enumerable || descriptorA.writable !== descriptorB.writable)) {
+      return false;
+    }
+  }
+  return true;
+}
+function arePrimitiveWrappersEqual(a, b) {
+  return sameValueEqual(a.valueOf(), b.valueOf());
+}
+function areRegExpsEqual(a, b) {
+  return a.source === b.source && a.flags === b.flags;
+}
+function areSetsEqual(a, b, state) {
+  const size = a.size;
+  if (size !== b.size) {
+    return false;
+  }
+  if (!size) {
+    return true;
+  }
+  const matchedIndices = new Uint8Array(size);
+  const aIterable = a.values();
+  let aResult;
+  let bResult;
+  while (aResult = aIterable.next()) {
+    if (aResult.done) {
+      break;
+    }
+    const bIterable = b.values();
+    let hasMatch = 0;
+    let matchIndex = 0;
+    while (bResult = bIterable.next()) {
+      if (bResult.done) {
+        break;
+      }
+      if (!matchedIndices[matchIndex] && state.equals(aResult.value, bResult.value, aResult.value, bResult.value, a, b, state)) {
+        hasMatch = matchedIndices[matchIndex] = 1;
+        break;
+      }
+      matchIndex++;
+    }
+    if (!hasMatch) {
+      return false;
+    }
+  }
+  return true;
+}
+function areTypedArraysEqual(a, b) {
+  let index = a.length;
+  if (b.length !== index || a.byteOffset !== b.byteOffset) {
+    return false;
+  }
+  if (a instanceof Float64Array || a instanceof Float32Array || HAS_FLOAT_16_ARRAY && a instanceof Float16Array) {
+    while (index-- > 0) {
+      if (a[index] !== b[index] && (a[index] === a[index] || b[index] === b[index])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  while (index-- > 0) {
+    if (a[index] !== b[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+function areUrlsEqual(a, b) {
+  if (a.href === b.href) {
+    return true;
+  }
+  return a.protocol === b.protocol && a.username === b.username && a.password === b.password && a.host === b.host && a.pathname === b.pathname && a.hash === b.hash && areSearchParamsEqual(a.searchParams, b.searchParams);
+}
+function areSearchParamsEqual(a, b) {
+  const serializedA = a.toString();
+  const serializedB = b.toString();
+  return serializedA === serializedB || sortSearchParams(serializedA) === sortSearchParams(serializedB);
+}
+function sortSearchParams(serialized) {
+  return serialized.split("&").sort().join("&");
+}
+function isPropertyEqual(a, b, state, property) {
+  if ((property === REACT_OWNER || property === PREACT_OWNER || property === PREACT_VNODE) && (a.$$typeof || b.$$typeof)) {
+    return true;
+  }
+  return hasOwn$1(b, property) && state.equals(a[property], b[property], property, property, a, b, state);
+}
+const toString = Object.prototype.toString;
+function createEqualityComparator(config) {
+  const supportedComparatorMap = createSupportedComparatorMap(config);
+  const { areArraysEqual: areArraysEqual2, areDatesEqual: areDatesEqual2, areFunctionsEqual, areMapsEqual: areMapsEqual2, areNumbersEqual, areObjectsEqual: areObjectsEqual2, areRegExpsEqual: areRegExpsEqual2, areSetsEqual: areSetsEqual2, getUnsupportedCustomComparator } = config;
+  return function comparator(a, b, state) {
+    if (a === b) {
       return true;
     }
-    return a !== a && b !== b;
+    if (a == null || b == null) {
+      return false;
+    }
+    const type = typeof a;
+    if (type !== typeof b) {
+      return false;
+    }
+    if (type !== "object") {
+      if (type === "number" || type === "bigint") {
+        return areNumbersEqual(a, b, state);
+      }
+      if (type === "function") {
+        return areFunctionsEqual(a, b, state);
+      }
+      return false;
+    }
+    const constructor = a.constructor;
+    if (constructor !== b.constructor) {
+      return false;
+    }
+    if (constructor === Object) {
+      return areObjectsEqual2(a, b, state);
+    }
+    if (constructor === Array) {
+      return areArraysEqual2(a, b, state);
+    }
+    if (constructor === Date) {
+      return areDatesEqual2(a, b, state);
+    }
+    if (constructor === RegExp) {
+      return areRegExpsEqual2(a, b, state);
+    }
+    if (constructor === Map) {
+      return areMapsEqual2(a, b, state);
+    }
+    if (constructor === Set) {
+      return areSetsEqual2(a, b, state);
+    }
+    if (constructor === Promise) {
+      return false;
+    }
+    if (Array.isArray(a)) {
+      return areArraysEqual2(a, b, state);
+    }
+    const tag = toString.call(a);
+    const supportedComparator = supportedComparatorMap[tag];
+    if (supportedComparator) {
+      return supportedComparator(a, b, state);
+    }
+    const unsupportedCustomComparator = getUnsupportedCustomComparator && getUnsupportedCustomComparator(a, b, state, tag);
+    if (unsupportedCustomComparator) {
+      return unsupportedCustomComparator(a, b, state);
+    }
+    return false;
   };
-  return fastDeepEqual;
 }
-var fastDeepEqualExports = requireFastDeepEqual();
-const isDeepEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+function createEqualityComparatorConfig({ circular, createCustomConfig, strict }) {
+  let config = {
+    areArrayBuffersEqual,
+    areArraysEqual: strict ? areObjectsEqualStrict : areArraysEqual,
+    areDataViewsEqual,
+    areDatesEqual,
+    // `Error` subclasses routinely carry their own enumerable properties (`status`, `code`, ...),
+    // which the error comparator alone does not see, so it is composed with the object comparator.
+    // `name` / `message` / `stack` are own but not enumerable, which is why errors need a
+    // comparator of their own rather than being treated as plain objects in the first place.
+    areErrorsEqual: strict ? combineComparators(areErrorsEqual, areObjectsEqualStrict) : combineComparators(areErrorsEqual, areObjectsEqual),
+    areFunctionsEqual: strictEqual,
+    areMapsEqual: strict ? combineComparators(areMapsEqual, areObjectsEqualStrict) : areMapsEqual,
+    areNumbersEqual: sameValueEqual,
+    areObjectsEqual: strict ? areObjectsEqualStrict : areObjectsEqual,
+    arePrimitiveWrappersEqual,
+    areRegExpsEqual,
+    areSetsEqual: strict ? combineComparators(areSetsEqual, areObjectsEqualStrict) : areSetsEqual,
+    areTypedArraysEqual: strict ? combineComparators(areTypedArraysEqual, areObjectsEqualStrict) : areTypedArraysEqual,
+    areUrlsEqual,
+    getUnsupportedCustomComparator: void 0
+  };
+  if (createCustomConfig) {
+    config = Object.assign({}, config, createCustomConfig(config));
+  }
+  if (circular) {
+    const areArraysEqual2 = createIsCircular(config.areArraysEqual);
+    const areErrorsEqual2 = createIsCircular(config.areErrorsEqual);
+    const areMapsEqual2 = createIsCircular(config.areMapsEqual);
+    const areObjectsEqual2 = createIsCircular(config.areObjectsEqual);
+    const areSetsEqual2 = createIsCircular(config.areSetsEqual);
+    config = Object.assign({}, config, {
+      areArraysEqual: areArraysEqual2,
+      areErrorsEqual: areErrorsEqual2,
+      areMapsEqual: areMapsEqual2,
+      areObjectsEqual: areObjectsEqual2,
+      areSetsEqual: areSetsEqual2
+    });
+  }
+  return config;
+}
+function createInternalEqualityComparator(compare) {
+  return function(a, b, _indexOrKeyA, _indexOrKeyB, _parentA, _parentB, state) {
+    return compare(a, b, state);
+  };
+}
+function createIsEqual({ circular, comparator, createState, equals, strict }) {
+  if (createState) {
+    return function isEqual(a, b) {
+      const { cache = circular ? /* @__PURE__ */ new WeakMap() : void 0, meta } = createState();
+      return comparator(a, b, {
+        cache,
+        equals,
+        meta,
+        strict
+      });
+    };
+  }
+  if (circular) {
+    return function isEqual(a, b) {
+      return comparator(a, b, {
+        cache: /* @__PURE__ */ new WeakMap(),
+        equals,
+        meta: void 0,
+        strict
+      });
+    };
+  }
+  const state = {
+    cache: void 0,
+    equals,
+    meta: void 0,
+    strict
+  };
+  return function isEqual(a, b) {
+    return comparator(a, b, state);
+  };
+}
+function createSupportedComparatorMap({ areArrayBuffersEqual: areArrayBuffersEqual2, areArraysEqual: areArraysEqual2, areDataViewsEqual: areDataViewsEqual2, areDatesEqual: areDatesEqual2, areErrorsEqual: areErrorsEqual2, areFunctionsEqual, areMapsEqual: areMapsEqual2, areObjectsEqual: areObjectsEqual2, arePrimitiveWrappersEqual: arePrimitiveWrappersEqual2, areRegExpsEqual: areRegExpsEqual2, areSetsEqual: areSetsEqual2, areTypedArraysEqual: areTypedArraysEqual2, areUrlsEqual: areUrlsEqual2 }) {
+  return {
+    "[object Arguments]": areObjectsEqual2,
+    "[object Array]": areArraysEqual2,
+    "[object ArrayBuffer]": areArrayBuffersEqual2,
+    "[object AsyncGeneratorFunction]": areFunctionsEqual,
+    "[object BigInt]": arePrimitiveWrappersEqual2,
+    "[object BigInt64Array]": areTypedArraysEqual2,
+    "[object BigUint64Array]": areTypedArraysEqual2,
+    "[object Boolean]": arePrimitiveWrappersEqual2,
+    "[object DataView]": areDataViewsEqual2,
+    "[object Date]": areDatesEqual2,
+    // If an error tag, it should be tested explicitly. Like RegExp, the properties are not
+    // enumerable, and therefore will give false positives if tested like a standard object.
+    "[object Error]": areErrorsEqual2,
+    "[object Float16Array]": areTypedArraysEqual2,
+    "[object Float32Array]": areTypedArraysEqual2,
+    "[object Float64Array]": areTypedArraysEqual2,
+    "[object Function]": areFunctionsEqual,
+    "[object GeneratorFunction]": areFunctionsEqual,
+    "[object Int8Array]": areTypedArraysEqual2,
+    "[object Int16Array]": areTypedArraysEqual2,
+    "[object Int32Array]": areTypedArraysEqual2,
+    "[object Map]": areMapsEqual2,
+    "[object Number]": arePrimitiveWrappersEqual2,
+    "[object Object]": (a, b, state) => (
+      // The exception for value comparison is custom `Promise`-like class instances. These should
+      // be treated the same as standard `Promise` objects, which means strict equality, and if
+      // it reaches this point then that strict equality comparison has already failed.
+      typeof a.then !== "function" && typeof b.then !== "function" && areObjectsEqual2(a, b, state)
+    ),
+    // For RegExp, the properties are not enumerable, and therefore will give false positives if
+    // tested like a standard object.
+    "[object RegExp]": areRegExpsEqual2,
+    "[object Set]": areSetsEqual2,
+    "[object String]": arePrimitiveWrappersEqual2,
+    "[object URL]": areUrlsEqual2,
+    "[object Uint8Array]": areTypedArraysEqual2,
+    "[object Uint8ClampedArray]": areTypedArraysEqual2,
+    "[object Uint16Array]": areTypedArraysEqual2,
+    "[object Uint32Array]": areTypedArraysEqual2
+  };
+}
+const deepEqual = createCustomEqual();
+createCustomEqual({ strict: true });
+createCustomEqual({ circular: true });
+createCustomEqual({
+  circular: true,
+  strict: true
+});
+createCustomEqual({
+  createInternalComparator: () => sameValueEqual
+});
+createCustomEqual({
+  strict: true,
+  createInternalComparator: () => sameValueEqual
+});
+createCustomEqual({
+  circular: true,
+  createInternalComparator: () => sameValueEqual
+});
+createCustomEqual({
+  circular: true,
+  createInternalComparator: () => sameValueEqual,
+  strict: true
+});
+function createCustomEqual(options = {}) {
+  const { circular = false, createInternalComparator: createCustomInternalComparator, createState, strict = false } = options;
+  const config = createEqualityComparatorConfig(options);
+  const comparator = createEqualityComparator(config);
+  const equals = createCustomInternalComparator ? createCustomInternalComparator(comparator) : createInternalEqualityComparator(comparator);
+  return createIsEqual({ circular, comparator, createState, equals, strict });
+}
+function useDeepCompareEffect(effect, dependencies) {
+  useCustomCompareEffect(effect, dependencies, deepEqual);
+}
+const MAP_3D_OPTION_KEYS = /* @__PURE__ */ new Set([
+  "bounds",
+  "defaultUIHidden",
+  "gestureHandling",
+  "internalUsageAttributionIds",
+  "maxAltitude",
+  "maxHeading",
+  "maxTilt",
+  "minAltitude",
+  "minHeading",
+  "minTilt",
+  "mode"
+]);
+function useMap3DOptions(map3d, props) {
+  const options = useMemo(() => {
+    const result = {};
+    const keys2 = Object.keys(props);
+    for (const key of keys2) {
+      if (!MAP_3D_OPTION_KEYS.has(key))
+        continue;
+      const value = props[key];
+      if (value === void 0)
+        continue;
+      result[key] = value;
     }
-    return n;
-  }, _extends.apply(null, arguments);
+    return result;
+  }, [props]);
+  useDeepCompareEffect(() => {
+    if (!map3d)
+      return;
+    Object.assign(map3d, options);
+  }, [map3d, options]);
 }
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+const GoogleMaps3DContext = React__default.createContext(null);
+const DEFAULT_CONTAINER_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "relative"
+};
+const Map3D = forwardRef((props, ref) => {
+  const { children, id, className, style: style2 } = props;
+  const context = useContext(APIProviderContext);
+  if (!context) {
+    throw new Error("<Map3D> can only be used inside an <APIProvider> component.");
+  }
+  const { addMap3DInstance, removeMap3DInstance } = context;
+  const [map3d, containerRef, map3dRef, cameraStateRef, isReady] = useMap3DInstance(props);
+  useMap3DCameraParams(map3d, cameraStateRef, props);
+  useMap3DEvents(map3d, props);
+  useMap3DOptions(map3d, props);
+  useEffect(() => {
+    if (!map3d)
+      return;
+    const instanceId = id !== null && id !== void 0 ? id : "default";
+    addMap3DInstance(map3d, instanceId);
+    return () => {
+      removeMap3DInstance(instanceId);
+    };
+  }, [map3d, id]);
+  useImperativeHandle(ref, () => ({
+    map3d,
+    flyCameraAround: (options) => {
+      map3d === null || map3d === void 0 ? void 0 : map3d.flyCameraAround(options);
+    },
+    flyCameraTo: (options) => {
+      map3d === null || map3d === void 0 ? void 0 : map3d.flyCameraTo(options);
+    },
+    stopCameraAnimation: () => {
+      map3d === null || map3d === void 0 ? void 0 : map3d.stopCameraAnimation();
+    }
+  }), [map3d]);
+  const combinedStyle = useMemo(() => Object.assign(Object.assign({}, DEFAULT_CONTAINER_STYLE), style2), [style2]);
+  const contextValue = useMemo(() => ({ map3d }), [map3d]);
+  if (!isReady) {
+    return React__default.createElement("div", Object.assign({ ref: containerRef, "data-testid": "map-3d", style: className ? void 0 : combinedStyle, className }, id ? { id } : {}));
+  }
+  return React__default.createElement(
+    "div",
+    Object.assign({ ref: containerRef, "data-testid": "map-3d", style: className ? void 0 : combinedStyle, className }, id ? { id } : {}),
+    React__default.createElement("gmp-map-3d", { ref: map3dRef, style: { width: "100%", height: "100%" } }, map3d && React__default.createElement(GoogleMaps3DContext.Provider, { value: contextValue }, children))
+  );
+});
+Map3D.displayName = "Map3D";
+const Marker3DContext = createContext(null);
+const Marker3D = forwardRef(function Marker3D2(props, ref) {
+  const { children, onClick, position, altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, sizePreserved, zIndex, title: title2 } = props;
+  const isInteractive = Boolean(onClick);
+  const [marker, setMarker] = useState(null);
+  const [contentHandledExternally, setContentHandledExternally] = useState(false);
+  const contentContainer = useMemo(() => {
+    const container = document.createElement("div");
+    container.style.display = "none";
+    document.body.appendChild(container);
+    return container;
+  }, []);
+  useEffect(() => {
+    return () => contentContainer.remove();
+  }, [contentContainer]);
+  const markerRef = useCallback((node) => {
+    setMarker(node);
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  useDomEventListener(marker, "gmp-click", onClick);
+  useLayoutEffect(() => {
+    if (contentHandledExternally)
+      return;
+    if (!marker || !contentContainer)
+      return;
+    while (marker.firstChild) {
+      marker.removeChild(marker.firstChild);
+    }
+    const childNodes = Array.from(contentContainer.childNodes);
+    for (const node of childNodes) {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const element = node;
+      const tagName = element.tagName.toLowerCase();
+      if (tagName === "img" || tagName === "svg") {
+        const template = document.createElement("template");
+        template.content.appendChild(element.cloneNode(true));
+        marker.appendChild(template);
+      } else {
+        marker.appendChild(element.cloneNode(true));
+      }
+    }
+  }, [marker, contentContainer, children, contentHandledExternally]);
+  const contextValue = useMemo(() => ({ marker, setContentHandledExternally }), [marker]);
+  usePropBinding(marker, "position", position);
+  usePropBinding(marker, "altitudeMode", altitudeMode);
+  usePropBinding(marker, "collisionBehavior", collisionBehavior);
+  usePropBinding(marker, "drawsWhenOccluded", drawsWhenOccluded);
+  usePropBinding(marker, "extruded", extruded);
+  usePropBinding(marker, "label", label);
+  usePropBinding(marker, "sizePreserved", sizePreserved);
+  usePropBinding(marker, "zIndex", zIndex);
+  usePropBinding(marker, "title", title2 !== null && title2 !== void 0 ? title2 : "");
+  return React__default.createElement(
+    Marker3DContext.Provider,
+    { value: contextValue },
+    isInteractive ? React__default.createElement("gmp-marker-3d-interactive", { ref: markerRef }) : React__default.createElement("gmp-marker-3d", { ref: markerRef }),
+    createPortal(children, contentContainer)
+  );
+});
+Marker3D.displayName = "Marker3D";
+function setValueForStyles(element, styles2, prevStyles) {
+  if (styles2 != null && typeof styles2 !== "object") {
+    throw new Error("The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.");
+  }
+  const elementStyle = element.style;
+  if (prevStyles == null) {
+    if (styles2 == null)
+      return;
+    for (const styleName in styles2) {
+      if (!styles2.hasOwnProperty(styleName))
+        continue;
+      setValueForStyle(elementStyle, styleName, styles2[styleName]);
+    }
+    return;
+  }
+  for (const styleName in prevStyles) {
+    if (prevStyles.hasOwnProperty(styleName) && (styles2 == null || !styles2.hasOwnProperty(styleName))) {
+      const isCustomProperty = styleName.indexOf("--") === 0;
+      if (isCustomProperty) {
+        elementStyle.setProperty(styleName, "");
+      } else if (styleName === "float") {
+        elementStyle.cssFloat = "";
+      } else {
+        elementStyle[styleName] = "";
+      }
+    }
+  }
+  if (styles2 == null)
+    return;
+  for (const styleName in styles2) {
+    const value = styles2[styleName];
+    if (styles2.hasOwnProperty(styleName) && prevStyles[styleName] !== value) {
+      setValueForStyle(elementStyle, styleName, value);
+    }
   }
-  return t;
 }
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
+function setValueForStyle(elementStyle, styleName, value) {
+  const isCustomProperty = styleName.indexOf("--") === 0;
+  if (value == null || typeof value === "boolean" || value === "") {
+    if (isCustomProperty) {
+      elementStyle.setProperty(styleName, "");
+    } else if (styleName === "float") {
+      elementStyle.cssFloat = "";
+    } else {
+      elementStyle[styleName] = "";
+    }
+  } else if (isCustomProperty) {
+    elementStyle.setProperty(styleName, value);
+  } else if (typeof value === "number" && value !== 0 && !isUnitlessNumber(styleName)) {
+    elementStyle[styleName] = value + "px";
+  } else {
+    if (styleName === "float") {
+      elementStyle.cssFloat = value;
+    } else {
+      elementStyle[styleName] = ("" + value).trim();
+    }
   }
-  return String(t);
 }
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
+const unitlessNumbers = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  // SVG-related properties
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth"
+]);
+function isUnitlessNumber(name) {
+  return unitlessNumbers.has(name);
 }
-const APILoadingStatus = {
-  NOT_LOADED: "NOT_LOADED",
-  LOADING: "LOADING",
-  LOADED: "LOADED",
-  FAILED: "FAILED",
-  AUTH_FAILURE: "AUTH_FAILURE"
-};
-const MAPS_API_BASE_URL = "https://maps.googleapis.com/maps/api/js";
-class GoogleMapsApiLoader {
-  /**
-   * Loads the Maps JavaScript API with the specified parameters.
-   * Since the Maps library can only be loaded once per page, this will
-   * produce a warning when called multiple times with different
-   * parameters.
-   *
-   * The returned promise resolves when loading completes
-   * and rejects in case of an error or when the loading was aborted.
-   */
-  static async load(params, onLoadingStatusChange) {
-    var _window$google;
-    const libraries = params.libraries ? params.libraries.split(",") : [];
-    const serializedParams = this.serializeParams(params);
-    this.listeners.push(onLoadingStatusChange);
-    if ((_window$google = window.google) != null && (_window$google = _window$google.maps) != null && _window$google.importLibrary) {
-      if (!this.serializedApiParams) {
-        this.loadingStatus = APILoadingStatus.LOADED;
-      }
-      this.notifyLoadingStatusListeners();
-    } else {
-      this.serializedApiParams = serializedParams;
-      this.initImportLibrary(params);
-    }
-    if (this.serializedApiParams && this.serializedApiParams !== serializedParams) {
-      console.warn(`[google-maps-api-loader] The maps API has already been loaded with different parameters and will not be loaded again. Refresh the page for new values to have effect.`);
-    }
-    const librariesToLoad = ["maps", ...libraries];
-    await Promise.all(librariesToLoad.map((name) => google.maps.importLibrary(name)));
-  }
-  /**
-   * Serialize the parameters used to load the library for easier comparison.
-   */
-  static serializeParams(params) {
-    return [params.v, params.key, params.language, params.region, params.authReferrerPolicy, params.solutionChannel].join("/");
-  }
-  /**
-   * Creates the global `google.maps.importLibrary` function for bootstrapping.
-   * This is essentially a formatted version of the dynamic loading script
-   * from the official documentation with some minor adjustments.
-   *
-   * The created importLibrary function will load the Google Maps JavaScript API,
-   * which will then replace the `google.maps.importLibrary` function with the full
-   * implementation.
-   *
-   * @see https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
-   */
-  static initImportLibrary(params) {
-    if (!window.google) window.google = {};
-    if (!window.google.maps) window.google.maps = {};
-    if (window.google.maps["importLibrary"]) {
-      console.error("[google-maps-api-loader-internal]: initImportLibrary must only be called once");
+const Popover = forwardRef(function Popover2(props, ref) {
+  var _a;
+  const { children, headerContent, style: style2, className, open = true, position, anchor, anchorId, altitudeMode, lightDismissDisabled, autoPanDisabled, onClose } = props;
+  const [popover, setPopover] = useState(null);
+  const prevStyleRef = useRef(null);
+  useImperativeHandle(ref, () => popover, [popover]);
+  usePopoverCloseObserver(popover, open, onClose);
+  usePropBinding(popover, "open", open !== null && open !== void 0 ? open : false);
+  usePropBinding(popover, "altitudeMode", altitudeMode);
+  usePropBinding(popover, "lightDismissDisabled", lightDismissDisabled);
+  usePropBinding(popover, "autoPanDisabled", autoPanDisabled);
+  const positionAnchor = (_a = anchor !== null && anchor !== void 0 ? anchor : anchorId) !== null && _a !== void 0 ? _a : position;
+  usePropBinding(popover, "positionAnchor", positionAnchor);
+  useLayoutEffect(() => {
+    if (!popover)
       return;
-    }
-    let apiPromise = null;
-    const loadApi = () => {
-      if (apiPromise) return apiPromise;
-      apiPromise = new Promise((resolve, reject) => {
-        var _document$querySelect;
-        const scriptElement = document.createElement("script");
-        const urlParams = new URLSearchParams();
-        for (const [key, value] of Object.entries(params)) {
-          const urlParamName = key.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase());
-          urlParams.set(urlParamName, String(value));
+    setValueForStyles(popover, style2 || null, prevStyleRef.current);
+    prevStyleRef.current = style2 || null;
+  }, [popover, style2]);
+  return React__default.createElement(
+    "gmp-popover",
+    { ref: setPopover, className },
+    headerContent && React__default.createElement("div", { slot: "header" }, headerContent),
+    children
+  );
+});
+Popover.displayName = "Popover";
+function usePopoverCloseObserver(popover, open, onClose) {
+  const previousOpenState = useRef(void 0);
+  const openPropRef = useRef(open);
+  useEffect(() => {
+    openPropRef.current = open;
+  }, [open]);
+  useEffect(() => {
+    if (!popover || !onClose)
+      return;
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && mutation.attributeName === "open") {
+          const isOpen = popover.hasAttribute("open");
+          if (previousOpenState.current === true && !isOpen && openPropRef.current !== false) {
+            onClose();
+          }
+          previousOpenState.current = isOpen;
         }
-        urlParams.set("loading", "async");
-        urlParams.set("callback", "__googleMapsCallback__");
-        scriptElement.async = true;
-        scriptElement.src = MAPS_API_BASE_URL + `?` + urlParams.toString();
-        scriptElement.nonce = ((_document$querySelect = document.querySelector("script[nonce]")) == null ? void 0 : _document$querySelect.nonce) || "";
-        scriptElement.onerror = () => {
-          this.loadingStatus = APILoadingStatus.FAILED;
-          this.notifyLoadingStatusListeners();
-          reject(new Error("The Google Maps JavaScript API could not load."));
-        };
-        window.__googleMapsCallback__ = () => {
-          this.loadingStatus = APILoadingStatus.LOADED;
-          this.notifyLoadingStatusListeners();
-          resolve();
-        };
-        window.gm_authFailure = () => {
-          this.loadingStatus = APILoadingStatus.AUTH_FAILURE;
-          this.notifyLoadingStatusListeners();
-        };
-        this.loadingStatus = APILoadingStatus.LOADING;
-        this.notifyLoadingStatusListeners();
-        document.head.append(scriptElement);
-      });
-      return apiPromise;
-    };
-    google.maps.importLibrary = (libraryName) => loadApi().then(() => google.maps.importLibrary(libraryName));
-  }
-  /**
-   * Calls all registered loadingStatusListeners after a status update.
-   */
-  static notifyLoadingStatusListeners() {
-    for (const fn of this.listeners) {
-      fn(this.loadingStatus);
-    }
-  }
-}
-GoogleMapsApiLoader.loadingStatus = APILoadingStatus.NOT_LOADED;
-GoogleMapsApiLoader.serializedApiParams = void 0;
-GoogleMapsApiLoader.listeners = [];
-const _excluded$3 = ["onLoad", "onError", "apiKey", "version", "libraries"], _excluded2$1 = ["children"];
-const DEFAULT_SOLUTION_CHANNEL = "GMP_visgl_rgmlibrary_v1_default";
-const APIProviderContext = React__default.createContext(null);
-function useMapInstances() {
-  const [mapInstances, setMapInstances] = useState({});
-  const addMapInstance = (mapInstance, id = "default") => {
-    setMapInstances((instances) => _extends({}, instances, {
-      [id]: mapInstance
-    }));
-  };
-  const removeMapInstance = (id = "default") => {
-    setMapInstances((_ref) => {
-      let remaining = _objectWithoutPropertiesLoose(_ref, [id].map(_toPropertyKey));
-      return remaining;
-    });
-  };
-  const clearMapInstances = () => {
-    setMapInstances({});
-  };
-  return {
-    mapInstances,
-    addMapInstance,
-    removeMapInstance,
-    clearMapInstances
-  };
-}
-function useGoogleMapsApiLoader(props) {
-  const {
-    onLoad,
-    onError,
-    apiKey,
-    version,
-    libraries = []
-  } = props, otherApiParams = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const [status, setStatus] = useState(GoogleMapsApiLoader.loadingStatus);
-  const [loadedLibraries, addLoadedLibrary] = useReducer((loadedLibraries2, action) => {
-    return loadedLibraries2[action.name] ? loadedLibraries2 : _extends({}, loadedLibraries2, {
-      [action.name]: action.value
+      }
     });
-  }, {});
-  const librariesString = useMemo(() => libraries == null ? void 0 : libraries.join(","), [libraries]);
-  const serializedParams = useMemo(() => JSON.stringify(_extends({
-    apiKey,
-    version
-  }, otherApiParams)), [apiKey, version, otherApiParams]);
-  const importLibrary = useCallback(async (name) => {
-    var _google;
-    if (loadedLibraries[name]) {
-      return loadedLibraries[name];
-    }
-    if (!((_google = google) != null && (_google = _google.maps) != null && _google.importLibrary)) {
-      throw new Error("[api-provider-internal] importLibrary was called before google.maps.importLibrary was defined.");
-    }
-    const res = await window.google.maps.importLibrary(name);
-    addLoadedLibrary({
-      name,
-      value: res
+    observer.observe(popover, {
+      attributes: true,
+      attributeFilter: ["open"]
     });
-    return res;
-  }, [loadedLibraries]);
-  useEffect(
-    () => {
-      (async () => {
-        try {
-          const params = _extends({
-            key: apiKey
-          }, otherApiParams);
-          if (version) params.v = version;
-          if ((librariesString == null ? void 0 : librariesString.length) > 0) params.libraries = librariesString;
-          if (params.channel === void 0 || params.channel < 0 || params.channel > 999) delete params.channel;
-          if (params.solutionChannel === void 0) params.solutionChannel = DEFAULT_SOLUTION_CHANNEL;
-          else if (params.solutionChannel === "") delete params.solutionChannel;
-          await GoogleMapsApiLoader.load(params, (status2) => setStatus(status2));
-          for (const name of ["core", "maps", ...libraries]) {
-            await importLibrary(name);
-          }
-          if (onLoad) {
-            onLoad();
-          }
-        } catch (error) {
-          if (onError) {
-            onError(error);
-          } else {
-            console.error("<ApiProvider> failed to load the Google Maps JavaScript API", error);
-          }
-        }
-      })();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [apiKey, librariesString, serializedParams]
-  );
-  return {
-    status,
-    loadedLibraries,
-    importLibrary
-  };
+    previousOpenState.current = popover.hasAttribute("open");
+    return () => {
+      observer.disconnect();
+    };
+  }, [popover, onClose]);
+}
+const shownMessages = /* @__PURE__ */ new Set();
+function logErrorOnce(...args) {
+  const key = JSON.stringify(args);
+  if (!shownMessages.has(key)) {
+    shownMessages.add(key);
+    console.error(...args);
+  }
 }
-const APIProvider = (props) => {
-  const {
-    children
-  } = props, loaderProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
-  const {
-    mapInstances,
-    addMapInstance,
-    removeMapInstance,
-    clearMapInstances
-  } = useMapInstances();
-  const {
-    status,
-    loadedLibraries,
-    importLibrary
-  } = useGoogleMapsApiLoader(loaderProps);
-  const contextValue = useMemo(() => ({
-    mapInstances,
-    addMapInstance,
-    removeMapInstance,
-    clearMapInstances,
-    status,
-    loadedLibraries,
-    importLibrary
-  }), [mapInstances, addMapInstance, removeMapInstance, clearMapInstances, status, loadedLibraries, importLibrary]);
-  return /* @__PURE__ */ React__default.createElement(APIProviderContext.Provider, {
-    value: contextValue
-  }, children);
-};
 function useMapEvents(map, props) {
   for (const propName of eventPropNames) {
     const handler = props[propName];
     const eventType = propNameToEventType[propName];
     useEffect(() => {
-      if (!map) return;
-      if (!handler) return;
+      if (!map)
+        return;
+      if (!handler)
+        return;
       const listener = google.maps.event.addListener(map, eventType, (ev) => {
-        handler(createMapEvent(eventType, map, ev));
+        const mapEvent = createMapEvent(eventType, map, ev);
+        if (mapEvent)
+          handler(mapEvent);
       });
       return () => listener.remove();
     }, [map, eventType, handler]);
   }
 }
 function createMapEvent(type, map, srcEvent) {
+  var _a;
   const ev = {
     type,
     map,
@@ -414,32 +1613,25 @@ function createMapEvent(type, map, srcEvent) {
     const bounds = map.getBounds();
     if (!center || !bounds || !Number.isFinite(zoom)) {
       console.warn("[createEvent] at least one of the values from the map returned undefined. This is not expected to happen. Please report an issue at https://github.com/visgl/react-google-maps/issues/new");
+      return null;
     }
     camEvent.detail = {
-      center: (center == null ? void 0 : center.toJSON()) || {
-        lat: 0,
-        lng: 0
-      },
-      zoom: zoom || 0,
+      center: center.toJSON(),
+      zoom,
       heading,
       tilt,
-      bounds: (bounds == null ? void 0 : bounds.toJSON()) || {
-        north: 90,
-        east: 180,
-        south: -90,
-        west: -180
-      }
+      bounds: bounds.toJSON()
     };
     return camEvent;
   } else if (mouseEventTypes.includes(type)) {
-    var _srcEvent$latLng;
-    if (!srcEvent) throw new Error("[createEvent] mouse events must provide a srcEvent");
+    if (!srcEvent)
+      throw new Error("[createEvent] mouse events must provide a srcEvent");
     const mouseEvent = ev;
     mouseEvent.domEvent = srcEvent.domEvent;
     mouseEvent.stoppable = true;
     mouseEvent.stop = () => srcEvent.stop();
     mouseEvent.detail = {
-      latLng: ((_srcEvent$latLng = srcEvent.latLng) == null ? void 0 : _srcEvent$latLng.toJSON()) || null,
+      latLng: ((_a = srcEvent.latLng) === null || _a === void 0 ? void 0 : _a.toJSON()) || null,
       placeId: srcEvent.placeId
     };
     return mouseEvent;
@@ -473,53 +1665,82 @@ const propNameToEventType = {
   // updated.
   onCameraChanged: "bounds_changed"
 };
-const cameraEventTypes = ["bounds_changed", "center_changed", "heading_changed", "tilt_changed", "zoom_changed"];
-const mouseEventTypes = ["click", "contextmenu", "dblclick", "mousemove", "mouseout", "mouseover"];
+const cameraEventTypes = [
+  "bounds_changed",
+  "center_changed",
+  "heading_changed",
+  "tilt_changed",
+  "zoom_changed"
+];
+const mouseEventTypes = [
+  "click",
+  "contextmenu",
+  "dblclick",
+  "mousemove",
+  "mouseout",
+  "mouseover"
+];
 const eventPropNames = Object.keys(propNameToEventType);
-function useDeepCompareEffect(effect, deps) {
-  const ref = useRef(void 0);
-  if (!ref.current || !isDeepEqual(deps, ref.current)) {
-    ref.current = deps;
-  }
-  useEffect(effect, ref.current);
-}
-const mapOptionKeys = /* @__PURE__ */ new Set(["backgroundColor", "clickableIcons", "controlSize", "disableDefaultUI", "disableDoubleClickZoom", "draggable", "draggableCursor", "draggingCursor", "fullscreenControl", "fullscreenControlOptions", "gestureHandling", "headingInteractionEnabled", "isFractionalZoomEnabled", "keyboardShortcuts", "mapTypeControl", "mapTypeControlOptions", "mapTypeId", "maxZoom", "minZoom", "noClear", "panControl", "panControlOptions", "restriction", "rotateControl", "rotateControlOptions", "scaleControl", "scaleControlOptions", "scrollwheel", "streetView", "streetViewControl", "streetViewControlOptions", "styles", "tiltInteractionEnabled", "zoomControl", "zoomControlOptions"]);
+const mapOptionKeys = /* @__PURE__ */ new Set([
+  "backgroundColor",
+  "clickableIcons",
+  "controlSize",
+  "disableDefaultUI",
+  "disableDoubleClickZoom",
+  "draggable",
+  "draggableCursor",
+  "draggingCursor",
+  "fullscreenControl",
+  "fullscreenControlOptions",
+  "gestureHandling",
+  "headingInteractionEnabled",
+  "isFractionalZoomEnabled",
+  "keyboardShortcuts",
+  "mapTypeControl",
+  "mapTypeControlOptions",
+  "mapTypeId",
+  "maxZoom",
+  "minZoom",
+  "noClear",
+  "panControl",
+  "panControlOptions",
+  "restriction",
+  "rotateControl",
+  "rotateControlOptions",
+  "scaleControl",
+  "scaleControlOptions",
+  "scrollwheel",
+  "streetView",
+  "streetViewControl",
+  "streetViewControlOptions",
+  "styles",
+  "tiltInteractionEnabled",
+  "zoomControl",
+  "zoomControlOptions"
+]);
 function useMapOptions(map, mapProps) {
   const mapOptions = {};
-  const keys = Object.keys(mapProps);
-  for (const key of keys) {
-    if (!mapOptionKeys.has(key)) continue;
+  const keys2 = Object.keys(mapProps);
+  for (const key of keys2) {
+    if (!mapOptionKeys.has(key))
+      continue;
     mapOptions[key] = mapProps[key];
   }
   useDeepCompareEffect(() => {
-    if (!map) return;
+    if (!map)
+      return;
     map.setOptions(mapOptions);
   }, [mapOptions]);
 }
-function useApiLoadingStatus() {
-  var _useContext;
-  return ((_useContext = useContext(APIProviderContext)) == null ? void 0 : _useContext.status) || APILoadingStatus.NOT_LOADED;
-}
 function useDeckGLCameraUpdate(map, props) {
-  const {
-    viewport,
-    viewState
-  } = props;
+  const { viewport, viewState } = props;
   const isDeckGlControlled = !!viewport;
   useLayoutEffect(() => {
-    if (!map || !viewState) return;
-    const {
-      latitude,
-      longitude,
-      bearing: heading,
-      pitch: tilt,
-      zoom
-    } = viewState;
+    if (!map || !viewState)
+      return;
+    const { latitude, longitude, bearing: heading, pitch: tilt, zoom } = viewState;
     map.moveCamera({
-      center: {
-        lat: latitude,
-        lng: longitude
-      },
+      center: { lat: latitude, lng: longitude },
       heading,
       tilt,
       zoom: zoom + 1
@@ -528,14 +1749,70 @@ function useDeckGLCameraUpdate(map, props) {
   return isDeckGlControlled;
 }
 function isLatLngLiteral(obj) {
-  if (!obj || typeof obj !== "object") return false;
-  if (!("lat" in obj && "lng" in obj)) return false;
+  if (!obj || typeof obj !== "object")
+    return false;
+  if (!("lat" in obj && "lng" in obj))
+    return false;
   return Number.isFinite(obj.lat) && Number.isFinite(obj.lng);
 }
+function latLngEquals(a, b) {
+  if (!a || !b)
+    return false;
+  const A = toLatLngLiteral(a);
+  const B = toLatLngLiteral(b);
+  if (A.lat !== B.lat || A.lng !== B.lng)
+    return false;
+  return true;
+}
 function toLatLngLiteral(obj) {
-  if (isLatLngLiteral(obj)) return obj;
+  if (isLatLngLiteral(obj))
+    return obj;
   return obj.toJSON();
 }
+function toLatLngBoundsLiteral(obj) {
+  if ("north" in obj && "south" in obj && "east" in obj && "west" in obj) {
+    return obj;
+  }
+  const ne = obj.getNorthEast().toJSON();
+  const sw = obj.getSouthWest().toJSON();
+  return {
+    north: ne.lat,
+    east: ne.lng,
+    south: sw.lat,
+    west: sw.lng
+  };
+}
+function boundsEquals(a, b) {
+  if (!a || !b)
+    return false;
+  const A = toLatLngBoundsLiteral(a);
+  const B = toLatLngBoundsLiteral(b);
+  return A.north === B.north && A.south === B.south && A.east === B.east && A.west === B.west;
+}
+function pathEquals(a, b) {
+  if (!a || !b)
+    return a === b;
+  const arrayB = "getArray" in b ? b.getArray() : b;
+  if (a.length !== arrayB.length)
+    return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!latLngEquals(a[i], arrayB[i]))
+      return false;
+  }
+  return true;
+}
+function pathsEquals(a, b) {
+  if (!a || !b)
+    return a === b;
+  const arrayB = "getArray" in b ? b.getArray().map((inner) => inner.getArray()) : b;
+  if (a.length !== arrayB.length)
+    return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!pathEquals(a[i], arrayB[i]))
+      return false;
+  }
+  return true;
+}
 function useMapCameraParams(map, cameraStateRef, mapProps) {
   const center = mapProps.center ? toLatLngLiteral(mapProps.center) : null;
   let lat = null;
@@ -548,14 +1825,12 @@ function useMapCameraParams(map, cameraStateRef, mapProps) {
   const heading = Number.isFinite(mapProps.heading) ? mapProps.heading : null;
   const tilt = Number.isFinite(mapProps.tilt) ? mapProps.tilt : null;
   useLayoutEffect(() => {
-    if (!map) return;
+    if (!map)
+      return;
     const nextCamera = {};
     let needsUpdate = false;
     if (lat !== null && lng !== null && (cameraStateRef.current.center.lat !== lat || cameraStateRef.current.center.lng !== lng)) {
-      nextCamera.center = {
-        lat,
-        lng
-      };
+      nextCamera.center = { lat, lng };
       needsUpdate = true;
     }
     if (zoom !== null && cameraStateRef.current.zoom !== zoom) {
@@ -592,38 +1867,31 @@ const AuthFailureMessage = () => {
     background: "#dddddd",
     padding: "1rem 1.5rem"
   };
-  return /* @__PURE__ */ React__default.createElement("div", {
-    style: style2
-  }, /* @__PURE__ */ React__default.createElement("h2", null, "Error: AuthFailure"), /* @__PURE__ */ React__default.createElement("p", null, "A problem with your API key prevents the map from rendering correctly. Please make sure the value of the ", /* @__PURE__ */ React__default.createElement("code", null, "APIProvider.apiKey"), " prop is correct. Check the error-message in the console for further details."));
+  return React__default.createElement(
+    "div",
+    { style: style2 },
+    React__default.createElement("h2", null, "Error: AuthFailure"),
+    React__default.createElement(
+      "p",
+      null,
+      "A problem with your API key prevents the map from rendering correctly. Please make sure the value of the ",
+      React__default.createElement("code", null, "APIProvider.apiKey"),
+      " prop is correct. Check the error-message in the console for further details."
+    )
+  );
 };
-function useCallbackRef() {
-  const [el, setEl] = useState(null);
-  const ref = useCallback((value) => setEl(value), [setEl]);
-  return [el, ref];
-}
-function useApiIsLoaded() {
-  const status = useApiLoadingStatus();
-  return status === APILoadingStatus.LOADED;
-}
-function useForceUpdate() {
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-  return forceUpdate;
-}
 function handleBoundsChange(map, ref) {
   const center = map.getCenter();
   const zoom = map.getZoom();
   const heading = map.getHeading() || 0;
   const tilt = map.getTilt() || 0;
-  const bounds = map.getBounds();
-  if (!center || !bounds || !Number.isFinite(zoom)) {
+  if (!center || !Number.isFinite(zoom)) {
     console.warn("[useTrackedCameraState] at least one of the values from the map returned undefined. This is not expected to happen. Please report an issue at https://github.com/visgl/react-google-maps/issues/new");
+    return;
   }
   Object.assign(ref.current, {
-    center: (center == null ? void 0 : center.toJSON()) || {
-      lat: 0,
-      lng: 0
-    },
-    zoom: zoom || 0,
+    center: center.toJSON(),
+    zoom,
     heading,
     tilt
   });
@@ -631,16 +1899,14 @@ function handleBoundsChange(map, ref) {
 function useTrackedCameraStateRef(map) {
   const forceUpdate = useForceUpdate();
   const ref = useRef({
-    center: {
-      lat: 0,
-      lng: 0
-    },
+    center: { lat: 0, lng: 0 },
     heading: 0,
     tilt: 0,
     zoom: 0
   });
   useEffect(() => {
-    if (!map) return;
+    if (!map)
+      return;
     const listener = google.maps.event.addListener(map, "bounds_changed", () => {
       handleBoundsChange(map, ref);
       forceUpdate();
@@ -649,17 +1915,18 @@ function useTrackedCameraStateRef(map) {
   }, [map, forceUpdate]);
   return ref;
 }
-const _excluded$2 = ["id", "defaultBounds", "defaultCenter", "defaultZoom", "defaultHeading", "defaultTilt", "reuseMaps", "renderingType", "colorScheme"], _excluded2 = ["padding"];
 class CachedMapStack {
   static has(key) {
     return this.entries[key] && this.entries[key].length > 0;
   }
   static pop(key) {
-    if (!this.entries[key]) return null;
+    if (!this.entries[key])
+      return null;
     return this.entries[key].pop() || null;
   }
   static push(key, value) {
-    if (!this.entries[key]) this.entries[key] = [];
+    if (!this.entries[key])
+      this.entries[key] = [];
     this.entries[key].push(value);
   }
 }
@@ -669,79 +1936,75 @@ function useMapInstance(props, context) {
   const [map, setMap] = useState(null);
   const [container, containerRef] = useCallbackRef();
   const cameraStateRef = useTrackedCameraStateRef(map);
-  const {
-    id,
-    defaultBounds,
-    defaultCenter,
-    defaultZoom,
-    defaultHeading,
-    defaultTilt,
-    reuseMaps,
-    renderingType,
-    colorScheme
-  } = props, mapOptions = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const { id, defaultBounds, defaultCenter, defaultZoom, defaultHeading, defaultTilt, reuseMaps, renderingType, colorScheme } = props, mapOptions = __rest(props, ["id", "defaultBounds", "defaultCenter", "defaultZoom", "defaultHeading", "defaultTilt", "reuseMaps", "renderingType", "colorScheme"]);
   const hasZoom = props.zoom !== void 0 || props.defaultZoom !== void 0;
   const hasCenter = props.center !== void 0 || props.defaultCenter !== void 0;
   if (!defaultBounds && (!hasZoom || !hasCenter)) {
     console.warn("<Map> component is missing configuration. You have to provide zoom and center (via the `zoom`/`defaultZoom` and `center`/`defaultCenter` props) or specify the region to show using `defaultBounds`. See https://visgl.github.io/react-google-maps/docs/api-reference/components/map#required");
   }
-  if (!mapOptions.center && defaultCenter) mapOptions.center = defaultCenter;
-  if (!mapOptions.zoom && Number.isFinite(defaultZoom)) mapOptions.zoom = defaultZoom;
-  if (!mapOptions.heading && Number.isFinite(defaultHeading)) mapOptions.heading = defaultHeading;
-  if (!mapOptions.tilt && Number.isFinite(defaultTilt)) mapOptions.tilt = defaultTilt;
-  for (const key of Object.keys(mapOptions)) if (mapOptions[key] === void 0) delete mapOptions[key];
+  if (!mapOptions.center && defaultCenter)
+    mapOptions.center = defaultCenter;
+  if (!mapOptions.zoom && Number.isFinite(defaultZoom))
+    mapOptions.zoom = defaultZoom;
+  if (!mapOptions.heading && Number.isFinite(defaultHeading))
+    mapOptions.heading = defaultHeading;
+  if (!mapOptions.tilt && Number.isFinite(defaultTilt))
+    mapOptions.tilt = defaultTilt;
+  const customIds = mapOptions.internalUsageAttributionIds;
+  if (customIds == null) {
+    mapOptions.internalUsageAttributionIds = context.internalUsageAttributionIds;
+  } else {
+    mapOptions.internalUsageAttributionIds = [
+      ...context.internalUsageAttributionIds || [],
+      ...customIds
+    ];
+  }
+  for (const key of Object.keys(mapOptions))
+    if (mapOptions[key] === void 0)
+      delete mapOptions[key];
   const savedMapStateRef = useRef(void 0);
+  const reuseMapsRef = useRef(reuseMaps);
+  useEffect(() => {
+    reuseMapsRef.current = reuseMaps;
+  }, [reuseMaps]);
   useEffect(
     () => {
-      if (!container || !apiIsLoaded) return;
-      const {
-        addMapInstance,
-        removeMapInstance
-      } = context;
-      const {
-        mapId
-      } = props;
+      if (!container || !apiIsLoaded)
+        return;
+      const { addMapInstance, removeMapInstance } = context;
+      const { mapId } = props;
       const cacheKey = `${mapId || "default"}:${renderingType || "default"}:${colorScheme || "LIGHT"}`;
       let mapDiv;
       let map2;
-      if (reuseMaps && CachedMapStack.has(cacheKey)) {
-        map2 = CachedMapStack.pop(cacheKey);
-        mapDiv = map2.getDiv();
+      const cachedMap = reuseMapsRef.current && CachedMapStack.has(cacheKey) ? CachedMapStack.pop(cacheKey) : null;
+      const cachedMapDiv = cachedMap === null || cachedMap === void 0 ? void 0 : cachedMap.getDiv();
+      const reusedMap = cachedMap && cachedMapDiv instanceof Node ? cachedMap : null;
+      if (reusedMap) {
+        map2 = reusedMap;
+        mapDiv = cachedMapDiv;
         container.appendChild(mapDiv);
         map2.setOptions(mapOptions);
-        setTimeout(() => map2.setCenter(map2.getCenter()), 0);
+        setTimeout(() => map2.moveCamera({}), 0);
       } else {
+        if (cachedMap)
+          google.maps.event.clearInstanceListeners(cachedMap);
         mapDiv = document.createElement("div");
         mapDiv.style.height = "100%";
         container.appendChild(mapDiv);
-        map2 = new google.maps.Map(mapDiv, _extends({}, mapOptions, renderingType ? {
-          renderingType
-        } : {}, colorScheme ? {
-          colorScheme
-        } : {}));
+        map2 = new google.maps.Map(mapDiv, Object.assign(Object.assign(Object.assign({}, mapOptions), renderingType ? { renderingType } : {}), colorScheme ? { colorScheme } : {}));
       }
       setMap(map2);
       addMapInstance(map2, id);
       if (defaultBounds) {
-        const {
-          padding
-        } = defaultBounds, defBounds = _objectWithoutPropertiesLoose(defaultBounds, _excluded2);
+        const { padding } = defaultBounds, defBounds = __rest(defaultBounds, ["padding"]);
         map2.fitBounds(defBounds, padding);
       } else if (!hasZoom || !hasCenter) {
-        map2.fitBounds({
-          east: 180,
-          west: -180,
-          south: -90,
-          north: 90
-        });
+        map2.fitBounds({ east: 180, west: -180, south: -90, north: 90 });
       }
       if (savedMapStateRef.current) {
-        const {
-          mapId: savedMapId,
-          cameraState: savedCameraState
-        } = savedMapStateRef.current;
+        const { mapId: savedMapId, cameraState: savedCameraState } = savedMapStateRef.current;
         if (savedMapId !== mapId) {
-          map2.setOptions(savedCameraState);
+          map2.moveCamera(savedCameraState);
         }
       }
       return () => {
@@ -751,7 +2014,7 @@ function useMapInstance(props, context) {
           cameraState: cameraStateRef.current
         };
         mapDiv.remove();
-        if (reuseMaps) {
+        if (reuseMapsRef.current) {
           CachedMapStack.push(cacheKey, map2);
         } else {
           google.maps.event.clearInstanceListeners(map2);
@@ -779,15 +2042,10 @@ function useMapInstance(props, context) {
   return [map, containerRef, cameraStateRef];
 }
 const GoogleMapsContext = React__default.createContext(null);
-const Map = (props) => {
-  const {
-    children,
-    id,
-    className,
-    style: style2
-  } = props;
+const Map$1 = (props) => {
+  const { children, id, className, style: style2 } = props;
   const context = useContext(APIProviderContext);
-  const loadingStatus = useApiLoadingStatus();
+  const loadingStatus2 = useApiLoadingStatus();
   if (!context) {
     throw new Error("<Map> can only be used inside an <ApiProvider> component.");
   }
@@ -798,11 +2056,10 @@ const Map = (props) => {
   const isDeckGlControlled = useDeckGLCameraUpdate(map, props);
   const isControlledExternally = !!props.controlled;
   useEffect(() => {
-    if (!map) return;
+    if (!map)
+      return;
     if (isDeckGlControlled) {
-      map.setOptions({
-        disableDefaultUI: true
-      });
+      map.setOptions({ disableDefaultUI: true });
     }
     if (isDeckGlControlled || isControlledExternally) {
       map.setOptions({
@@ -816,7 +2073,13 @@ const Map = (props) => {
         keyboardShortcuts: props.keyboardShortcuts
       });
     };
-  }, [map, isDeckGlControlled, isControlledExternally, props.gestureHandling, props.keyboardShortcuts]);
+  }, [
+    map,
+    isDeckGlControlled,
+    isControlledExternally,
+    props.gestureHandling,
+    props.keyboardShortcuts
+  ]);
   const center = props.center ? toLatLngLiteral(props.center) : null;
   let lat = null;
   let lng = null;
@@ -825,348 +2088,352 @@ const Map = (props) => {
     lng = center.lng;
   }
   const cameraOptions = useMemo(() => {
-    var _lat, _lng, _props$zoom, _props$heading, _props$tilt;
+    var _a, _b, _c;
     return {
-      center: {
-        lat: (_lat = lat) != null ? _lat : 0,
-        lng: (_lng = lng) != null ? _lng : 0
-      },
-      zoom: (_props$zoom = props.zoom) != null ? _props$zoom : 0,
-      heading: (_props$heading = props.heading) != null ? _props$heading : 0,
-      tilt: (_props$tilt = props.tilt) != null ? _props$tilt : 0
+      center: { lat: lat !== null && lat !== void 0 ? lat : 0, lng: lng !== null && lng !== void 0 ? lng : 0 },
+      zoom: (_a = props.zoom) !== null && _a !== void 0 ? _a : 0,
+      heading: (_b = props.heading) !== null && _b !== void 0 ? _b : 0,
+      tilt: (_c = props.tilt) !== null && _c !== void 0 ? _c : 0
     };
   }, [lat, lng, props.zoom, props.heading, props.tilt]);
   useLayoutEffect(() => {
-    if (!map || !isControlledExternally) return;
+    if (!map || !isControlledExternally)
+      return;
     map.moveCamera(cameraOptions);
     const listener = map.addListener("bounds_changed", () => {
       map.moveCamera(cameraOptions);
     });
     return () => listener.remove();
   }, [map, isControlledExternally, cameraOptions]);
-  const combinedStyle = useMemo(() => _extends({
+  const combinedStyle = useMemo(() => Object.assign({
     width: "100%",
     height: "100%",
     position: "relative",
     // when using deckgl, the map should be sent to the back
     zIndex: isDeckGlControlled ? -1 : 0
   }, style2), [style2, isDeckGlControlled]);
-  const contextValue = useMemo(() => ({
-    map
-  }), [map]);
-  if (loadingStatus === APILoadingStatus.AUTH_FAILURE) {
-    return /* @__PURE__ */ React__default.createElement("div", {
-      style: _extends({
-        position: "relative"
-      }, className ? {} : combinedStyle),
-      className
-    }, /* @__PURE__ */ React__default.createElement(AuthFailureMessage, null));
-  }
-  return /* @__PURE__ */ React__default.createElement("div", _extends({
-    ref: mapRef,
-    "data-testid": "map",
-    style: className ? void 0 : combinedStyle,
-    className
-  }, id ? {
-    id
-  } : {}), map ? /* @__PURE__ */ React__default.createElement(GoogleMapsContext.Provider, {
-    value: contextValue
-  }, children) : null);
-};
-Map.deckGLViewProps = true;
-const shownMessages = /* @__PURE__ */ new Set();
-function logErrorOnce(...args) {
-  const key = JSON.stringify(args);
-  if (!shownMessages.has(key)) {
-    shownMessages.add(key);
-    console.error(...args);
+  const contextValue = useMemo(() => ({ map }), [map]);
+  if (loadingStatus2 === APILoadingStatus.AUTH_FAILURE) {
+    return React__default.createElement(
+      "div",
+      { style: Object.assign({ position: "relative" }, className ? {} : combinedStyle), className },
+      React__default.createElement(AuthFailureMessage, null)
+    );
   }
-}
+  return React__default.createElement("div", Object.assign({ ref: mapRef, "data-testid": "map", style: className ? void 0 : combinedStyle, className }, id ? { id } : {}), map ? React__default.createElement(GoogleMapsContext.Provider, { value: contextValue }, children) : null);
+};
+Map$1.deckGLViewProps = true;
 const useMap = (id = null) => {
   const ctx = useContext(APIProviderContext);
-  const {
-    map
-  } = useContext(GoogleMapsContext) || {};
+  const { map } = useContext(GoogleMapsContext) || {};
   if (ctx === null) {
     logErrorOnce("useMap(): failed to retrieve APIProviderContext. Make sure that the <APIProvider> component exists and that the component you are calling `useMap()` from is a sibling of the <APIProvider>.");
     return null;
   }
-  const {
-    mapInstances
-  } = ctx;
-  if (id !== null) return mapInstances[id] || null;
-  if (map) return map;
+  const { mapInstances } = ctx;
+  if (id !== null)
+    return mapInstances[id] || null;
+  if (map)
+    return map;
   return mapInstances["default"] || null;
 };
-function useMapsLibrary(name) {
-  const apiIsLoaded = useApiIsLoaded();
-  const ctx = useContext(APIProviderContext);
-  useEffect(() => {
-    if (!apiIsLoaded || !ctx) return;
-    void ctx.importLibrary(name);
-  }, [apiIsLoaded, ctx, name]);
-  return (ctx == null ? void 0 : ctx.loadedLibraries[name]) || null;
-}
+const noop = () => {
+};
 function useMapsEventListener(target, name, callback) {
+  const eventFn = useEffectEvent(callback !== null && callback !== void 0 ? callback : noop);
+  const isCallbackDefined = Boolean(callback);
   useEffect(() => {
-    if (!target || !name || !callback) return;
-    const listener = google.maps.event.addListener(target, name, callback);
+    if (!target || !name || !isCallbackDefined)
+      return;
+    const listener = google.maps.event.addListener(target, name, eventFn);
     return () => listener.remove();
-  }, [target, name, callback]);
+  }, [target, name, isCallbackDefined]);
 }
-function usePropBinding(object, prop, value) {
-  useEffect(() => {
-    if (!object) return;
-    object[prop] = value;
-  }, [object, prop, value]);
+class GlobalStyleManager {
+  constructor() {
+    this.renderedStyles = /* @__PURE__ */ new Set();
+    this.styleElement = null;
+  }
+  getStyleElement() {
+    if (!this.styleElement) {
+      this.styleElement = document.createElement("style");
+      this.styleElement.setAttribute("data-rgm-anchor-styles", "");
+      document.head.appendChild(this.styleElement);
+    }
+    return this.styleElement;
+  }
+  addAdvancedMarkerPointerEventsOverwrite() {
+    if (this.renderedStyles.has("marker-pointer-events")) {
+      return;
+    }
+    const styleElement = this.getStyleElement();
+    styleElement.textContent += `
+      gmp-advanced-marker[data-origin='rgm'] {
+        pointer-events: none !important;
+      }
+    `;
+    this.renderedStyles.add("marker-pointer-events");
+  }
+  cleanup() {
+    if (this.styleElement) {
+      this.styleElement.remove();
+      this.styleElement = null;
+      this.renderedStyles.clear();
+    }
+  }
 }
-function useDomEventListener(target, name, callback) {
-  useEffect(() => {
-    if (!target || !name || !callback) return;
-    target.addEventListener(name, callback);
-    return () => target.removeEventListener(name, callback);
-  }, [target, name, callback]);
+const globalStyleManager = new GlobalStyleManager();
+function isVersionGreaterEqual(major, minor) {
+  var _a;
+  if (!((_a = google === null || google === void 0 ? void 0 : google.maps) === null || _a === void 0 ? void 0 : _a.version))
+    return void 0;
+  const version = google.maps.version.split(".");
+  const currentMajor = parseInt(version[0], 10);
+  const currentMinor = parseInt(version[1], 10);
+  return currentMajor > major || currentMajor === major && currentMinor >= minor;
 }
+const AdvancedMarkerContext = React__default.createContext(null);
+const AdvancedMarkerAnchorPoint = {
+  BOTTOM: ["50%", "100%"]
+};
+const AdvancedMarker = forwardRef((props, ref) => {
+  const { children, style: style2, className, anchorPoint } = props;
+  const [marker, contentContainer] = useAdvancedMarker(props);
+  const advancedMarkerContextValue = useMemo(() => marker ? { marker } : null, [marker]);
+  useImperativeHandle(ref, () => marker, [marker]);
+  if (!contentContainer)
+    return null;
+  return React__default.createElement(AdvancedMarkerContext.Provider, { value: advancedMarkerContextValue }, createPortal(React__default.createElement(MarkerContent, { anchorPoint, styles: style2, className }, children), contentContainer));
+});
+AdvancedMarker.displayName = "AdvancedMarker";
 function isAdvancedMarker(marker) {
   return marker.content !== void 0;
 }
 function isElementNode(node) {
   return node.nodeType === Node.ELEMENT_NODE;
 }
-const AdvancedMarkerContext = React__default.createContext(null);
-const AdvancedMarkerAnchorPoint = {
-  BOTTOM: ["50%", "100%"]
-};
-const MarkerContent = ({
-  children,
-  styles: styles2,
-  className,
-  anchorPoint
-}) => {
-  const [xTranslation, yTranslation] = anchorPoint != null ? anchorPoint : AdvancedMarkerAnchorPoint["BOTTOM"];
-  let xTranslationFlipped = `-${xTranslation}`;
-  let yTranslationFlipped = `-${yTranslation}`;
-  if (xTranslation.trimStart().startsWith("-")) {
-    xTranslationFlipped = xTranslation.substring(1);
-  }
-  if (yTranslation.trimStart().startsWith("-")) {
-    yTranslationFlipped = yTranslation.substring(1);
-  }
-  const transformStyle = `translate(50%, 100%) translate(${xTranslationFlipped}, ${yTranslationFlipped})`;
-  return (
-    // anchoring container
-    /* @__PURE__ */ React__default.createElement("div", {
-      style: {
-        transform: transformStyle
-      }
-    }, /* @__PURE__ */ React__default.createElement("div", {
-      className,
-      style: styles2
-    }, children))
-  );
+const MarkerContent = ({ children, styles: styles2, className }) => {
+  return React__default.createElement("div", { className, style: styles2 }, children);
 };
 function useAdvancedMarker(props) {
   const [marker, setMarker] = useState(null);
   const [contentContainer, setContentContainer] = useState(null);
   const map = useMap();
   const markerLibrary = useMapsLibrary("marker");
-  const {
-    children,
-    onClick,
-    className,
-    onMouseEnter,
-    onMouseLeave,
-    onDrag,
-    onDragStart,
-    onDragEnd,
-    collisionBehavior,
-    clickable,
-    draggable,
-    position,
-    title: title2,
-    zIndex
-  } = props;
+  const { children, onClick, onKeyDown, onKeyUp, className, onMouseEnter, onMouseLeave, onDrag, onDragStart, onDragEnd, collisionBehavior, clickable, draggable, position, title: title2, zIndex, anchorPoint, anchorLeft, anchorTop } = props;
   const numChildren = Children.count(children);
   useEffect(() => {
-    if (!map || !markerLibrary) return;
+    if (!map || !markerLibrary)
+      return;
     const newMarker = new markerLibrary.AdvancedMarkerElement();
     newMarker.map = map;
     setMarker(newMarker);
     let contentElement = null;
     if (numChildren > 0) {
       contentElement = document.createElement("div");
-      contentElement.isCustomMarker = true;
       newMarker.content = contentElement;
       setContentContainer(contentElement);
     }
     return () => {
-      var _contentElement;
       newMarker.map = null;
-      (_contentElement = contentElement) == null || _contentElement.remove();
+      contentElement === null || contentElement === void 0 ? void 0 : contentElement.remove();
       setMarker(null);
       setContentContainer(null);
     };
   }, [map, markerLibrary, numChildren]);
   useEffect(() => {
-    if (!marker || !marker.content || numChildren > 0) return;
-    marker.content.className = className || "";
+    if (!(marker === null || marker === void 0 ? void 0 : marker.content) || !isElementNode(marker.content) || numChildren > 0)
+      return;
+    marker.content.className = className !== null && className !== void 0 ? className : "";
   }, [marker, className, numChildren]);
+  useAdvancedMarkerAnchoring(marker, anchorPoint, anchorLeft, anchorTop, numChildren > 0);
   usePropBinding(marker, "position", position);
-  usePropBinding(marker, "title", title2 != null ? title2 : "");
+  usePropBinding(marker, "title", title2 !== null && title2 !== void 0 ? title2 : "");
   usePropBinding(marker, "zIndex", zIndex);
   usePropBinding(marker, "collisionBehavior", collisionBehavior);
   useEffect(() => {
-    if (!marker) return;
-    if (draggable !== void 0) marker.gmpDraggable = draggable;
-    else if (onDrag || onDragStart || onDragEnd) marker.gmpDraggable = true;
-    else marker.gmpDraggable = false;
+    if (!marker)
+      return;
+    if (draggable !== void 0)
+      marker.gmpDraggable = draggable;
+    else if (onDrag || onDragStart || onDragEnd)
+      marker.gmpDraggable = true;
+    else
+      marker.gmpDraggable = false;
   }, [marker, draggable, onDrag, onDragEnd, onDragStart]);
   useEffect(() => {
-    if (!marker) return;
-    const gmpClickable = clickable !== void 0 || Boolean(onClick) || Boolean(onMouseEnter) || Boolean(onMouseLeave);
+    if (!marker)
+      return;
+    const gmpClickable = clickable !== void 0 ? clickable : Boolean(onClick) || Boolean(onKeyDown) || Boolean(onKeyUp) || Boolean(onMouseEnter) || Boolean(onMouseLeave);
     marker.gmpClickable = gmpClickable;
-    if (gmpClickable && marker != null && marker.content && isElementNode(marker.content)) {
-      marker.content.style.pointerEvents = "none";
-      if (marker.content.firstElementChild) {
-        marker.content.firstElementChild.style.pointerEvents = "all";
-      }
+    if ((marker === null || marker === void 0 ? void 0 : marker.content) && isElementNode(marker.content)) {
+      marker.content.style.pointerEvents = gmpClickable ? "all" : "none";
+      marker.content.style.cursor = gmpClickable && onClick ? "pointer" : "";
     }
-  }, [marker, clickable, onClick, onMouseEnter, onMouseLeave]);
-  useMapsEventListener(marker, "click", onClick);
+  }, [
+    marker,
+    clickable,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave
+  ]);
   useMapsEventListener(marker, "drag", onDrag);
   useMapsEventListener(marker, "dragstart", onDragStart);
   useMapsEventListener(marker, "dragend", onDragEnd);
-  useDomEventListener(marker == null ? void 0 : marker.element, "mouseenter", onMouseEnter);
-  useDomEventListener(marker == null ? void 0 : marker.element, "mouseleave", onMouseLeave);
+  useDomEventListener(marker, "gmp-click", onClick);
+  useDomEventListener(marker, "keydown", onKeyDown);
+  useDomEventListener(marker, "keyup", onKeyUp);
+  useDomEventListener(marker, "mouseenter", onMouseEnter);
+  useDomEventListener(marker, "mouseleave", onMouseLeave);
   return [marker, contentContainer];
 }
-const AdvancedMarker = forwardRef((props, ref) => {
-  const {
-    children,
-    style: style2,
-    className,
-    anchorPoint
-  } = props;
-  const [marker, contentContainer] = useAdvancedMarker(props);
-  const advancedMarkerContextValue = useMemo(() => marker ? {
-    marker
-  } : null, [marker]);
-  useImperativeHandle(ref, () => marker, [marker]);
-  if (!contentContainer) return null;
-  return /* @__PURE__ */ React__default.createElement(AdvancedMarkerContext.Provider, {
-    value: advancedMarkerContextValue
-  }, createPortal(/* @__PURE__ */ React__default.createElement(MarkerContent, {
-    anchorPoint,
-    styles: style2,
-    className
-  }, children), contentContainer));
-});
-function setValueForStyles(element, styles2, prevStyles) {
-  if (styles2 != null && typeof styles2 !== "object") {
-    throw new Error("The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.");
-  }
-  const elementStyle = element.style;
-  if (prevStyles == null) {
-    if (styles2 == null) return;
-    for (const styleName in styles2) {
-      if (!styles2.hasOwnProperty(styleName)) continue;
-      setValueForStyle(elementStyle, styleName, styles2[styleName]);
+function useAdvancedMarkerAnchoring(marker, anchorPoint, anchorLeft, anchorTop, hasChildren) {
+  useEffect(() => {
+    if (!marker || !hasChildren)
+      return;
+    const anchorOptionsSupported = isVersionGreaterEqual(3, 62);
+    const contentElement = marker.content;
+    if (!contentElement || !isElementNode(contentElement))
+      return;
+    if (anchorLeft !== void 0 || anchorTop !== void 0) {
+      if (!anchorOptionsSupported) {
+        console.warn(`AdvancedMarker: The anchorLeft and anchorTop props are only supported in Google Maps API version 3.62 and above. The current version is ${google.maps.version}.`);
+      }
+      marker.anchorLeft = anchorLeft;
+      marker.anchorTop = anchorTop;
+      if (anchorPoint !== void 0) {
+        console.warn("AdvancedMarker: the anchorPoint prop is ignored when anchorLeft and/or anchorTop are set.");
+      }
+      return;
     }
-    return;
-  }
-  for (const styleName in prevStyles) {
-    if (prevStyles.hasOwnProperty(styleName) && (styles2 == null || !styles2.hasOwnProperty(styleName))) {
-      const isCustomProperty = styleName.indexOf("--") === 0;
-      if (isCustomProperty) {
-        elementStyle.setProperty(styleName, "");
-      } else if (styleName === "float") {
-        elementStyle.cssFloat = "";
+    if (anchorPoint !== void 0) {
+      const [x, y] = anchorPoint !== null && anchorPoint !== void 0 ? anchorPoint : AdvancedMarkerAnchorPoint["BOTTOM"];
+      const translateX = `calc(-1 * ${x})`;
+      const translateY = `calc(-1 * ${y})`;
+      if (anchorOptionsSupported) {
+        marker.anchorLeft = translateX;
+        marker.anchorTop = translateY;
+        contentElement.style.transform = "";
       } else {
-        elementStyle[styleName] = "";
+        contentElement.style.transform = `translate(50%, 100%) translate(${translateX}, ${translateY})`;
+        marker.dataset.origin = "rgm";
+        globalStyleManager.addAdvancedMarkerPointerEventsOverwrite();
       }
     }
-  }
-  if (styles2 == null) return;
-  for (const styleName in styles2) {
-    const value = styles2[styleName];
-    if (styles2.hasOwnProperty(styleName) && prevStyles[styleName] !== value) {
-      setValueForStyle(elementStyle, styleName, value);
+  }, [marker, anchorPoint, anchorLeft, anchorTop, hasChildren]);
+}
+const hasOwn = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+const UNSET = null;
+function getChangedOptions(nextOptions, trackedOptions) {
+  let changedOptions = null;
+  const keys2 = /* @__PURE__ */ new Set([
+    ...Object.keys(trackedOptions),
+    ...Object.keys(nextOptions)
+  ]);
+  for (const key of keys2) {
+    if (!hasOwn(nextOptions, key)) {
+      changedOptions !== null && changedOptions !== void 0 ? changedOptions : changedOptions = /* @__PURE__ */ Object.create(null);
+      changedOptions[key] = UNSET;
+      continue;
     }
+    if (hasOwn(trackedOptions, key) && deepEqual(trackedOptions[key], nextOptions[key]))
+      continue;
+    changedOptions !== null && changedOptions !== void 0 ? changedOptions : changedOptions = /* @__PURE__ */ Object.create(null);
+    changedOptions[key] = nextOptions[key];
   }
+  return changedOptions;
 }
-function setValueForStyle(elementStyle, styleName, value) {
-  const isCustomProperty = styleName.indexOf("--") === 0;
-  if (value == null || typeof value === "boolean" || value === "") {
-    if (isCustomProperty) {
-      elementStyle.setProperty(styleName, "");
-    } else if (styleName === "float") {
-      elementStyle.cssFloat = "";
-    } else {
-      elementStyle[styleName] = "";
-    }
-  } else if (isCustomProperty) {
-    elementStyle.setProperty(styleName, value);
-  } else if (typeof value === "number" && value !== 0 && !isUnitlessNumber(styleName)) {
-    elementStyle[styleName] = value + "px";
-  } else {
-    if (styleName === "float") {
-      elementStyle.cssFloat = value;
-    } else {
-      elementStyle[styleName] = ("" + value).trim();
-    }
+function snapshotOptions(value) {
+  if (Array.isArray(value))
+    return value.map((entry) => snapshotOptions(entry));
+  if (value === null || typeof value !== "object")
+    return value;
+  const prototype = Object.getPrototypeOf(value);
+  if (prototype !== Object.prototype)
+    return value;
+  const copy = {};
+  for (const key of Object.keys(value))
+    copy[key] = snapshotOptions(value[key]);
+  return copy;
+}
+const appliedOptionsByObject = /* @__PURE__ */ new WeakMap();
+function setMapObjectOptions(object, options, { alreadyApplied = false } = {}) {
+  var _a;
+  if (alreadyApplied) {
+    appliedOptionsByObject.set(object, snapshotOptions(options));
+    return;
   }
+  const appliedOptions = (_a = appliedOptionsByObject.get(object)) !== null && _a !== void 0 ? _a : {};
+  const changedOptions = getChangedOptions(options, appliedOptions);
+  if (!changedOptions)
+    return;
+  object.setOptions(changedOptions);
+  appliedOptionsByObject.set(object, snapshotOptions(options));
 }
-const unitlessNumbers = /* @__PURE__ */ new Set([
-  "animationIterationCount",
-  "aspectRatio",
-  "borderImageOutset",
-  "borderImageSlice",
-  "borderImageWidth",
-  "boxFlex",
-  "boxFlexGroup",
-  "boxOrdinalGroup",
-  "columnCount",
-  "columns",
-  "flex",
-  "flexGrow",
-  "flexPositive",
-  "flexShrink",
-  "flexNegative",
-  "flexOrder",
-  "gridArea",
-  "gridRow",
-  "gridRowEnd",
-  "gridRowSpan",
-  "gridRowStart",
-  "gridColumn",
-  "gridColumnEnd",
-  "gridColumnSpan",
-  "gridColumnStart",
-  "fontWeight",
-  "lineClamp",
-  "lineHeight",
-  "opacity",
-  "order",
-  "orphans",
-  "scale",
-  "tabSize",
-  "widows",
-  "zIndex",
-  "zoom",
-  "fillOpacity",
-  // SVG-related properties
-  "floodOpacity",
-  "stopOpacity",
-  "strokeDasharray",
-  "strokeDashoffset",
-  "strokeMiterlimit",
-  "strokeOpacity",
-  "strokeWidth"
-]);
-function isUnitlessNumber(name) {
-  return unitlessNumbers.has(name);
+function useCircle(props) {
+  var _a, _b, _c;
+  const { onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut, onRadiusChanged, onCenterChanged, center, defaultCenter, radius, defaultRadius } = props, destructuredOptions = __rest(props, ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut", "onRadiusChanged", "onCenterChanged", "center", "defaultCenter", "radius", "defaultRadius"]);
+  const [circle, setCircle] = useState(null);
+  const map = useMap();
+  const circleOptions = useMemoized(Object.assign(Object.assign({}, destructuredOptions), { clickable: (_a = destructuredOptions.clickable) !== null && _a !== void 0 ? _a : Boolean(onClick), draggable: (_b = destructuredOptions.draggable) !== null && _b !== void 0 ? _b : Boolean(onDrag || onDragStart || onDragEnd || onCenterChanged), editable: (_c = destructuredOptions.editable) !== null && _c !== void 0 ? _c : Boolean(onRadiusChanged) }), deepEqual);
+  useEffect(() => {
+    if (!map) {
+      if (map === void 0)
+        console.error("<Circle> has to be inside a Map component.");
+      return;
+    }
+    const newCircle = new google.maps.Circle(Object.assign(Object.assign({}, circleOptions), { center: center !== null && center !== void 0 ? center : defaultCenter, radius: radius !== null && radius !== void 0 ? radius : defaultRadius }));
+    setMapObjectOptions(newCircle, circleOptions, { alreadyApplied: true });
+    newCircle.setMap(map);
+    setCircle(newCircle);
+    return () => {
+      newCircle.setMap(null);
+      setCircle(null);
+    };
+  }, [map]);
+  useMapsEventListener(circle, "click", onClick);
+  useMapsEventListener(circle, "drag", onDrag);
+  useMapsEventListener(circle, "dragstart", onDragStart);
+  useMapsEventListener(circle, "dragend", onDragEnd);
+  useMapsEventListener(circle, "mouseover", onMouseOver);
+  useMapsEventListener(circle, "mouseout", onMouseOut);
+  useMapsEventListener(circle, "radius_changed", onRadiusChanged ? () => {
+    const newRadius = circle === null || circle === void 0 ? void 0 : circle.getRadius();
+    if (newRadius !== void 0)
+      onRadiusChanged(newRadius);
+  } : null);
+  useMapsEventListener(circle, "center_changed", onCenterChanged ? () => {
+    onCenterChanged(circle === null || circle === void 0 ? void 0 : circle.getCenter());
+  } : null);
+  useEffect(() => {
+    if (!circle)
+      return;
+    setMapObjectOptions(circle, circleOptions);
+  }, [circle, circleOptions]);
+  useEffect(() => {
+    if (!circle || !center)
+      return;
+    if (!latLngEquals(center, circle.getCenter())) {
+      circle.setCenter(center);
+    }
+  }, [circle, center]);
+  useEffect(() => {
+    if (!circle || radius === void 0)
+      return;
+    if (radius !== circle.getRadius()) {
+      circle.setRadius(radius);
+    }
+  }, [circle, radius]);
+  return circle;
 }
-const _excluded$1 = ["children", "headerContent", "style", "className", "pixelOffset", "anchor", "shouldFocus", "onClose", "onCloseClick"];
+const Circle = forwardRef((props, ref) => {
+  const circle = useCircle(props);
+  useImperativeHandle(ref, () => circle, [circle]);
+  return React__default.createElement(React__default.Fragment, null);
+});
+Circle.displayName = "Circle";
 const InfoWindow = (props) => {
   const {
     // content options
@@ -1181,32 +2448,33 @@ const InfoWindow = (props) => {
     // events
     onClose,
     onCloseClick
-    // other options
-  } = props, infoWindowOptions = _objectWithoutPropertiesLoose(props, _excluded$1);
+  } = props, volatileInfoWindowOptions = __rest(props, ["children", "headerContent", "style", "className", "pixelOffset", "anchor", "shouldFocus", "onClose", "onCloseClick"]);
   const mapsLibrary = useMapsLibrary("maps");
   const [infoWindow, setInfoWindow] = useState(null);
   const contentContainerRef = useRef(null);
   const headerContainerRef = useRef(null);
+  const infoWindowOptions = useMemoized(volatileInfoWindowOptions, deepEqual);
   useEffect(
     () => {
-      if (!mapsLibrary) return;
+      if (!mapsLibrary)
+        return;
       contentContainerRef.current = document.createElement("div");
       headerContainerRef.current = document.createElement("div");
-      const opts = infoWindowOptions;
+      const opts = Object.assign({}, infoWindowOptions);
       if (pixelOffset) {
         opts.pixelOffset = new google.maps.Size(pixelOffset[0], pixelOffset[1]);
       }
       if (headerContent) {
         opts.headerContent = typeof headerContent === "string" ? headerContent : headerContainerRef.current;
       }
-      const infoWindow2 = new google.maps.InfoWindow(infoWindowOptions);
+      const infoWindow2 = new google.maps.InfoWindow(opts);
       infoWindow2.setContent(contentContainerRef.current);
       setInfoWindow(infoWindow2);
       return () => {
-        var _contentContainerRef$, _headerContainerRef$c;
+        var _a, _b;
         infoWindow2.setContent(null);
-        (_contentContainerRef$ = contentContainerRef.current) == null || _contentContainerRef$.remove();
-        (_headerContainerRef$c = headerContainerRef.current) == null || _headerContainerRef$c.remove();
+        (_a = contentContainerRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = headerContainerRef.current) === null || _b === void 0 ? void 0 : _b.remove();
         contentContainerRef.current = null;
         headerContainerRef.current = null;
         setInfoWindow(null);
@@ -1222,16 +2490,19 @@ const InfoWindow = (props) => {
     [mapsLibrary]
   );
   const prevStyleRef = useRef(null);
-  useEffect(() => {
-    if (!infoWindow || !contentContainerRef.current) return;
+  useLayoutEffect(() => {
+    if (!infoWindow || !contentContainerRef.current)
+      return;
     setValueForStyles(contentContainerRef.current, style2 || null, prevStyleRef.current);
     prevStyleRef.current = style2 || null;
-    if (className !== contentContainerRef.current.className) contentContainerRef.current.className = className || "";
+    if (className !== contentContainerRef.current.className)
+      contentContainerRef.current.className = className || "";
   }, [infoWindow, className, style2]);
-  useDeepCompareEffect(
+  useEffect(
     () => {
-      if (!infoWindow) return;
-      const opts = infoWindowOptions;
+      if (!infoWindow)
+        return;
+      const opts = Object.assign({}, infoWindowOptions);
       if (!pixelOffset) {
         opts.pixelOffset = null;
       } else {
@@ -1242,7 +2513,7 @@ const InfoWindow = (props) => {
       } else {
         opts.headerContent = typeof headerContent === "string" ? headerContent : headerContainerRef.current;
       }
-      infoWindow.setOptions(infoWindowOptions);
+      infoWindow.setOptions(opts);
     },
     // dependency `infoWindow` isn't needed since options are also passed
     // to the constructor when a new infoWindow is created.
@@ -1252,24 +2523,22 @@ const InfoWindow = (props) => {
   useMapsEventListener(infoWindow, "close", onClose);
   useMapsEventListener(infoWindow, "closeclick", onCloseClick);
   const map = useMap();
-  useDeepCompareEffect(() => {
-    if (!map || !infoWindow || anchor === null) return;
+  useEffect(() => {
+    var _a;
+    if (!map || !infoWindow || anchor === null)
+      return;
     const isOpenedWithAnchor = !!anchor;
-    const openOptions = {
-      map
-    };
+    const openOptions = { map };
     if (anchor) {
       openOptions.anchor = anchor;
       if (isAdvancedMarker(anchor) && anchor.content instanceof Element) {
-        const wrapper = anchor.content;
-        const wrapperBcr = wrapper == null ? void 0 : wrapper.getBoundingClientRect();
-        if (wrapperBcr && wrapper != null && wrapper.isCustomMarker) {
-          var _anchor$content$first;
-          const anchorDomContent = (_anchor$content$first = anchor.content.firstElementChild) == null ? void 0 : _anchor$content$first.firstElementChild;
-          const contentBcr = anchorDomContent == null ? void 0 : anchorDomContent.getBoundingClientRect();
-          const anchorOffsetX = contentBcr.x - wrapperBcr.x + (contentBcr.width - wrapperBcr.width) / 2;
-          const anchorOffsetY = contentBcr.y - wrapperBcr.y;
-          const opts = infoWindowOptions;
+        const anchorBcr = anchor === null || anchor === void 0 ? void 0 : anchor.getBoundingClientRect();
+        if (anchorBcr && anchor.dataset.origin === "rgm") {
+          const anchorDomContent = (_a = anchor.content.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+          const contentBcr = anchorDomContent === null || anchorDomContent === void 0 ? void 0 : anchorDomContent.getBoundingClientRect();
+          const anchorOffsetX = contentBcr.x - anchorBcr.x + (contentBcr.width - anchorBcr.width) / 2;
+          const anchorOffsetY = contentBcr.y - anchorBcr.y;
+          const opts = Object.assign({}, infoWindowOptions);
           opts.pixelOffset = new google.maps.Size(pixelOffset ? pixelOffset[0] + anchorOffsetX : anchorOffsetX, pixelOffset ? pixelOffset[1] + anchorOffsetY : anchorOffsetY);
           infoWindow.setOptions(opts);
         }
@@ -1280,31 +2549,267 @@ const InfoWindow = (props) => {
     }
     infoWindow.open(openOptions);
     return () => {
-      if (isOpenedWithAnchor) infoWindow.set("anchor", null);
+      if (isOpenedWithAnchor)
+        infoWindow.set("anchor", null);
       infoWindow.close();
     };
   }, [infoWindow, anchor, map, shouldFocus, infoWindowOptions, pixelOffset]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, contentContainerRef.current && createPortal(children, contentContainerRef.current), headerContainerRef.current !== null && createPortal(headerContent, headerContainerRef.current));
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    contentContainerRef.current && createPortal(children, contentContainerRef.current),
+    headerContainerRef.current !== null && createPortal(headerContent, headerContainerRef.current)
+  );
 };
-const _excluded = ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut"];
+function getPathsArray(polygon) {
+  const mvcPaths = polygon.getPaths();
+  const result = [];
+  for (let i = 0; i < mvcPaths.getLength(); i++) {
+    result.push(mvcPaths.getAt(i).getArray());
+  }
+  return result;
+}
+function usePolygon(props) {
+  var _a, _b, _c;
+  const { onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut, onPathsChanged, polygon: externalPolygon, encodedPaths, paths, defaultPaths } = props, destructuredOptions = __rest(props, ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut", "onPathsChanged", "polygon", "encodedPaths", "paths", "defaultPaths"]);
+  const [polygon, setPolygon] = useState(null);
+  const map = useMap();
+  const geometryLibrary = useMapsLibrary("geometry");
+  const isUpdatingRef = useRef(false);
+  const polygonOptions = useMemoized(Object.assign(Object.assign({}, destructuredOptions), { clickable: (_a = destructuredOptions.clickable) !== null && _a !== void 0 ? _a : Boolean(onClick), draggable: (_b = destructuredOptions.draggable) !== null && _b !== void 0 ? _b : Boolean(onDrag || onDragStart || onDragEnd || onPathsChanged), editable: (_c = destructuredOptions.editable) !== null && _c !== void 0 ? _c : Boolean(onPathsChanged) }), deepEqual);
+  useEffect(() => {
+    if (!map) {
+      if (map === void 0)
+        console.error("<Polygon> has to be inside a Map component.");
+      return;
+    }
+    let instance;
+    if (externalPolygon) {
+      instance = externalPolygon;
+      const initialPaths = paths !== null && paths !== void 0 ? paths : defaultPaths;
+      if (initialPaths && Array.isArray(initialPaths)) {
+        instance.setPaths(initialPaths);
+      }
+      instance.setOptions(polygonOptions);
+    } else {
+      const initialPaths = paths !== null && paths !== void 0 ? paths : defaultPaths;
+      const polygonOptionsWithPaths = Object.assign({}, polygonOptions);
+      if (initialPaths && Array.isArray(initialPaths)) {
+        polygonOptionsWithPaths.paths = initialPaths;
+      }
+      instance = new google.maps.Polygon(polygonOptionsWithPaths);
+    }
+    setMapObjectOptions(instance, polygonOptions, { alreadyApplied: true });
+    instance.setMap(map);
+    setPolygon(instance);
+    return () => {
+      instance.setMap(null);
+      setPolygon(null);
+    };
+  }, [map, externalPolygon]);
+  useMapsEventListener(polygon, "click", onClick);
+  useMapsEventListener(polygon, "drag", onDrag);
+  useMapsEventListener(polygon, "dragstart", onDragStart);
+  useMapsEventListener(polygon, "mouseover", onMouseOver);
+  useMapsEventListener(polygon, "mouseout", onMouseOut);
+  useMapsEventListener(polygon, "dragend", (e) => {
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e);
+    if (onPathsChanged && polygon && !isUpdatingRef.current) {
+      onPathsChanged(getPathsArray(polygon));
+    }
+  });
+  useEffect(() => {
+    if (!polygon || !onPathsChanged)
+      return;
+    const listeners2 = [];
+    const mvcPaths = polygon.getPaths();
+    if (typeof mvcPaths.getLength !== "function" || typeof mvcPaths.getAt !== "function") {
+      return;
+    }
+    const handlePathsChange = () => {
+      if (!isUpdatingRef.current) {
+        onPathsChanged(getPathsArray(polygon));
+      }
+    };
+    const subscribeToInnerPath = (innerPath) => {
+      listeners2.push(google.maps.event.addListener(innerPath, "insert_at", handlePathsChange));
+      listeners2.push(google.maps.event.addListener(innerPath, "remove_at", handlePathsChange));
+      listeners2.push(google.maps.event.addListener(innerPath, "set_at", handlePathsChange));
+    };
+    for (let i = 0; i < mvcPaths.getLength(); i++) {
+      subscribeToInnerPath(mvcPaths.getAt(i));
+    }
+    listeners2.push(google.maps.event.addListener(mvcPaths, "insert_at", (index) => {
+      subscribeToInnerPath(mvcPaths.getAt(index));
+      handlePathsChange();
+    }));
+    listeners2.push(google.maps.event.addListener(mvcPaths, "set_at", (index) => {
+      subscribeToInnerPath(mvcPaths.getAt(index));
+      handlePathsChange();
+    }));
+    listeners2.push(google.maps.event.addListener(mvcPaths, "remove_at", handlePathsChange));
+    return () => {
+      listeners2.forEach((listener) => listener.remove());
+    };
+  }, [
+    polygon,
+    onPathsChanged,
+    paths,
+    encodedPaths,
+    polygonOptions.editable,
+    polygonOptions.draggable
+  ]);
+  useEffect(() => {
+    if (!polygon)
+      return;
+    setMapObjectOptions(polygon, polygonOptions);
+  }, [polygon, polygonOptions]);
+  useEffect(() => {
+    if (!polygon || !paths)
+      return;
+    if (!Array.isArray(paths))
+      return;
+    const firstPath = paths[0];
+    const normalizedPaths = Array.isArray(firstPath) ? paths : [paths];
+    const currentPaths = polygon.getPaths();
+    if (!pathsEquals(normalizedPaths, currentPaths)) {
+      isUpdatingRef.current = true;
+      polygon.setPaths(paths);
+      isUpdatingRef.current = false;
+    }
+  }, [polygon, paths]);
+  useEffect(() => {
+    if (!polygon || !encodedPaths || !geometryLibrary)
+      return;
+    isUpdatingRef.current = true;
+    const decodedPaths = encodedPaths.map((encodedPath) => geometryLibrary.encoding.decodePath(encodedPath));
+    polygon.setPaths(decodedPaths);
+    isUpdatingRef.current = false;
+  }, [polygon, encodedPaths, geometryLibrary]);
+  return polygon;
+}
+const Polygon = forwardRef((props, ref) => {
+  const polygon = usePolygon(props);
+  useImperativeHandle(ref, () => polygon, [polygon]);
+  return React__default.createElement(React__default.Fragment, null);
+});
+Polygon.displayName = "Polygon";
+function usePolyline(props) {
+  var _a, _b, _c;
+  const { onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut, onPathChanged, polyline: externalPolyline, encodedPath, path, defaultPath } = props, destructuredOptions = __rest(props, ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut", "onPathChanged", "polyline", "encodedPath", "path", "defaultPath"]);
+  const [polyline, setPolyline] = useState(null);
+  const map = useMap();
+  const geometryLibrary = useMapsLibrary("geometry");
+  const isUpdatingRef = useRef(false);
+  const polylineOptions = useMemoized(Object.assign(Object.assign({}, destructuredOptions), { clickable: (_a = destructuredOptions.clickable) !== null && _a !== void 0 ? _a : Boolean(onClick), draggable: (_b = destructuredOptions.draggable) !== null && _b !== void 0 ? _b : Boolean(onDrag || onDragStart || onDragEnd || onPathChanged), editable: (_c = destructuredOptions.editable) !== null && _c !== void 0 ? _c : Boolean(onPathChanged) }), deepEqual);
+  useEffect(() => {
+    if (!map) {
+      if (map === void 0)
+        console.error("<Polyline> has to be inside a Map component.");
+      return;
+    }
+    let instance;
+    if (externalPolyline) {
+      instance = externalPolyline;
+      const initialPath = path !== null && path !== void 0 ? path : defaultPath;
+      if (initialPath && Array.isArray(initialPath)) {
+        instance.setPath(initialPath);
+      }
+      instance.setOptions(polylineOptions);
+    } else {
+      const initialPath = path !== null && path !== void 0 ? path : defaultPath;
+      const polylineOptionsWithPath = Object.assign({}, polylineOptions);
+      if (initialPath && Array.isArray(initialPath)) {
+        polylineOptionsWithPath.path = initialPath;
+      }
+      instance = new google.maps.Polyline(polylineOptionsWithPath);
+    }
+    setMapObjectOptions(instance, polylineOptions, { alreadyApplied: true });
+    instance.setMap(map);
+    setPolyline(instance);
+    return () => {
+      instance.setMap(null);
+      setPolyline(null);
+    };
+  }, [map, externalPolyline]);
+  useMapsEventListener(polyline, "click", onClick);
+  useMapsEventListener(polyline, "drag", onDrag);
+  useMapsEventListener(polyline, "dragstart", onDragStart);
+  useMapsEventListener(polyline, "mouseover", onMouseOver);
+  useMapsEventListener(polyline, "mouseout", onMouseOut);
+  useMapsEventListener(polyline, "dragend", (e) => {
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e);
+    if (onPathChanged && polyline && !isUpdatingRef.current) {
+      onPathChanged(polyline.getPath().getArray());
+    }
+  });
+  useEffect(() => {
+    if (!polyline || !onPathChanged)
+      return;
+    const mvcPath = polyline.getPath();
+    if (!mvcPath)
+      return;
+    const handlePathChange = () => {
+      if (!isUpdatingRef.current) {
+        onPathChanged(mvcPath.getArray());
+      }
+    };
+    const listeners2 = [
+      google.maps.event.addListener(mvcPath, "insert_at", handlePathChange),
+      google.maps.event.addListener(mvcPath, "remove_at", handlePathChange),
+      google.maps.event.addListener(mvcPath, "set_at", handlePathChange)
+    ];
+    return () => {
+      listeners2.forEach((listener) => listener.remove());
+    };
+  }, [
+    polyline,
+    onPathChanged,
+    path,
+    encodedPath,
+    polylineOptions.editable,
+    polylineOptions.draggable
+  ]);
+  useEffect(() => {
+    if (!polyline)
+      return;
+    setMapObjectOptions(polyline, polylineOptions);
+  }, [polyline, polylineOptions]);
+  useEffect(() => {
+    if (!polyline || !path)
+      return;
+    const currentPath = polyline.getPath();
+    if (!pathEquals(path, currentPath)) {
+      isUpdatingRef.current = true;
+      polyline.setPath(path);
+      isUpdatingRef.current = false;
+    }
+  }, [polyline, path]);
+  useEffect(() => {
+    if (!polyline || !encodedPath || !geometryLibrary)
+      return;
+    isUpdatingRef.current = true;
+    const decodedPath = geometryLibrary.encoding.decodePath(encodedPath);
+    polyline.setPath(decodedPath);
+    isUpdatingRef.current = false;
+  }, [polyline, encodedPath, geometryLibrary]);
+  return polyline;
+}
+const Polyline = forwardRef((props, ref) => {
+  const polyline = usePolyline(props);
+  useImperativeHandle(ref, () => polyline, [polyline]);
+  return React__default.createElement(React__default.Fragment, null);
+});
+Polyline.displayName = "Polyline";
 function useMarker(props) {
   const [marker, setMarker] = useState(null);
   const map = useMap();
-  const {
-    onClick,
-    onDrag,
-    onDragStart,
-    onDragEnd,
-    onMouseOver,
-    onMouseOut
-  } = props, markerOptions = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    position,
-    draggable
-  } = markerOptions;
+  const { onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut } = props, markerOptions = __rest(props, ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut"]);
+  const { position, draggable } = markerOptions;
   useEffect(() => {
     if (!map) {
-      if (map === void 0) console.error("<Marker> has to be inside a Map component.");
+      if (map === void 0)
+        console.error("<Marker> has to be inside a Map component.");
       return;
     }
     const newMarker = new google.maps.Marker(markerOptions);
@@ -1316,35 +2821,107 @@ function useMarker(props) {
     };
   }, [map]);
   useEffect(() => {
-    if (!marker) return;
+    if (!marker)
+      return;
     const m = marker;
     const gme = google.maps.event;
-    if (onClick) gme.addListener(m, "click", onClick);
-    if (onDrag) gme.addListener(m, "drag", onDrag);
-    if (onDragStart) gme.addListener(m, "dragstart", onDragStart);
-    if (onDragEnd) gme.addListener(m, "dragend", onDragEnd);
-    if (onMouseOver) gme.addListener(m, "mouseover", onMouseOver);
-    if (onMouseOut) gme.addListener(m, "mouseout", onMouseOut);
+    if (onClick)
+      gme.addListener(m, "click", onClick);
+    if (onDrag)
+      gme.addListener(m, "drag", onDrag);
+    if (onDragStart)
+      gme.addListener(m, "dragstart", onDragStart);
+    if (onDragEnd)
+      gme.addListener(m, "dragend", onDragEnd);
+    if (onMouseOver)
+      gme.addListener(m, "mouseover", onMouseOver);
+    if (onMouseOut)
+      gme.addListener(m, "mouseout", onMouseOut);
     marker.setDraggable(Boolean(draggable));
     return () => {
       gme.clearInstanceListeners(m);
     };
-  }, [marker, draggable, onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut]);
+  }, [
+    marker,
+    draggable,
+    onClick,
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    onMouseOver,
+    onMouseOut
+  ]);
   useEffect(() => {
-    if (!marker) return;
-    if (markerOptions) marker.setOptions(markerOptions);
+    if (!marker)
+      return;
+    if (markerOptions)
+      marker.setOptions(markerOptions);
   }, [marker, markerOptions]);
   useEffect(() => {
-    if (draggable || !position || !marker) return;
+    if (draggable || !position || !marker)
+      return;
     marker.setPosition(position);
   }, [draggable, position, marker]);
   return marker;
 }
-forwardRef((props, ref) => {
+const Marker = forwardRef((props, ref) => {
   const marker = useMarker(props);
   useImperativeHandle(ref, () => marker, [marker]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  return React__default.createElement(React__default.Fragment, null);
+});
+Marker.displayName = "Marker";
+function useRectangle(props) {
+  var _a, _b, _c;
+  const { onClick, onDrag, onDragStart, onDragEnd, onMouseOver, onMouseOut, onBoundsChanged, bounds, defaultBounds } = props, destructuredOptions = __rest(props, ["onClick", "onDrag", "onDragStart", "onDragEnd", "onMouseOver", "onMouseOut", "onBoundsChanged", "bounds", "defaultBounds"]);
+  const [rectangle, setRectangle] = useState(null);
+  const map = useMap();
+  const rectangleOptions = useMemoized(Object.assign(Object.assign({}, destructuredOptions), { clickable: (_a = destructuredOptions.clickable) !== null && _a !== void 0 ? _a : Boolean(onClick), draggable: (_b = destructuredOptions.draggable) !== null && _b !== void 0 ? _b : Boolean(onDrag || onDragStart || onDragEnd || onBoundsChanged), editable: (_c = destructuredOptions.editable) !== null && _c !== void 0 ? _c : Boolean(onBoundsChanged) }), deepEqual);
+  useEffect(() => {
+    if (!map) {
+      if (map === void 0)
+        console.error("<Rectangle> has to be inside a Map component.");
+      return;
+    }
+    const newRectangle = new google.maps.Rectangle(Object.assign(Object.assign({}, rectangleOptions), { bounds: bounds !== null && bounds !== void 0 ? bounds : defaultBounds }));
+    setMapObjectOptions(newRectangle, rectangleOptions, { alreadyApplied: true });
+    newRectangle.setMap(map);
+    setRectangle(newRectangle);
+    return () => {
+      newRectangle.setMap(null);
+      setRectangle(null);
+    };
+  }, [map]);
+  useMapsEventListener(rectangle, "click", onClick);
+  useMapsEventListener(rectangle, "drag", onDrag);
+  useMapsEventListener(rectangle, "dragstart", onDragStart);
+  useMapsEventListener(rectangle, "dragend", onDragEnd);
+  useMapsEventListener(rectangle, "mouseover", onMouseOver);
+  useMapsEventListener(rectangle, "mouseout", onMouseOut);
+  useMapsEventListener(rectangle, "bounds_changed", onBoundsChanged ? () => {
+    onBoundsChanged(rectangle === null || rectangle === void 0 ? void 0 : rectangle.getBounds());
+  } : null);
+  useEffect(() => {
+    if (!rectangle)
+      return;
+    setMapObjectOptions(rectangle, rectangleOptions);
+  }, [rectangle, rectangleOptions]);
+  useEffect(() => {
+    if (!rectangle || !bounds)
+      return;
+    if (!boundsEquals(bounds, rectangle.getBounds())) {
+      rectangle.setBounds(bounds);
+    }
+  }, [rectangle, bounds]);
+  return rectangle;
+}
+const Rectangle = forwardRef((props, ref) => {
+  const rectangle = useRectangle(props);
+  useImperativeHandle(ref, () => rectangle, [
+    rectangle
+  ]);
+  return React__default.createElement(React__default.Fragment, null);
 });
+Rectangle.displayName = "Rectangle";
 const title = "title__jE00O";
 const description = "description__bjRoW";
 const link = "link__AM1ap";
@@ -1394,6 +2971,7 @@ function hasMarkerInfoWindowFields(location, mapData) {
   );
 }
 const GoogleMapMarker = ({
+  index,
   location,
   infoWindowOpen,
   onMarkerClick,
@@ -1406,7 +2984,7 @@ const GoogleMapMarker = ({
   const { isLinkValid, anchorProps } = getLinkInfo(location);
   const handleMarkerClick = () => {
     var _a2;
-    onMarkerClick == null ? void 0 : onMarkerClick({
+    onMarkerClick == null ? void 0 : onMarkerClick(index, {
       type: "markerClicked",
       address: location.address,
       location: {
@@ -1477,7 +3055,7 @@ const GoogleMapMarker = ({
       InfoWindow,
       {
         position,
-        pixelOffset: [0, -32],
+        pixelOffset: INFO_WINDOW_PIXEL_OFFSET,
         shouldFocus: false,
         maxWidth: 300,
         minWidth: 228,
@@ -1690,10 +3268,14 @@ const GoogleMapReactInner = forwardRef((props, forwardedRef) => {
     },
     [onMapClicked, id]
   );
-  const handleMarkerClicked = (index) => (data) => {
-    setOpenInfoWindowIndex(openInfoWindowIndex === index ? null : index);
-    onMarkerClicked == null ? void 0 : onMarkerClicked(data);
-  };
+  const handleMarkerClicked = useCallback(
+    (index, data) => {
+      setOpenInfoWindowIndex((current) => current === index ? null : index);
+      onMarkerClicked == null ? void 0 : onMarkerClicked(data);
+    },
+    [onMarkerClicked]
+  );
+  const closeInfoWindow = useCallback(() => setOpenInfoWindowIndex(null), []);
   useImperativeHandle(
     forwardedRef,
     () => createImperativeMethods(
@@ -1737,7 +3319,7 @@ const GoogleMapReactInner = forwardRef((props, forwardedRef) => {
     ]
   );
   return /* @__PURE__ */ jsx(
-    Map,
+    Map$1,
     {
       onCenterChanged: (e) => handleCenterChanged(e.detail.center),
       onZoomChanged: (e) => handleZoomChange(e.detail.zoom),
@@ -1752,10 +3334,11 @@ const GoogleMapReactInner = forwardRef((props, forwardedRef) => {
       children: mapData.locations.map((location, index) => /* @__PURE__ */ jsx(
         GoogleMapMarker$1,
         {
+          index,
           location,
           infoWindowOpen: openInfoWindowIndex === index && hasMarkerInfoWindowFields(location, mapData),
-          onMarkerClick: handleMarkerClicked(index),
-          onInfoWindowClose: () => setOpenInfoWindowIndex(null),
+          onMarkerClick: handleMarkerClicked,
+          onInfoWindowClose: closeInfoWindow,
           showDirectionLink: mapData.showDirectionsLink,
           allyTargetBlankDescription: translations.allyTargetBlankDescription
         },