Does not work with collisionBehavior on vector maps

Mobiletainment commented 2 years ago

Thank you for the library. I'm currently using the vector maps with the new 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

Specify the API at the beginning of the title (for example, "Places: ...")
- Maps JavaScript API beta channel (v=beta)
- Map type: vector map
OS type and version
- all
Library version and other environment information
- @googlemaps/markerwithlabel": "2.0.9

Steps to reproduce

Please check out the beta documentation for Marker Collision Management which is used as a base for this example.

Code example

<!-- load map using the beta channel -->
<script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=beta"
      defer
></script>

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

jpoehnelt commented 2 years ago

@Mobiletainment Thank you for opening this issue. 🙏 Please check out these other resources that might be applicable:

Support Console - If you have a support contract.
Discord - chat with other developers
StackOverflow - use the google-maps tag
Google Maps Platform issue trackers

This is an automated message, feel free to ignore.

Mobiletainment commented 2 years ago

I tried to inspect how the collision behavior works, but neither of these approaches was successful:

act on zoom changed: since the collisions only change when the zoom has changed, I thought it would be possible to determine which ones are still visible, but apparently the collision behavior doesn't set them to invisible (which may have solved the problem in the first place I guess):
```
map.addListener("zoom_changed", (e) => {
console.log(markers.filter((m) => m.getVisible())); // it still tells me that all markers are visible, despite some of them not being shown
});
```

listen if any events on the marker were fired, e.g.:

markers.forEach((marker) => {
marker.addListener("shape_changed", (e) => {
  console.log("event fired", marker); // never called
});
});

It would be really nice if google maps exposed an event for changes in the collisions.

googlemaps / js-markerwithlabel