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.
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>