Bug: when the marker size is greater than 1000 map loading slowly and browsers getting hang

[Anjgpt]

Please complete all sections that you can but please don't remove any section, otherwise the bot will close your issue because it doesn't meet our issue template (you can remove this comment)

Describe the bug

I'm using "gmap-vue": "^3.5.2" and facing slow performance(Browser hang) when the marker size is greater than 1000. Is there any limit on plotting markers?

<gmap-cluster>
      <gmap-marker
        v-for="(m, index) in vesselsMarker"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        :key="index"
      />
    </gmap-cluster>

To reproduce

Steps to reproduce the behavior:

1. Create a project that shows a map with markers
2. Pass markers objects which have >1000 markers.
3. It tool some time to plot markers and browsers hangs.

Expected behavior

If there is any limit on marker count it should be documented and I think 1k/2k markers should be plotted quickly.

Current behavior

Map loading slowly and browsers getting hang.

Screenshots

.

Desktop (please complete the following information)

• OS: MacOS. big sur
• Browser chrome
• Version [Version 100.0.4896.75 (Official Build) (x86_64)]

Smartphone (please complete the following information)

• Only Web

Additional context

N/A.

Versions

• Node: 16
• NPM:
• Yarn:

Package manager

• [ ] Yarn

Plugin version

• [ ] 1.4.x
• [ ] 1.2.x
• [ ] 1.0.x

[davydnorris]

Have you tried doing the same just using plain Javascript and the Google Maps API directly? Would be good to have some comparisons to see if it's the overhead of Vue or not

[Anjgpt]

Hi @davydnorris , I've tried this with native Google Maps API and it's loaded within 1 sec. https://codesandbox.io/s/vigorous-currying-z4t174?file=/index.ts

[davydnorris]

hmmm that's a shame - I'm playing around with the code for the various shapes at the moment so I'll see if anything stands out in terms of performance issues.

What about if you don't turn on clickable and draggable? Your example plain Javascript code is creating the most elementary Markers possible so would be good to do the exact same in Vue.

[diegoazh]

We wait for your feedback @Anjgpt

[davydnorris]

@Anjgpt can I ask you to do us a favour?

Can you please try this out with:

• vue-google-maps original library
• gmap-vue with individual markers and not using the cluster
• gmap-vue with the cluster as before, but no extra props
• compare to the plain Javascript

I want to try and figure out where the performance issue is coming into play

[Anjgpt]

I've followed these steps mentioned in this article https://tighten.com/blog/improving-google-maps-performance-on-large-datasets/ and it speed up the performance.

Looks like a looping marker component causing delay/slowness.

[davydnorris]

@Anjgpt was there one particular step that made the difference?

[Anjgpt]

This step.

Instead of our markers being added directly to the map, we’ll initialize our clusterer object and add the markers to it inside of the plotMarkers method. Doing so allows us to reduce the template returned from the MyMap component down to the Google Map itself:

[davydnorris]

@Anjgpt oh that's weird - I thought you were already using the cluster because of your code example in the bug explanation?

Is your code any different to your initial report? If you use a cluster then the markers get added to the cluster and not directly to the map

[Anjgpt]

@davydnorris I was using the component earlier and now I've removed them and directly used google Maps API to plot marker and for cluster MarkerClusterer.

This speeds up the performance

[davydnorris]

OK so that sounds like a problem with either the MarkerCluster component or the Marker component.

If you are interested in helping try to locate the problem I'd love if you could set up the same data with the old vue-google-maps library. I am currently rewriting the Drawing Manager and shapes components, which is why I can't do it myself, but because I have my head in that code right now it's a perfect time to try and solve this

[diegoazh]

Migrate to the new version of the plugin for Vue v3