googlemaps / googlemaps/js-markerwithlabel
Does not work with collisionBehavior on vector maps
- Dominant language
- TypeScript
- Stars
- 77
- Forks
- 20
- PR merge metrics
- No merged PRs in 30d
Description
Thank you for the library.
I'm currently using the vector maps with the new [Marker Collision Management](https://developers.google.com/maps/documentation/javascript/examples/marker-collision-management) which is currently in **beta**.
My use case is that I have many markers and I'm using the collision behavior `google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY` to hide overlapped markers with lower priority.
This works well for markers constructed as `google.maps.Marker` without any labels. As soon as I start to use labels with `MarkerWithLabel`, I'm seeing leftover labels for markers which are hidden.
The following example shows the collision behavior where only 2 markers remain visible while 11 markers should be hidden:
- `google.maps.Marker`:

- `MarkerWithLabel`:

#### Environment details
1. Specify the API at the beginning of the title (for example, "Places: ...")
- Maps JavaScript API [beta channel](https://developers.google.com/maps/documentation/javascript/versions) (v=beta)
- Map type: vector map
2. OS type and version
- all
5. Library version and other environment information
- `@googlemaps/markerwithlabel": "2.0.9`
#### Steps to reproduce
Please check out the beta documentation for [Marker Collision Management](https://developers.google.com/maps/documentation/javascript/examples/marker-collision-management) which is used as a base for this example.
#### Code example
```
// add 13 markers to the map and apply collision behavior
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
mapId: "3a3b33f0edd6ed2a", // important: this needs to refer to a vector map for JavaScript
center: { lat: 47.609414458375674, lng: -122.33897030353548 },
zoom: 17,
} as google.maps.MapOptions
);
[
[-122.3402, 47.6093],
[-122.3402, 47.6094],
[-122.3403, 47.6094],
[-122.3384, 47.6098],
[-122.3389, 47.6095],
[-122.3396, 47.6095],
[-122.3379, 47.6097],
[-122.3378, 47.6097],
[-122.3396, 47.6091],
[-122.3383, 47.6089],
[-122.3379, 47.6093],
[-122.3381, 47.6095],
[-122.3378, 47.6095],
].map(
([lng, lat]: number[], i: number) =>
new MarkerWithLabel({
position: new google.maps.LatLng({ lat, lng }),
map,
zIndex: i, // assign zIndex which is used as the priority for the marker (higher zIndex = higher priority)
labelContent: `Marker: ${i + 1}`, // provide label to the marker
collisionBehavior:
google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY, // don't show marker if overlapped by higher prio
})
);
```
Thank you for your support.
Contributor guide
Assessment
This issue has not been assessed yet.