Css 谷歌地图api全屏

嗨，我正在做一个项目，需要一个特定的全屏谷歌地图位于页眉和页脚之间。我相信答案很简单，但我想我还是会问。该项目由一个表单组成，用户在填写完地址等后可以放置标记，但不确定是否有任何定制可能会造成干扰或发生任何事情

当我在过去使用GoogleMapAPI时，我通常只会将css高度更改为100%，但出于某种原因，它不会更改大小，而是会完全删除地图

#map {
height:500px;
width:1200px;
}

这是密码

var map;
var marker;
var Longitude = -1.8822221000000354;
var Latitude = 50.72569620000001;
var zoom = 20;
var bounds = new google.maps.LatLngBounds();
var markers;
var new_marker;
var C;
var popupbubblepath = <%= this.popupbubble.ToString() %>;
var infowindow = new google.maps.InfoWindow();
var ib;

function LoadMap() {

    // Create an array of styles.
    var styles = [
        {
            stylers: [
                { saturation: -100 }, { lightness: -100 }
            ]
        },{
            featureType: "all",
            elementType: "all",

        }
    ];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    //var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

    var myOptions = {
        zoom: zoom,
        center: new google.maps.LatLng(Latitude, Longitude),
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        zoomControl: true,
        mapTypeControlOptions: {
            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position:google.maps.ControlPosition.LEFT_BOTTOM 
        },
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map"), myOptions);

var映射；
var标记；
变量经度=-1.88222100000354；
变量纬度=50.7256962000001；
var zoom=20；
var bounds=new google.maps.LatLngBounds（）；
var标记；
var新标记；
var C；
var popupblepath=；
var infowindow=new google.maps.infowindow（）；
var ib；
函数LoadMap（）{
//创建样式数组。
变量样式=[
{
样式：[
{饱和度：-100}，{亮度：-100}
]
},{
featureType:“全部”，
元素类型：“全部”，
}
];
//创建一个新的StyledMapType对象，将样式数组传递给它，
//以及要显示在地图类型控件上的名称。
//var styledMap=new google.maps.StyledMapType（样式，{name:“Styled Map”}）；
变量myOptions={
缩放：缩放，
中心：新google.maps.LatLng（纬度、经度），
mapTypeControl:false，
scaleControl:false，
街景控制：对，
overviewMapControl:错误，
动物控制：对，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单，
位置：google.maps.ControlPosition.LEFT_底部
},
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
},
泛控制：错误，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=新的google.maps.map（document.getElementById（“map”），myOptions）；

我认为问题不在于地图，而在于包含的div。如果将div的高度设置为100%，请确保所有包含的div都定义了一个高度。通过在div周围放置一个边框可以判断这是否是问题，您可能会看到高度就是问题所在

---

如果您可以让我们使用它，修复起来会更容易。

问题在于html而不是javascript。请尝试以下方法

<div id='wrapper'>
     <div id='header'>header stuff<div>
     <div id='map-canvas'></div>
     <div id='footer'>footer stuff<div>
</div>

---

我还没有机会对此进行测试，但这应该会让您知道需要做什么。

当您想要一个空的

div

占据整个屏幕的高度时，您必须定义

min height

值，如下所示：

html, body {
    height: 100%;
}

#map {
    min-height: 100%; 
}

但同样，这与“google-maps-api-3”并没有太大关系。

看看这里，使用绝对定位设置上、左、下、右变量

#map-canvas{
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 100px;
    right: 0;
}

现在将你的窗口拖到你的心底，看着你的地图保持完整的大小。做响应性设计也很好。

谷歌地图API文档：

请注意，在“怪癖”模式下工作的某些CSS在“标准”模式下无效。具体而言，所有基于百分比的大小都必须继承自父块元素，如果其中任何一个祖先未能指定大小，则假定它们的大小为0 x 0像素

---

你在使用iFrame吗？让我们看看你的标记。这对宽度有效，但对高度无效。一旦我将高度从像素切换到%，贴图就会消失。有什么想法吗？

#map{height:500px；width:100%；margin top:-20px；margin bottom:0px；border bottom:3px solid#FF5255；}贴图#{height:100%；width:100%；}

你确定要将html和body的高度设置为100%吗？别介意，我已经设法解决了这个问题。无论如何，谢谢你，虽然很好而且很简单-不必担心调整任何父级

div

的大小规格。很好！完美的答案

#map-canvas{
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 100px;
    right: 0;
}