docs: update map-3d example for react-19 (#680)

Author: usefulthink

examples/map-3d/src/map-3d/map-3d-types.ts

@@ -10,25 +10,18 @@ declare module '@vis.gl/react-google-maps' {
 
 // add the <gmp-map-3d> custom-element to the JSX.IntrinsicElements
 // interface, so it can be used in jsx
-declare global {
+declare module 'react' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       ['gmp-map-3d']: CustomElement<
         google.maps.maps3d.Map3DElement,
-        {
-          [key in GmpMap3DAttributeNames]?: string;
-        }
+        google.maps.maps3d.Map3DElement
       >;
     }
   }
 }
 
-type GmpMap3DAttributeNames = keyof Omit<
-  google.maps.maps3d.Map3DElementOptions,
-  'bounds'
->;
-
 // a helper type for CustomElement definitions
 type CustomElement<TElem, TAttr> = Partial<
   TAttr &

examples/map-3d/src/map-3d/map-3d.tsx

@@ -61,24 +61,16 @@ export const Map3D = forwardRef(
       google.maps.maps3d.Map3DElement | null
     >(forwardedRef, () => map3DElement, [map3DElement]);
 
-    const centerString = useMemo(() => {
-      const lat = center?.lat ?? 0.0;
-      const lng = center?.lng ?? 0.0;
-      const altitude = center?.altitude ?? 0.0;
-
-      return [lat, lng, altitude].join(',');
-    }, [center?.lat, center?.lng, center?.altitude]);
-
     if (!customElementsReady) return null;
 
     return (
       <gmp-map-3d
         ref={map3dRef}
-        center={centerString}
-        range={String(props.range)}
-        heading={String(props.heading)}
-        tilt={String(props.tilt)}
-        roll={String(props.roll)}></gmp-map-3d>
+        center={center}
+        range={props.range}
+        heading={props.heading}
+        tilt={props.tilt}
+        roll={props.roll}></gmp-map-3d>
     );
   }
 );