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.
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
Post a Comment