Google Maps Overlay View with React

google-maps-react-overlay-view.tsx

type PopupConfig = {
  map: google.maps.Map;
  content: React.Component;
  position: google.maps.LatLng;
}

class Popup extends google.maps.OverlayView {
    private readonly container: HTMLDivElement;
    private content: ComponentChild;
    private position: google.maps.LatLng;

    constructor({ map, content, position }: PopupConfig) {
        super();
        // The container is a div that we can feed to Google Maps and attach our React content to
        this.container = document.createElement('div');
        this.container.style.position = 'absolute';
        this.setMap(map);
        this.content = content;
    }

    public onAdd(): void {
        this.getPanes().floatPane.appendChild(this.container);
    }

    public draw(): void {
        // The draw function is called every time the Popup needs to render 
        // so here we will use React to render our content (React.Component) 
        React.render(this.content, this.container);
    }

    public onRemove(): void {
        if (this.container.parentElement) {
            this.container.parentElement.removeChild(this.container);
        }
    }
}