js-markerwithlabel
js-markerwithlabel copied to clipboard
Access to label event element
Environment details
- Specify the API at the beginning of the title (for example, "Places: ...")
- MarkerWithLabel
- OS type and version
- OSX
- Library version and other environment information
- version: 2.0.0
Steps to reproduce
When updating label content using marker.labelContent
setter, entire child element is removed and re-created. This makes it difficult to animate the marker label content. I'm using React.createPortal to update the content of marker.labelContent without un-mounting. As the event div also needs to be updated for mouse and click events to work, it would be great if we can expose the event div as well on marker instance.
Rough demo code
function CustomMarker({ children }) {
const [mapMarker, setMapMarker] = useState<MarkerWithLabel | null>(null);
useEffect(() => {
const labelContentEl = document.createElement('div');
const marker = new MarkerWithLabel({ labelContent: labelContentEl });
setMapMarker(marker);
}, []);
// This fails because mapMarker.labelContent is string.
return mapMarker
? <>
{React.createPortal(children, mapMarker.labelElement)}
{/* Update both event div and content div */}
{React.createPortal(children, mapMarker.labelEventElement)}
</>
: null;
}