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

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.

Answer 2

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)

1. 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;amp;chs=24x32&amp;amp;chco=FFFFFF,008CFF,000000&amp;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;
   
   
   }