Google Maps tool for accurately positioning image overlay? [closed]

Answer 1

Heres a working example of André Dion's explanation.

http://jsfiddle.net/4cWCW/3/

var overlay;

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

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

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328);
  var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

   console.log(map);
  var srcImage = 'http://robincwillis.com/top/splash/04.jpg';

  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;
  this.div_ = null;
  this.setMap(map);
}

DebugOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.opacity = '0.5';
  img.style.position = 'absolute';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

DebugOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};


DebugOverlay.prototype.updateBounds = function(bounds){
    this.bounds_ = bounds;
    this.draw();
};

DebugOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

initialize();

Answer 2

I like to use the one located here:

http://googlemapsapi.blogspot.com/2007/05/v280-making-image-overlays-easy-with.html

It's far from ideal, and it generates Google Maps version 2 API code, but you can still use the logitude/latitude coordinates.

Answer 3

I had to solve this exact problem for a client not long ago. My solution was to simply create two markers; one at each LatLng for the overlay's LatLngBounds that, when moved, would update the overlay and log the LatLndBounds to the console for me to reference. I also added reticules (vertical and horizontal lines) that are shown when dragging a marker so it was easier to visually position the overlay.

I cannot share the code from the solution with you, but it involves working with an OverlayView in order to convert LatLng coordinates to and from pixels via MapCanvasProjection.

Like you, we didn't need this functionality for end-users so I added a "authoring mode" that's toggled by providing a debug parameter to the solution's query string.

Answer 4

Try this tool. Just double click on the map on the first point. A resizable rectagular box will appear. Span it to the end point and get the LatLngBounds that you need.

jsfiddle.net/yV6xv/16/embedded/result/

http://jsfiddle.net/yV6xv/16/embedded/result/