如何在没有灰色的完整容器中显示谷歌地图答案

【问题标题】：How to show the google map in full container without gray color如何在没有灰色的完整容器中显示谷歌地图
【发布时间】：2017-06-01 17:29:59
【问题描述】：

我正在显示谷歌地图以显示世界任何地方的一些标记，以表明我正在使用以下代码：

 var locationMap;
        $scope.initializeLocationMap = function() {
            var latlng = new google.maps.LatLng(0, 0);
            var myOptions = {
                zoom: 1,
                center: latlng

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

在正常分辨率屏幕中正确显示。但是在更大的分辨率下，宽度为814px，高度为823px的容器在中间显示地图，顶部和底部间隙填充灰色，如何用地图显示整个容器，而不是灰色。
我得到的地图如下

【问题讨论】：

不要让用户缩小到显示灰色的点。例如，在 2 或 3 的地图上设置 minZoom。
尝试设置容器宽度：100% 或根据需要和高度：自动
@Adam 如果将 minZoom 设置为 2 并让用户缩小到该点，并且 minZoom 2 无法在正常屏幕中正确显示世界地图，该怎么办。它以更大的分辨率正确显示
@ThilakRaj - 如果您不希望显示灰色，则不能让用户缩放到将显示的点（例如，世界开始环绕的位置）。没有任何 CSS 可以用来防止用户缩小到世界开始环绕的位置（你会变灰），你所能做的就是设置一个 minZoom。
@Adam 感谢您的回复，minZoom 2 无法在正常屏幕中正确显示世界地图。它以更大的分辨率正确显示

标签： html css angularjs google-maps

【解决方案1】：

试试这个：

            <body id="googleMap"  style="width:100%;height:400px;">

            <script>
            function myMap() {
            var mapProp= {
            center:new google.maps.LatLng(51.508742,-0.120850),zoom:5,
            };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
            }
            </script>
            </body>

【讨论】：