Position Google Maps Overlay

Tootle to position an image overlay on Google Maps

by wsmithrill

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var overlay;

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

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.091040336757096, -1.1689605094528198)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var swBound = new google.maps.LatLng(51.089953721791645, -1.1693636261940002);
  var neBound = new google.maps.LatLng(51.09160272460377, -1.1671843030929565);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  console.log(map);
  var srcImage = 'http://amf.festival-apps.co.uk/AMFMap2018.png';

  overlay = new DebugOverlay(bounds, srcImage, map);

  var markerA = new google.maps.Marker({
    position: swBound,
    map: map,
    draggable: true
  });

  var markerB = new google.maps.Marker({
    position: neBound,
    map: map,
    draggable: true
  });

  google.maps.event.addListener(markerA, 'drag', function() {

    var newPointA = markerA.getPosition();
    var newPointB = markerB.getPosition();
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
    overlay.updateBounds(newBounds);
  });

  google.maps.event.addListener(markerB, 'drag', function() {

    var newPointA = markerA.getPosition();
    var newPointB = markerB.getPosition();
    var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
    overlay.updateBounds(newBounds);
  });

  google.maps.event.addListener(markerA, 'dragend', function() {

    var newPointA = markerA.getPosition();
    var newPointB = markerB.getPosition();
    console.log("point1" + newPointA);
    console.log("point2" + newPointB);
  });

  google.maps.event.addListener(markerB, 'dragend', function() {
    var newPointA = markerA.getPosition();
    var newPointB = markerB.getPosition();
    console.log("point1" + newPointA);
    console.log("point2" + newPointB);
  });

}

function DebugOverlay(bounds, image, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
 ...