javascript - Overlay positioning offset - Overlay view vs. ground overlay -


i struggling positioning of image overlays (projection) on map, , both implementations have shortcomings nl.:

  • custom overlay views (as implemented @ maps api overlay example) gives me capability of customizing "onadd()" functions etc., has projection offset when drawing on map such:
    image on sa

  • ground overlays (as implemented @ maps api ground overlay example) displays positioning projection correct, has "refresh , positioning" problem (also described here) annoying , looks unprofessional. how thing looks while zoom in/out , overlay refreshes (if take printscreen):
    glitch while refresh

  • i've tried adding custom overlay views , getting , using projection ("getprojection()") of ground overlay, no success far. here code snippet:

    //constructor of image overlay class function imageoverlay(bounds,image,map) {      // initialize properties.   this.bounds_ = bounds;   this.image_ = image;   this.map_ = map;   this.div_ = null;   this.setmap(map);    //make object of ground overlay projection later   this.groundoverlay = new google.maps.groundoverlay(image,bounds); }  //some other code, not important  //redraw image every time zoom level changed imageoverlay.prototype.draw = function() {    if(this.div_ != null)   {     //======     //normally used overlay views     //======     //     //get boundary corners - mercator projection     /*var overlayprojection = this.getprojection(); //use projection of image overlay view     var sw =  overlayprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest());     var ne = overlayprojection.fromlatlngtodivpixel(this.bounds_.getnortheast());      // resize image's div fit indicated dimensions.     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';*/      //this try     var goprojection = this.groundoverlay.getprojection();      var gosw = goprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest());     var gone = goprojection.fromlatlngtodivpixel(this.bounds_.getnortheast());      var div = this.div_;     div.style.left = gosw.x + 'px';     div.style.top = gone.y + 'px';     div.style.width = (gone.x - gosw.x) + 'px';     div.style.height = (gosw.y - gone.y) + 'px';   }  }; 

i appreciate please?


Comments