Google maps overlay is flickering while zooming

Question

Does somebody had the same problem with google maps api? I am using the GroundOverlay instead of UsgsOverlay because the UsgsOverlay is not pixel perfect with the original google maps. But the GroundOverlay is flickering(rendering) while zooming.

Here is a Fiddle with GroundOverlay: https://jsfiddle.net/sylvanR/a8z0yyeq/17/

As you can see when you zoom in or out it is rendering each time.

Is there a way to fix this? Or is there a way to line out the UsgsOverlay pixel perfect, because this is not flickering?

Maybe there is a way to use the exact same point as GroundOverlay with 4 points instead of these two:

var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

the UsgsOverlay uses NE and SW but it is not lining out perfectly. Can somebody help me out doing this?

Here is a fiddle with UsgsOverlay: https://jsfiddle.net/sylvanR/a8z0yyeq/18/

Can somebody help me out fix the flickering or placing the UsgsOverlay?

Answer 1

I found a handy tool: https://gist.github.com/pacofvf/7324239

I did not fixed the flickering while zooming, because i used the Usgs overlay and the link above is very handy to place your map pixel perfect.

Answer 2

According to this issue , maybe the cause of flickering in GroundOverlay is that the addGroundOverlay(GroundOverlayOptions) methods returns instantly and doesn't wait for the Bitmap to be loaded into memory.

The solution here is by using the setImage() method that will replace the existing image with another image of the same directions.

You can change the ground overlay image after it's been added to the map with the GroundOverlay.setImage(BitmapDescriptor) method.

// Add an overlay, retaining a handle to the GroundOverlay object.
GroundOverlay imageOverlay = map.addGroundOverlay(newarkMap);

// Update the GroundOverlay with a new image of the same dimensions.
imageOverlay = map.setImage(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1975));

For the placing of Custom overlay , the overlay is first instantiated and ready to display, you need to attach it to the map via the browser's DOM. The API indicates that the overlay has been added to the map by invoking the overlay's onAdd() method. To handle this method you create a <div> to hold your image, add an <img> element, attach it to the <div> , and then attach the overlay to one of the map's panes. A pane is a node within the DOM tree. You can resize the image that match the bounds that you specified in the overlay's constructor. You can change it using <div> .

For more information you can also check this .