Google maps 谷歌地图周围有灰色边框/填充物

根据下面的截图，我在谷歌地图周围有一个灰色的边框/填充物，有人知道如何删除它吗

谢谢

这是我的密码：

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>  

看起来像是一个零大小的div问题。您没有提供设置map div大小的代码。您需要确保在调用initialize函数时定义了该大小。如果您使用的是百分比高度和宽度，请参阅Mike Williams的（v2）教程，该教程介绍了地图的百分比大小：
看起来像是零大小div问题。您没有提供设置map div大小的代码。您需要确保在调用initialize函数时定义了该大小。如果您使用的是百分比高度和宽度，请参阅Mike Williams的这篇（v2）教程，其中介绍了地图的百分比大小：
我以前也遇到过这个问题

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

google.maps.event.trigger（映射，'resize'）

如果地图显示在多个页面上，则可能需要在用户每次访问该页面时执行此操作。
我以前也遇到过此问题

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

google.maps.event.trigger（映射，'resize'）

如果您的地图显示在多个页面上，您可能需要在用户进入该页面时执行此操作。
我已经为div标记添加了宽度和高度，请再次检查我问题的更新，谢谢。这可能与此相关。我已经为div标记添加了宽度和高度，请再次查看我的问题的最新信息，谢谢。这可能与我的问题相关。