PerfomanceTest

CustomPolyline

by Leo

HTML

<script src="https://maps.google.com/maps/api/js"></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;
}

* {
    transform-origin: 0px 0px 0px;
}

path
{
  pointer-events: none;
}

JavaScript

var miami = new google.maps.LatLng(25.775278, -80.208889);
var orlando = new google.maps.LatLng(28.53750, -81.37890);
var london = new google.maps.LatLng(51.507222, -0.127500);
var bermuda = new google.maps.LatLng(32.321, -64.757);
var sanJuan = new google.maps.LatLng(18.466, -66.118);

var srcImage = "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png";

function init() {
  var myLatLng = new google.maps.LatLng(28.617161, -77.208111);
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  var shape = {
    type: 'poly',
    coords: '8,0,5,1,4,2,3,3,2,4,2,5,1,6,1,7,0,8,0,14,1,15,1,16,2,17,2,18,3,19,3,20,4,21,5,22,5,23,6,24,7,25,7,27,8,28,8,29,9,30,9,33,10,34,10,40,11,40,11,34,12,33,12,30,13,29,13,28,14,27,14,25,15,24,16,23,16,22,17,21,18,20,18,19,19,18,19,17,20,16,20,15,21,14,21,8,20,7,20,6,19,5,19,4,18,3,17,2,16,1,14,1,13,0,8,0'
  };

  shape.coords = shape.coords.split(',');
  
  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({
      	lat: 170/lines.length*i-85,
        lng: 360/pathLength*j-180
      });
    }
  	lines[i] = new CustomPolyline({
    	path: path,
      zIndex: i,
      strokeOpacity:0.3
    });
    lines[i].setMap(map);
  }
  
   for (i = 0; i < lines.length; i++) {
      map.add(lines[i]);
   }

}

var count = makeCounter();

function CustomPath() {}

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

CustomPath.prototype.onAdd = function() {
  var self = this;
  var panes = this.getPanes();
  var svg = null;

  if (document.getElementById('svg-overlay')) {
    svg = document.getElementById('svg-overlay');
  } else {
    svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.id = 'svg-overlay';
    svg.init = false;
  }
  var path = document.createElementNS('http://www.w3.org/2000/svg',...