В карте 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 страницы встраивать карту Google, и я добавил код ниже, чтобы позвонить по карте Google

$(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 равна нулю. Вы не указали код, задающий размер div карты. Вы должны убедиться, что размер определен, когда вызывается функция инициализации. Если вы используете процентные высоты и ширину, см. Этот учебник (v2) от Майка Уильямса, в котором указаны процентные размеры для карт: The Basics - Part 20 Using a percentage height for the map div

Answer 2

У меня тоже была эта проблема.

Как я исправил, чтобы изменить размер карты, используя этот код после инициализации карты:

google.maps.event.trigger (карта, «изменить размер»);

Если у вас есть карта, отображаемая на нескольких страницах, вам может потребоваться сделать это, когда пользователь перейдет на страницу.