maps3d?

[alienatorZ]

How can we use maps 3d?
The traditional way is:

<gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>

But when I add maps3d to the libraries of APIProvider nothing shows up.

[mrMetalWood]

Hi,

this would be a basic way to get it working:

const App = () => {
  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
  const containerRef = useCallback(
    (value: HTMLDivElement) => setMapContainer(value),
    [setMapContainer]
  );

  useEffect(() => {
    if (!mapContainer) return;

    const map = document.createElement('gmp-map-3d');

    map.center = {
      lat: 37.73003191805439,
      lng: -119.6366123940122,
      altitude: 2000
    };
    map.heading = 60.39;
    map.tilt = 75.76;
    map.range = 6020;

    mapContainer.appendChild(map);
  }, [mapContainer]);

  return (
    <APIProvider apiKey={API_KEY} libraries={['maps3d']} version="alpha">
      <div ref={containerRef} style={{width: '100vw', height: '100vh'}} />
    </APIProvider>
  );
};

export default App;

Note that this is still in alpha and support and type integrations may not be specified or work as expected. We might add an example how to deal with the 3dmap or web components in general in the future.