googlemaps / googlemaps/js-markerwithlabel

Access to label event element

Open
#413 0 comments 0 reactions 0 assignees View on GitHub
triage me type: feature request
Dominant language
TypeScript
Stars
77
Forks
20
PR merge metrics
No merged PRs in 30d

Description

#### Environment details

1. Specify the API at the beginning of the title (for example, "Places: ...")
- MarkerWithLabel
2. OS type and version
- OSX
3. 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

```tsx
function CustomMarker({ children }) {
const [mapMarker, setMapMarker] = useState(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;
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.