Question

I am using the InfoWindow domready event handler to modify the look and feel of the InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {

I am changing the height of some of the inner divs of the InfoWindow using jquery.

The problem is the height changes and immediately resets back to default size. Also, the event handler is called twice.

Not all of the divs reset their size, only some do.

Part of my code:

popup = new google.maps.InfoWindow({
    content:'<image id="pin_' + pin_count + '" src="question.png"/>'
});

// Parent.Parent.Parent
e = $('#pin_' + pin_count).parent().parent().parent();
console.log(e.height());
h = parseFloat(e.height());
e.css({
    'position' : 'absolute',
    'top' : '-100px',
    'height' : (h + 100) + 'px',
    'border-radius' : '16px 16px 16px 16px',
    'border' : '2px solid red',
});
console.log(e.height());
console.log("...");

Is there any other events other than domready I can use, which lets me modify the InfoWindow after it is fully drawn?

Answer 1

I got a way out… what is happening is whenever a InfoWindow is added to a Map, all the tiles are redrawn and along with it all the InfoWindow markers are reset too.

So, I tried with

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

It keeps my changes, but I came across a different issue.

This will be invoked whenever anything happens on the map, like drag, zoom etc. I will have to keep flags for each marker and execute this only if the marker is being loaded.

Is there anyway to wait for two events to happen together?

Update:

I am setting a flag when I get domready event. When I get the next tilesloaded, I check for the flag and resize my InfoWindow. It is working. But again an issue.

If I add one more marker at the same coordinates, tiles are not reloaded and tilesloaded event is not generated.

One more question, can I get all the events in the map into a single handler?

Update 2

I found the issue. The div which is the third parent of the actual InfoWindow content is the only element whose size is reset.

So, I am checking the height of div when I get tilesloaded event, if it has been reset, then I set the height again…

google.maps.event.addListener(map, 'tilesloaded', function() {
    e = $('#pin_' + pin_count).parent().parent().parent();
    // default height is saved before the div is resized in domready event handler
    if (e.css("height") < default_height) {
        h = parseFloat(e.height());
        e.css({
            'height' : (h + 100) + 'px',
        });
    }
});