!!! 1 PerfomanceTest Google Maps

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

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(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
    });
  }
  
  for (i = 0; i < lines.length; i++) {
     lines[i].setMap(map);  
  }
  
}

function createDPath()
{
    if(!this.path) return '';
    var projection = this.getProjection();
    var p = this.getMap().getProjection(); 
    var pathParts = [];
    
    for (i = 0; i < this.path.length; i++) {
      var pt = p.fromLatLngToPoint(this.path[i]); 
    	pathParts.push("L" + pt.x + " " + pt.y);
    }
    pathParts[0] = 'M' + pathParts[0].substr(1, pathParts[0].length)
    return pathParts.join(' ');
}


function CustomPolyline(opts) {
  this.path = opts.path;
  this.zIndex = opts.zIndex || 1000;
  this.strokeColor = opts.strokeColor || 'black';
  this.strokeWidth = opts.strokeWidth || 2;
  
  
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.style.position = 'absolute';
  svg.style.pointerEvents = 'none';
  svg.setAttribute('preserveAspectRatio', 'xMinYMin slice');
  svg.style.zIndex = this.zIndex;
  
  var svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  svgPath.style.fill = 'none';
 ...