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;
   }