Question

我正在使用带有API的谷歌地图。

我在响应式网站上运行它。我遇到的问题是当我将 width：100％应用于它时，它会变为空白。我尝试在外部div中翘曲但仍然没有运气。

我已阅读过其他Stack问题，但未找到任何可行的解决方案。

HTML

<div id="mapCanvas" class="mapCanvas"></div>

CSS

       .mapCanvas{
        width: 800px; /* When i set it to 100%, Map goes BLANK */
        height: 200px;
        }


        .mapContainer
        {
        display:inline-block;
        }
        .mapContainer div, .mapContainer ul
        {
        float:left;
        }
        .infoWindow h1 {
        font-size: 1.6em;
        text-align: center;
        padding-bottom: 1px;
        }
        .infoWindow {
        overflow: hidden;
        }

JS

markers = [];
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng(51.061150138439515, -114.05261809049074),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADTYPE,
  panControl: false,
  zoomControl: false,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: false
};
map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);

var marker0 = new google.maps.Marker({
    position: new google.maps.LatLng (51.063838646941576,-114.05572414398193),
    map: map,
    icon: "http://www.earthpoint.us/Dots/GoogleEarth/paddle/ylw-blank.png"
});
markers.push(marker0);
var infowindow0 = new google.maps.InfoWindow({
    content: "<div class='infoWindow'><h1> We are here </h1></div>",maxWidth: 350
});
google.maps.event.addListener(marker0, "click", function()
{
    infowindow0.open(map,marker0);
});

  }
  google.maps.event.addDomListener(window, "load", initialize);

有人可以帮忙吗？

Answer 1

为此div设置容器的宽度，并添加以下样式;

.mapCanvas{
        max-width: 800px; 
        height: 200px;
        width: 100%;
        }

这个css将确保mapCanvas div不超过800px;但也会确保它保持在包含div的100％宽度，因此当窗口（设备）的宽度减小时，地图也会减小。

Answer 2

您需要指定任何父元素的大小（高度和宽度），直到html＆amp;体。

working fiddle

html, body {
    height: 100%;
    width: 100%;
}
.mapCanvas {
           width: 100%;
           height: 100%;
}

谷歌地图响应

2 个答案: