Google Maps Javascript API在小方块中显示地图[重复]答案

【问题标题】：Google Maps Javascript API showing map in small square [duplicate]Google Maps Javascript API在小方块中显示地图[重复]
【发布时间】：2014-05-09 13:28:53
【问题描述】：

我已经实现了 Google 地图 JavaScript API，我正在尝试获取全屏地图。

地图本身只显示在角落的一个小框中，我知道容器的大小合适，因为我在每个角落都有谷歌元素，但地图没有填满容器。

这是我所拥有的：

代码：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh_6k9o89NOW69iR9mL_0J6vu9QMm_54w&sensor=false&extension=.js"></script> 
<script> google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.508800670335646,-0.06943131238223),
        zoom: 12,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        },
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
    {
        featureType: 'water',
        stylers: [{color:'#46bcec'},{visibility:'on'}]
    },{
        featureType: 'landscape',
        stylers: [{color:'#f2f2f2'}]
    },{
        featureType: 'road',
        stylers: [{saturation: -100},{lightness: 45}]
    },{
        featureType: 'road.highway',
        stylers: [{visibility: 'simplified'}]
    },{
        featureType: 'road.arterial',
        elementType: 'labels.icon',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'administrative',
        elementType: 'labels.text.fill',
        stylers: [{color: '#444444'}]
    },{
        featureType: 'transit',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'poi',
        stylers: [{visibility: 'off'}]
    }
],

    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [

    ];

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: '',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script> 

<style> 
#map{
    width:100%;
    height:100%;
}
</style>

您的意见将不胜感激。

【问题讨论】：

这是您拥有的所有代码还是在较大网页的部分中？当我将您的代码复制到一个骨架 HTML 结构中时，地图是全屏的。
@BlakeSimpson 这只是网站的头部部分
您可以判断它的大小是正确的，因为这些控件只显示了一个地图图块。我以前遇到过这个问题，可能是由于某些错误或尝试显示/隐藏地图画布时，以防您有任何错误，或者您正在使用地图的可见性。跨度>
developers.google.com/maps/documentation/javascript/…
我之前也看到过这个问题，当谷歌地图脚本加载时地图元素最初被隐藏，然后该元素随后显示。然后你必须打电话给google.maps.event.trigger(map, "resize");

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

【解决方案1】：

您的地图容器的宽度和高度正变得 100%。

试试这个....

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map {
    width: 100%;
    height: 100%;
}
</style>

【讨论】：

【解决方案2】：

尝试添加

html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }

在你的样式表/css中

jsfiddle 示例：http://jsfiddle.net/lotusgodkk/SD9km/1/

【讨论】：

是的，它已经存在了，容器本身的大小合适，它的地图本身不是......
分享包含容器的完整 HTML。#map 中有内联 css 吗？
感谢您的输入 - 完整代码在这里 jsfiddle.net/SD9km
更新了你的代码，它工作正常：jsfiddle.net/lotusgodkk/SD9km/1
需要在document.ready上调用init