VueJS - Rendering Thousands of Advanced Google Map Marker

Rendering thousands of Google Map markers without clustering can be a challenging task, especially when prioritizing performance and visual clarity. By using a custom overlay instead of traditional markers provides greater flexibility in managing complex visual elements directly in the DOM.

This approach enables precise control over marker rendering and interactions, making it ideal for scenarios where clustering is not feasible or desired, such as representing distinct data points that must remain individually visible.

Note: This approach isnt just for vue but can be done in any framework as well.

Let's go through the process and see how I manage to render thousands of google map marker.

Performance Problem

Some users may want to view all markers on a map without using clustering for various reasons. However, rendering a large number of markers—say, 5,000 or more—on Google Maps can lead to significant performance issues, even during the initial load. Despite optimizations like using png instead of svg (as Google Maps optimizes them); you can read more about it here, setting marker sizes, and batch rendering, the initial render remains sluggish, and dragging the map feels unresponsive, resulting in a subpar user experience.

At first, I thought there might be something wrong with my implementation. However, after extensive research, I came across an issue tracker related to rendering a large number of markers on Google Maps. You can find more details here: Google Issue Tracker. After reviewing this, I’m assured that I’ve done everything possible to optimize the code, but the root cause maybe lies with the Google Maps marker itself.

Some of the comments from the issue tracker.

Wait, google gave us AdvancedMarker, saying they are better in all aspects, but they can't even display 200 of them? Considering this, google should maybe keep both, marker and advancedmarker, alive. You could add to the docs that one should use normal marker if the number of them exceeds some amount.

with old markers, we allowed up to 1500 without clustering. With new ones i find 200-250 is equivalent in performance, 500 has some short freezes already and increased memory usage. Custom SVG/html - but overall the complex of these elements is equivalent to the default google markers - and i get similar performance drops with default markers.

Solution

I initially considered using a canvas for rendering the custom overlay with the marker in it and to refactor everything as it seemed like a more performant solution. However, since I’m not familiar with the approach, implementing it would take me several days or even weeks so I needed other approach. After further debugging, reading blogs, searching related stuff about maps I came across an old video and blog from Redfin where they explained how they developed their own custom marker solution. You can see the blog here and the youtube video on this link. This gave me an idea on how to implement this.

The gist of this is that you need to create a custom overlay which will be used to render your own custom marker. Here is a snippet of the code that I did. Note: This is not the full code of the custom marker and there are still a lot of handling and optimization that I did.

You can check the google maps documentation for the custom marker overlay for more info. Take note when updating the position of the marker use translate since its more performant than setting the top and left of the marker.

class CustomMarker {

    draw(): void {
        if (! this._div) return //Return if div has already been removed
        this.updateMarkerPosition()
    }

    onAdd(): void {
        this._map = this.getMap() as google.maps.Map

        this._div = document.createElement('div');
        this._div!.style.position = 'absolute';
        this._div!.style.zIndex = '5';
        this._div!.style.width = '100%';
        this._div!.style.height = '100%';

        const panes = this.getPanes();
        panes?.overlayMouseTarget.appendChild(this._div);

        this._lhInfoWindow.setMap(this._map)
    }

    generateMarkers() {
      if (! this._div) return

      const overlayProjection = this.getProjection()
      if (! overlayProjection) return

      const markerInnerHTML: string[] = []

      let totalMarkers = this._markers.length
      // //Random marker price to show
      const zoom = this._map?.getZoom()
      if (! zoom) return

      const offsetMarkerHeight = this.getMarkerOffsetY(zoom)

      while(totalMarkers--) {
        //get current marker
        const currentMarker = this._markers[totalMarkers]
        const divPixel = overlayProjection.fromLatLngToDivPixel({
          lat: +currentMarker.lat!,
          lng: +currentMarker.lng!
        })

        const position = {
          x: divPixel?.x! - 15,
          y: divPixel?.y! - offsetMarkerHeight
        }

        markerInnerHTML.push(generateMarker(currentMarker, position))
      }

      this._div!.innerHTML = markerInnerHTML.join('')
      this._divMarkers = this._div?.children
    }
}