Google地图周围有灰色边框/填充

Question

根据下面的截图，Google地图周围有灰色边框/填充，有人知道如何将其删除吗？

由于

这是我的代码：

var map;
  function initialize(canvas,lat,lng) {
    var myOptions = {
            zoom: 16,
            center: new google.maps.LatLng(lat,lng),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
            },
            scaleControl: false,
            streetViewControl: false,
            scrollwheel: false
    };
    map = new google.maps.Map(document.getElementById(canvas),myOptions);
  }

我有3页要嵌入谷歌地图，我在下面添加了代码来调用谷歌地图

$(document).ready(function() {
        initialize("causewayBayMapCanvas","22.281001", "114.186375");
});

更新

<div style="width:300px; height:200px; border: 1px solid #0051B9">
            <div id="<?php echo $mapId;?>" class="map rounded"></div>
</div>  

Answer 1

看起来像零大小的div问题。您没有提供设置map div大小的代码。您需要确保在调用initialize函数时定义了大小。如果您使用百分比高度和宽度，请参阅Mike Williams的这个（v2）教程，该教程解决了地图的百分比大小：The Basics - Part 20 Using a percentage height for the map div

Answer 2

我之前也遇到过这个问题。

我修复的方法是在初始化地图后使用此代码调整地图大小：

google.maps.event.trigger（map，'resize'）;

如果您在多个页面上显示地图，则可能需要在用户访问该页面时执行此操作。