Question

I’m trying to update an image overlay on a google map on the fly. I can create a new overlay object, but I can’t figure out how to modify it. Can I update the overlayImage object

var overlayImage = new google.maps.GroundOverlay("myimage.png", imageBounds);

I want to modify overlayImage on zoom change, but I can’t pass it through the function. I also can’t find it in the ‘map’ object.

google.maps.event.addListener(map, 'zoom_changed', function(overlayImage) {

}

How do I update myimage.png when the zoom level is changed?

Answer 1

I think the issue is that the overlayImage is out of scope from when you add the event listener.

As a test, try to declare the variable globally, and then assign the variable later on.

/* top level */
var overlayImage;
...
/* later on */
overlayImage = new google.maps.GroundOverlay("myimage.png", imageBounds); 

In javascript, you can’t simply pass in a variable in a function and hope that it’ll pick up something you declared previously. The other thing that might be happening is that the event listener is passing the event object as the first parameter in the callback function, but you’ve named it as overlayImage, so within that callback, the context of overlayImage is actually the event object. You would do something like:

google.maps.event.addListener(map, 'zoom_changed', function(event) {
    /* overlayImage can now be used */
    overlayImage.someAPIFunction();
}