React + Google Maps + Material UI: Is it possible to use React components inside an InfoWindow?

Question

I'm creating a web application using React, MUI and the Google Maps API for React (@react-google-maps/api). See the code that follows.

const NodePin = (props) => {
    const [infoOpen, setInfoOpen] = useState(false);

    return (
        <Marker
            position={{lat: pins[props.pin].lat, lng: pins[props.pin].lng}}
            onClick={() => setInfoOpen(true)}
            label={{
                text: `${pins[props.pin].name}`,
                fontWeight: '600',
                //color: "#F75C03"
                strokeWeight: 1,
            }}
            options={{
                icon: {
                    url: props.pinsSelected[props.pin] ? mapPin.node.on : mapPin.node.off,
                    scaledSize: { width: 40, height: 40 },
                    labelOrigin: { x: 20, y: 52}
                }
            }}
        >
            {infoOpen && (
                <InfoWindow
                    onCloseClick={() => setInfoOpen(false)}
                >
                    <p>{pins[props.pin].name}</p>
                </InfoWindow>
            )}
        </Marker>
    );
}

I would like to know if it is possible to use a React+MUI component inside the <InfoWindow> of a <Marker> component. Actually, I would like to insert a <Button> inside the <InfoWindow> to change the state of the component.

Answer 1

Yes, it is possible! :-) Just insert the <div> tag inside the <InfoWindow>. In this case, my code should look like this.

<InfoWindow
    onCloseClick={() => setInfoOpen(false)}
>
    <div>
        <p>{pins[props.pin].name}</p>
        <Stack direction="row" spacing={1} alignItems="center">
            <Typography>Seleção</Typography>
            <MaterialUISwitch
                checked={checked}
                onChange={()=>setChecked(!checked)}
            />
        </Stack>
    </div>
</InfoWindow>