<MarkerCluster> forces re-renders as <Marker> elements change

[tlhunter]

I have an application using this package to display maps and markers. Up until now it displayed the markers directly on the screen without clustering. The app uses a v-for to display a list of Marker elements. It also uses a v-bind:key on the Marker elements so that when the user pans and elements are replaced, markers that were previously drawn aren't redrawn.

Here's an example of the markers not being redrawn. Open this URL and pan around and you'll see that the markers don't jitter:

https://app.radar.chat/map/glbra-stem-pipeline/@43.74317,-84.30412,9z

Now, I've added support for CustomMarker on most of the maps. It appears that upon doing so, the markers are constantly being redrawn when the elements are updated. With every pan operations and replacement of data, all of the Marker and CustomMarker groups disappear then reappear as the browser repaints them. This even happens when the map is zoomed in and only naked Markers that aren't currently clustered are displayed. Here's an example of this:

https://app.radar.chat/map/sfpd/@37.78537,-122.40414,15z

Is there a way to get the CustomMarkers to not be repainted with every DOM update?

Here is what the code looks like:

    <!-- repaints -->
    <MarkerCluster v-if="!noCluster">
      <MapMarker
        v-bind:key="'msg-mrk-' + post.id"
        v-for="post in posts"
        @click="onMarkerClick(post.id)"
        :options="{ ... }"
      />
    </MarkerCluster>
    <div v-else>
      <!-- no repaints -->
      <MapMarker
        v-bind:key="'msg-mrk-' + post.id"
        v-for="post in posts"
        @click="onMarkerClick(post.id)"
        :options="{ ... }"
      />
    </div>

[HusamElbashir]

Hi @tlhunter

Would you be able to share a minimal reproduction on vite.new/vue? Also does the issue occur when you cluster one type of marker or is it only when you mix markers/custom markers?

[tlhunter]

A reproduction for this is attached to issue #85, in the performance section of this comment: https://github.com/inocan-group/vue3-google-map/issues/85#issuecomment-1166060834

[HusamElbashir]

This is coming from upstream. Removing marker(s) will cause MarkerClusterer to recalculate and redraw all clusters: https://github.com/googlemaps/js-markerclusterer/blob/993ef85d6f0f58fc66715160c4f81423561ed038/src/markerclusterer.ts#L119-L135

[tlhunter]

Perf is pretty good after grabbing 0.13.2. Closing.