Marker3DElement support

[hosek]

Hi, first thanks for the superb library, its working like charm. I tried 3D recently and just want to ask if Marker3DElement is supported in current version, or not yet. Thank you in advance!

[hosek]

Solved with gmp-marker-3d

[usefulthink]

Have a look at the component here: https://github.com/visgl/react-google-maps/blob/main/examples/map-3d/src/map-3d/map-3d.tsx – I think components for marker/polygon/polyline/model could be built along the same lines, but I haven't had the time for that yet. If you build it, it would be really cool if you could share it so it can be added to the example.

[hosek]

Thats exactly where I started, but I needed initial kick to stop looking for Marker3DElement react component :)
Changes:

    const [customElementsReady, setCustomElementsReady] = useState(false);
    useEffect(() => {
      Promise.all([
        customElements.whenDefined('gmp-map-3d'),
        customElements.whenDefined('gmp-marker-3d'),
      ]).then(() => {
        setCustomElementsReady(true);
      });
    }, []);

and inside map

{markers.map(marker => (
        <gmp-marker-3d
          key={marker.id}
          label={marker.name}
          position={`${marker.position.lat},${marker.position.lng},${marker.position.altitude}`}
          altitude-mode="relative-to-ground"
          collisionBehavior="OPTIONAL_AND_HIDES_LOWER_PRIORITY"/>

I found it here - there are also polygons and PinElements, but I haven't tried them yet.

[usefulthink]

That's an interesting approach to add the markers via a prop of the map-component. But I think I want to actually have the react-components for all the web-components at some point.