google map site overlay

by JThomas

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBAtxRrZD2qgA34iF1YMW6ueIvFvM7AqWE&amp;libraries=geometry"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="map"></div>
<button data-editing="true" onclick="var edit=!this['data-editing']; console.log(edit);overlay.edit(edit);this['data-editing'] = edit;">
Toggle Edit
</button>

<button data-editing="true" onclick="overlay.fit();">
Fit
</button>

<button data-editing="true" onclick="window.printMap();">
Print
</button>

CSS

#map {
          height: 95vh;
        }

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

JavaScript

//https://www.doogal.co.uk/PrintButton.php

//https://stackoverflow.com/questions/2637023/how-to-calculate-the-latlng-of-a-point-a-certain-distance-away-from-another
Number.prototype.toRad = function() {
  return this * Math.PI / 180;
}

Number.prototype.toDeg = function() {
  return this * 180 / Math.PI;
}

google.maps.LatLng.prototype.destinationPoint = function(bearing, distance) {
  distance = distance / 6371;
  bearing = bearing.toRad();

  var lat1 = this.lat().toRad(),
    lon1 = this.lng().toRad();

  var lat2 = Math.asin(Math.sin(lat1) * Math.cos(distance) +
    Math.cos(lat1) * Math.sin(distance) * Math.cos(bearing));

  var lon2 = lon1 + Math.atan2(Math.sin(bearing) * Math.sin(distance) *
    Math.cos(lat1),
    Math.cos(distance) - Math.sin(lat1) *
    Math.sin(lat2));

  if (isNaN(lat2) || isNaN(lon2)) return null;

  return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
//TODO: Add "editable" mode for rotating and scaling image

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

function SiteMapOverlay(bounds, image, rotation, map) {

  // Initialize all properties.
  this.rotateControlDistanceLock_ = 0.015;
  this.bounds_ = bounds;
  this.rotation_ = rotation || 0;
  this.image_ = image;
  this.map_ = map;
  this.editing_ = false;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;
  this.img = null;
  this.moveControl_ = null;
  this.resizeControl_ = null;
  this.rotateControl = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

SiteMapOverlay.prototype.getCenter = function() {
  return this.bounds_.getCenter();
}

SiteMapOverlay.prototype.attachMoveControl_ = function() {
  var t = this;
  var moveControl = new google.maps.Marker({
    position: this.getCenter(),
    draggable: true,
    icon: {
      anchor: new google.maps.Point(14, 14),
      fillColor: 'black',
      fillOpacity:...