refactor: replace map-div with gmp-map custom element

Author: usefulthink

examples/basic-map/src/app.tsx

@@ -8,7 +8,7 @@ const API_KEY =
   globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
 const App = () => (
-  <APIProvider apiKey={API_KEY}>
+  <APIProvider apiKey={API_KEY} version={'beta'}>
     <Map
       defaultZoom={3}
       defaultCenter={{lat: 22.54992, lng: 0}}

examples/multiple-maps/src/app.tsx

@@ -41,7 +41,7 @@ const App = () => {
   }, []);
 
   return (
-    <APIProvider apiKey={API_KEY}>
+    <APIProvider apiKey={API_KEY} version={'beta'}>
       <div
         style={{
           height: '100%',

src/components/map/index.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable complexity */
 import React, {
   CSSProperties,
+  DOMAttributes,
   PropsWithChildren,
+  RefAttributes,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -185,18 +187,39 @@ export const Map = (props: PropsWithChildren<MapProps>) => {
   }
 
   return (
-    <div
+    <gmp-map
       ref={mapRef}
       data-testid={'map'}
-      style={className ? undefined : combinedStyle}
+      style={className ? undefined : (combinedStyle as CSSStyleDeclaration)}
       className={className}
       {...(id ? {id} : {})}>
       {map ? (
         <GoogleMapsContext.Provider value={contextValue}>
           {children}
         </GoogleMapsContext.Provider>
       ) : null}
-    </div>
+    </gmp-map>
   );
 };
+
 Map.deckGLViewProps = true;
+
+type CustomElement<T> = Partial<
+  T &
+    DOMAttributes<T> &
+    RefAttributes<T> & {
+      // for whatever reason, anything else doesn't work as children
+      // of a custom element, so we allow `any` here
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children: any;
+    }
+>;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      ['gmp-map']: CustomElement<google.maps.MapElement>;
+    }
+  }
+}

src/components/map/use-map-instance.ts

@@ -11,6 +11,16 @@ import {
   useTrackedCameraStateRef
 } from './use-tracked-camera-state-ref';
 
+function useMapElementDefined() {
+  const [isDefined, setIsDefined] = useState(false);
+
+  useEffect(() => {
+    customElements.whenDefined('gmp-map').then(() => setIsDefined(true));
+  }, []);
+
+  return isDefined;
+}
+
 /**
  * The main hook takes care of creating map-instances and registering them in
  * the api-provider context.
@@ -23,12 +33,13 @@ export function useMapInstance(
   context: APIProviderContextValue
 ): readonly [
   map: google.maps.Map | null,
-  containerRef: Ref<HTMLDivElement>,
+  containerRef: Ref<google.maps.MapElement>,
   cameraStateRef: CameraStateRef
 ] {
   const apiIsLoaded = useApiIsLoaded();
+  const mapElementDefined = useMapElementDefined();
   const [map, setMap] = useState<google.maps.Map | null>(null);
-  const [container, containerRef] = useCallbackRef<HTMLDivElement>();
+  const [container, containerRef] = useCallbackRef<google.maps.MapElement>();
 
   const cameraStateRef = useTrackedCameraStateRef(map);
 
@@ -63,11 +74,13 @@ export function useMapInstance(
   // create the map instance and register it in the context
   useEffect(
     () => {
-      if (!container || !apiIsLoaded) return;
+      if (!container || !apiIsLoaded || !mapElementDefined) return;
 
       const {addMapInstance, removeMapInstance} = context;
       const mapId = props.mapId;
-      const newMap = new google.maps.Map(container, mapOptions);
+      // const newMap = new google.maps.Map(container, mapOptions);
+      const newMap = container.innerMap;
+      newMap.setOptions(mapOptions);
 
       setMap(newMap);
       addMapInstance(newMap, id);
@@ -105,7 +118,7 @@ export function useMapInstance(
     //    changes should be ignored
     //  - mapOptions has special hooks that take care of updating the options
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [container, apiIsLoaded, id, props.mapId]
+    [container, apiIsLoaded, mapElementDefined, id, props.mapId]
   );
 
   return [map, containerRef, cameraStateRef] as const;