Google Maps API - Resizing generates blank white space

Question

I'm working on what it looked to be like a very simple feature which is causing a little bit of a headache.

I work with a GIS and we integrate it with Google Maps. One of the clients requested to be able to open a separate pop up window showing only the map. Opening the window wasn't a problem, but as I try to expand the width of the IFrame which contains the map, in order to fit the window size, the actual map image stays with the same size, and a white space fills the remaining space.

I wonder if I have to pass the new width value to some pre-rendering function or something like that... I've already tried using checkResize() but this proved not to work.

The function I'm using to darw the map IFrame goes below:

DrawMapIFrame()
{
   var str = '<iframe id="mapIFrame" name="mapIFrame" width="97%" height="' + parent.mapFrameHeight + '" src="' + $_URL_FleetMonitiorMapIFrame + '?UserID=' + parent.$_UserID + '&Encoding=' + parent.$_Encoding + '&id=' + _id +  '" frameborder="0" scrolling="No"></iframe>';
    document.getElementById("mapIFramePlace").innerHTML = str;
}

Answer 1

Either you need to expand the div to the size you want before creating the map, or you need to use

google.maps.event.trigger(map, 'resize') 

to make the API aware that the size of the container has changed.