Google Maps: Dynamically resize infowindow

Question

How do I resize the info window once it's opened? I have a hyperlink inside the window which generates an AJAX-request; on the callback I would like to resize the info window.

Answer 1

Check out the following. What happens is that i create an initial info window with minimal info (see getInfoWindowHtml). The gmap.openInfoWindowHtml call provides for a callback which gets called after the infowindow opens. In that callback, make your ajax call and reset the window contents. There are two issues though:

i couldnt get the window to resize exactly to the returned content, so i just used a standard size (see the new GSize(300, 150) in the anonymous function returned by markerClickFn)

2. Im my case, if a marker is near the extremes of the image bounds, parts of the info window would be clipped. IOW, the map does not recenter to include the infowindow. I can probably fix this, but it has not been a pressing issue.

    function markerClickFn(venue, latlng) { return function() { var title = venue.Name; var infoHtml = getInfoWindowHtml(venue); // need to zoom in gmap.setZoom(13); gmap.openInfoWindowHtml(latlng, infoHtml, { onOpenFn: function() { var iw = gmap.getInfoWindow(); iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 150), null, null); $("#info-" + venue.Id.toString()).load("/Venue/MapInfoWindow/" + venue.Id); } } ); }; } function getSidebarHtml(venue) { var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow var html = "<li id='venue-" + venue.Id + "'>\\n"; html = html + venue.Name + "\\n"; //html = html + "<p class='description'>" + trunc(venue.Description, 200) + "</p>\\n"; html = html + "</li>"; return html; } function getInfoWindowHtml(venue) { var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow var html = "<div id='info-" + venue.Id + "'><a href='" + url + "' class='url summary'>" + venue.Name + "</a></div>\\n"; return html; } function addVenueMarker(venue) { var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://chart.apis.google.com/chart?cht=mm&amp;chs=24x32&amp;chco=FFFFFF,008CFF,000000&amp;ext=.png"; var latLng = new GLatLng(venue.Lat, venue.Lng); var marker = new GMarker(latLng, { icon: icon }); var fn = markerClickFn(venue, latLng); GEvent.addListener(marker, "click", fn); marker.event_ = venue; marker.click_ = fn; venue.marker_ = marker; markers.push(marker); return marker; } 

Answer 2

It looks like the only solution I found to resize the InfoWindow dynamically is to call the InfoWindow's setContent method. You'll need to pass in the HTML node or the HTML string. This basically redraws the InfoWindow. What it essentially does is close the current one and opens a new one. So, it'll see a flicker during the reloading of the content. This kind of sucks. It seems that Google deprecated their v2 API and made things really hard to do in the newer version. I think Google has hired a bunch of Sun Java developers across the street in Silicon Valley and they guys don't know how to provide simple to use API's like the Microsoft camp. Really frustrating!

Answer 3

It isn't possible to animate the resize of the info window, but there is a reset function. The documentation says that you can leave any parameter null, but if you leave the 'size' parameter null, you'll get an error. This means that you have to specify the size of the InfoWindow.

However, since that ruins the original point of dynamically resizing the window, I would strongly recommend simply closing the original info window and creating a new one - which is what the reset function will appear to do anyhow.