Google Maps with canvas overlay for displaying marker s with custom icons

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" />
    <title>Google Maps with canvas overlay for displaying marker s with custom icons</title>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="https://rawgit.com/vgrem/6dd435ebacd720f0ad10/raw/4af8287e17c3aea92b50681d0a9061f2b620f70d/iconsoverlay.js"></script>
    <script src="map.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -30.3647,
      lng: 149.555
    },
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });



  

 var overlay = new IconsOverlay(map);

  //1.load GeoJSON data
  var data = generateData(2000);
  //2.display custom icons
  data.features.forEach(function (f, id) {

    var position = new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]);

    if (id > 0 && id % 2 == 0) {
      //add circle icon
      var circleIconProperties = {
        id: id,
        path: google.maps.SymbolPath.CIRCLE,
        strokeWeight: 2,
        strokeColor: 'rgba(0, 0, 0, 1)',
        fillColor: 'rgba(160,16,0,0.5)',
        scale: 12
      }
      overlay.addIcon(position, circleIconProperties);
    }
    else if (id > 0 && id % 3 == 0) {

      //add path icon
      var pathIconProperties = {
        id: id,
        path: 'm5.219986,29.697235l23.795303,0l0,-25.117241l24.409424,0l0,25.117241l23.795288,0l0,25.765518l-23.795288,0l0,25.117264l-24.409424,0l0,-25.117264l-23.795303,0l0,-25.765518z',
        strokeWeight: 2,
        strokeColor: 'rgba(0, 0, 0, 1)',
        fillColor: 'rgba(160,16,0,0.5)',
        scale: 0.5
      }
      overlay.addIcon(position,pathIconProperties);
    } else {
      var arrowIconProperties = {
        id: id,
        path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
        strokeColor: 'rgba(0, 0, 0, 1)',
        fillColor: 'rgba(160,16,0,0.5)',
        fillOpacity: 0.5,
        scale: 4
      }
      overlay.addIcon(position, arrowIconProperties);       
    }     
  });
}







//Helper methods

function generateData(count) {
  var data = {
    "type": "FeatureCollection",
    "features": []
  };

  for (var i = 0; i < count; i++) {
    var lat = getRandomArbitrary(-30.0,-15.0);
    var lng = getRandomArbitrary(120.0,150.0);

    data.features.push({
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [lng, lat]
      },
      "properties": {
        "id": i.toString(),
        "lat": lat.toString(),
        "long": lng.toString(),
      }
    });
  }
  return data;
}





function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

google.maps.event.addDomListener(window, 'load', initMap);