!!! Perfomance: Overlays Google Maps (single SVGs)

PerfomanceTest Google Maps

by Leo

HTML

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBDvnikgZ00aQKEB0wXD1TQCgX6610wuzk"></script>
<body onload="init()">
  <div id="map" class="customMap"></div>
</body>

CSS

.customMap {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

JavaScript

function init() {
  var myLatLng = new google.maps.LatLng(0, -179);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  var lines = new Array(1000);
  for (i = 0; i < lines.length; i++) {
  	let pathLength = 100;
  	let path = [];
    for (j = 0; j < pathLength; j++) {
    	path.push(new google.maps.LatLng(170/lines.length*i-85, 360/pathLength*j-180));
    }
  	lines[i] = new CustomPolyline({
    	path: path,
      zIndex: i,
      strokeOpacity: 0.3
    });
  }
  
  for (i = 0; i < lines.length; i++) {
     lines[i].setMap(map);  
  }
}

function CustomPolyline(opts) {
  this.path = opts.path;
  this.zIndex = opts.zIndex || 1000;
  this.strokeColor = opts.strokeColor || 'black';
  this.strokeWidth = opts.strokeWidth || 2;
  this.strokeOpacity = opts.strokeOpacity || 1;
};

CustomPolyline.prototype = new google.maps.OverlayView();

CustomPolyline.prototype.onAdd = function() 
{
  var svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  svgPath.style.fill = 'none';
  svgPath.style.pointerEvents = 'visiblePainted';
  svgPath.style.stroke = this.strokeColor || 'black';
  svgPath.style.strokeWidth = this.strokeWeight || 2;
  svgPath.style.strokeOpacity = this.strokeOpacity || 1;
  svgPath.setAttribute('vector-effect', 'non-scaling-stroke'); 
  this.svgPath = svgPath;
  
  var svg = document.getElementById('svg-overlay-872q68716248hjg');
  if (!svg)
  {
      svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.id = 'svg-overlay-872q68716248hjg';
      svg.style.position = 'absolute';
      svg.style.pointerEvents = 'none';
      svg.setAttribute('preserveAspectRatio', 'xMinYMin slice');
      svg.style.zIndex = this.zIndex;
  }
  this.svg = svg;

  svg.appendChild(this.svgPath);
  this.getPanes().overlayImage.appendChild(this.svg);
  
  google.maps.event.addDomListener(this.getMap(), 'idle',...