Google Maps API v3: InfoWindow not sizing correctly

Question

Hi all

It appears my InfoWindow, when you click on the home icon on my Google Maps v3, is not properly auto-sizing to the content of the InfoWindow.

It gives scrollbars when it should not. The InfoWindow should be properly auto-sizing.

Any ideas on why? Link below to live size.

http://tinyurl.com/ygktsj

Per request, the relevant JavaScript which injects the HTML for the InfoWindow:

listing = '<div>Content goes here</div>';

Answer 1

Use the domready event and reopen the info window and show the hidden content after the domready event fires twice to ensure all of the dom elements have been loaded.

// map is created using google.maps.Map() 
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; } 

infowindow = new google.maps.InfoWindow();    
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);   

// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
    if (infowindow.get("isdomready")) {
     // show the infowindow by setting css 
     jQuery('.infowin-content').css('visibility', 'visible');         
    }
    else {
     // trigger a domready event again.
     google.maps.event.trigger(infowindow, 'content_changed');
     infowindow.set("isdomready", true);
    }
}

I tried just doing a setTimeout(/* show infowin callback */, 100), but sometimes that didn't work still if the content (ie: images) took too long to load.

Hope this works for you.

Answer 2

Add a div inside your infowindow

<div id=\"mydiv\">YourContent</div>

Then set the size using css. works for me. This asumes all infowindows are the same size!

#mydiv{
width:500px;
height:100px;
}