googlemaps / googlemaps/js-markerwithlabel

Does not work with collisionBehavior on vector maps

Open
#493 2 comments 0 reactions 0 assignees View on GitHub
triage me type: bug
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`:
![image](https://user-images.githubusercontent.com/1514111/162571225-13bdf273-c4b1-4f49-b586-85a5223b8175.png)

- `MarkerWithLabel`:
![image](https://user-images.githubusercontent.com/1514111/162571432-3635dc13-1c7b-4c34-b1cd-33a22544e387.png)

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

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.