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

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I am hoping someone can point me in the right direction.
I have a Google Map that loads markers from an XML file, along with various other map elements, works great. However I now need to overlay a PNG image onto the map.
I have tried for hours to correctly align the PNG over the top of the site but just cannot find the exact two co-ordinates I need (south-west and north-east). Is there a tool for doing this? Ideally upload the image and drag the corners to fit, and it outputs the two co-ordinates (lat/lng) you need?
I have tried using this tool: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - but it has three contact points.
I have also tried using this tool: http://www.birdtheme.org/useful/customoverlay.html - but you cannot resize the image once uploaded to the map and you get one chance at clicking the south-west marker!
I can also use Google Earth to align the PNG perfectly, but I can't see a way of outputting the lat/lng points.
Any advice would be much appreciated.

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 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 3

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.