Google Maps tool for accurately positioning image overlay? -


i hoping can point me in right direction.

i have google map loads markers xml file, along various other map elements, works great. need overlay png image onto map.

i have tried hours correctly align png on top of site cannot find exact 2 co-ordinates need (south-west , north-east). there tool doing this? ideally upload image , drag corners fit, , outputs 2 co-ordinates (lat/lng) need?

i have tried using tool: http://overlay-tiler.googlecode.com/svn/trunk/upload.html - has 3 contact points.

i have tried using tool: http://www.birdtheme.org/useful/customoverlay.html - cannot resize image once uploaded map , 1 chance @ clicking south-west marker!

i can use google earth align png perfectly, can't see way of outputting lat/lng points.

any advice appreciated.

heres 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(); 

Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -