CustomOverlay using react app

[krishna-tech-dot]

Hi Team,

I want to implement the custom overlay in the react + typescript application using '@vis.gl/react-google-maps'

Is it possible to share any example in react typescript, so it will easy for me to integrate the 3rd party library using custom overlay by extending the OverlayView functionalities.

Note:
i am using joint js 3rd party library for good visualizations on top of google maps.

[usefulthink]

The basic pattern you can follow for this is relatively simple:

const MyOverlayComponent = () => {
  const map = useMap();

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

    const overlay = new google.maps.OverlayView();

    // ... implement overlay.onAdd, overlay.onRemove, overlay.draw as required

    overlay.setMap(map);

    return () => {
      overlay.setMap(null);
    };
  });
};

And then you can just add it to a Map component like this:

const App = () => (
  <Map {/* ... */} >
    <MyOverlayComponent />
  </Map>
);