CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3deck.glreact-google-maps-api
Owenn
Owenn

Reputation: 1160

Using Google Maps API with DeckGLOverlay throws an undefined error

So I'm following this example by visgl from this PR: https://github.com/visgl/react-google-maps/blob/1a0ac6e13d15ceda5212d310ffc2370ffdd90e65/examples/deckgl-overlay/src/app.tsx

I even am using the same exact DATA_URL that's provided in the example PR. However, it throws me an error, where it says

cannot read properties of null (reading 'fromLatLngToDivPixel')

I tried debugging this, and I found that this issue arise due to this useEffect inside of the DeckGlOverlay:

  useEffect(() => {
    deck.setMap(map);

    return () => deck.setMap(null);
  }, [map]);

If I comment this out, the map renders out fine, but if I try to include this useEffect, it will throw the error above. What am I missing here?

UPDATE

The only difference I see is that: 
      <Map
        style={{ width: "85vw", height: "85vh" }}
        defaultCenter={{ lat: 37.74, lng: -122.4 }}
        zoom={11}
        gestureHandling={"greedy"}
        disableDefaultUI
      >
        <DeckGlOverlay layers={getDeckGlLayers(data)} />
      </Map>

In my component, I'm using style here, because if I don't set this, I won't see the map anywhere.

Upvotes: 0

Views: 57

Answers (0)

Related Questions