javascript - Google Maps API - Resizing generates blank white space - Stack Overflow

admin管理员组

文章数量:1336320

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

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

• javascript
• google-maps
• maps
• google-maps-api-2

Share Improve this question Follow edited Aug 15, 2010 at 8:06 born to hula asked Aug 9, 2010 at 7:01 born to hulaborn to hula 1,28666 gold badges1919 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptGoogle Maps APIResizing generates blank white spaceStack Overflow