Resizing the content inside an InfoWindow overlay.

866 views
Skip to first unread message

Mathew Byrne

unread,
Mar 4, 2010, 1:29:24 AM3/4/10
to Google Maps JavaScript API v3
Is there a way to get an InfoWindow object to recalculate its size and
position if it's contents are altered?

The specific use case I have is that an image is being dynamically
loaded into an InfoWindow. I do not know the specific image dimensions
until after the image has loaded into the browser. If a user opens the
InfoWindow before the image has been appended to it, it will calculate
it's size without the image, and does not appear to recalculate it's
size after that point, even if it is closed and reopened.

pete

unread,
Mar 4, 2010, 11:38:29 PM3/4/10
to Google Maps JavaScript API v3
Have you tried using the infowindow.setContent() method?

Once you inject content into the infowindow with this method it re-
calculates it's own height.

If you want me to get more specific, post a link

Mathew Byrne

unread,
Mar 8, 2010, 9:48:48 PM3/8/10
to Google Maps JavaScript API v3
Yes I have tried this method. Take the following abbreviated code
(using jQuery):


var info_window = new google.maps.InfoWindow({
content:'<div class="parent"><div class="image"/></div>'
});

$('<img src="' + image_src + '" />')
.bind('load', function () {
var content = info_window.getContent();
$(this).appendTo($(content).find('.image'));
info_window.setContent(content);
});

I've also tried to empty the InfoWindow object before appending new
content, but this doesn't alter the height. Experimentally the height
of 'div.parent' above is set when the InfoWindow is first opened, and
seemingly not again after that point.

Jeff Schnitzer

unread,
Mar 26, 2010, 5:23:27 PM3/26/10
to Google Maps JavaScript API v3
Has anyone figured out a resolution for this issue?

I also load some dynamic content into an InfoWindow which nearly
always requires a resize. I call setContent() with a loading
indicator for the original IW, start the data load, then call
setContent() again when I have the data. I find that sometimes the IW
resizes and sometimes it doesn't. It's quite erratic and I can't
figure out why.

An additional complication is that I am doing this work with GWT, but
it's not fundamentally any different - my code just calls
setContent(Element) with the dom element from my widget.

Thanks,
Jeff

Jeff Schnitzer

unread,
Mar 26, 2010, 5:36:52 PM3/26/10
to Google Maps JavaScript API v3
Just some thoughts:

The part of my widget that changes size is nested inside another
widget, so when I call setContent() I'm actually calling it with the
same Element that setContent() was originally called with.

Is it possible that setContent() is checking that the new Element is
the same as the old and erroneously not checking the size? I don't
actually have much idea what's going on inside that method.

Another thought... the difference between the size of the old widget
and the size of the updated widget is a body of text. Is it possible
there's some sort of byzantine browser behavior involved here,
something about text not expanding the size of the container widget?

I'm grasping.

Thanks,
Jeff

Jeff Schnitzer

unread,
Mar 26, 2010, 7:48:10 PM3/26/10
to Google Maps JavaScript API v3
On Mar 26, 2:36 pm, Jeff Schnitzer <j...@infohazard.org> wrote:
>
> Is it possible that setContent() is checking that the new Element is
> the same as the old and erroneously not checking the size?  I don't
> actually have much idea what's going on inside that method.

Something along these lines seems to be consistent with observed
behavior:

* Setting a fresh Element causes a proper resize of the InfoWindow
bubble
* Setting the same Element (but with different content) produces
erratic behavior

Jeff

Klaas

unread,
May 13, 2010, 2:48:06 AM5/13/10
to Google Maps JavaScript API v3
I had the same problem and could solve it by adding the width and
height of the image to the img tag.

I guess the infowindow.setContent() recalculates the dimension of the
content without knowing how big the img tag is going to be.

cheers, Klaas.
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Susannah (Google Employee)

unread,
May 13, 2010, 2:33:44 PM5/13/10
to Google Maps JavaScript API v3
In the current release, we have fixed some bugs related to InfoWindow
content sizing. You should now be able to call setContent() after
changing the div's content to have the size refreshed. If you're
still seeing problems, with or without your workarounds, please file
issues (with links!) in the issue tracker.

Thanks,
Susannah
Reply all
Reply to author
Forward
0 new messages