谷歌地图api全屏答案

【问题标题】：google maps api full screen谷歌地图api全屏
【发布时间】：2013-06-08 15:58:27
【问题描述】：

您好，我正在开展一个项目，该项目需要特定的全屏谷歌地图位于页眉和页脚之间。我敢肯定答案很简单，但我想我还是会问。该项目由一个表单组成，用户可以在填写地址等后放置标记，不确定是否有任何自定义可能受到干扰或任何事情......

当我过去使用谷歌地图 API 时，我通常只是将 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);

【问题讨论】：

您使用的是 iFrame 吗？让我们看看你的标记。

标签： css api google-maps-api-3

【解决方案1】：

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

如果你能把它弄出来让我们玩，它会更容易修复。

【讨论】：

【解决方案2】：

问题在于您的 html 而不是您的 javascript。试试关注

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

添加以下css

html, body, #wrapper{
    height: 100%;
    width: 100%;
}
#header{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#footer{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#map-canvas{
    height: 100%;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;

}

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

【讨论】：

这适用于宽度但不适用于高度。一旦我将高度从像素切换到％，地图就会消失。有任何想法吗？ #map { height: 500px; width: 100%; margin-top: -20px; margin-bottom: 0px; border-bottom: 3px solid #FF5255; } #map_wrapper { height: 100%; width: 100%; }
您确定将 html 和 body 的高度设置为 100% 吗？
没关系，我已经设法解决了这个问题。不过还是谢谢

【解决方案3】：

当你想要一个空的div 占据整个屏幕的高度时，你必须定义min-height 的值，如下所示：

html, body {
    height: 100%;
}

#map {
    min-height: 100%; 
}

但同样，这与“google-maps-api-3”并不真正相关......

【讨论】：

【解决方案4】：

看看这里http://alistapart.com/article/conflictingabsolutepositions 使用绝对定位设置上、左、下、右值。

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

现在将您的窗口拖动到您心中的内容，并观看您的地图保持完整大小。在进行响应式设计时也很棒。

【讨论】：

美观又简单 - 无需为任何父 div 调整尺寸规格。

【解决方案5】：

Google Maps API 文档explain this effect rather neatly：

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

【讨论】：

不错！完美答案