Javascript 谷歌地图响应

我使用谷歌地图与API

我正在一个响应迅速的网站上运行它。我遇到的问题是，当我应用宽度时：100%应用宽度，它将变为空白。我试着在外舱里把它变形，但还是没有成功

我已经阅读了其他堆栈问题，但没有找到任何有效的解决方案

HTML

JS

markers=[]；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（51.061150138439515，-114.05261809049074），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADTYPE，
泛控制：错误，
动物控制：错误，
mapTypeControl:false，
scaleControl:false，
街景控制：错误
};
map=new google.maps.map（document.getElementById（“mapCanvas”）、mapOptions）；
var marker0=新的google.maps.Marker({
位置：new google.maps.LatLng（51.063838646941576，-114.05572414398193），
地图：地图，
图标：“http://www.earthpoint.us/Dots/GoogleEarth/paddle/ylw-blank.png"
});
markers.push（marker0）；
var infowindow0=新建google.maps.InfoWindow({
内容：“我们在这里”，最大宽度：350
});
google.maps.event.addListener（marker0，“单击”，函数（）
{
infowindow0.open（地图，marker0）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

有人能帮忙吗？

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

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

---

此css将确保mapCanvas div不超过800px；但也将确保它保持在包含div的100%宽度，因此，随着窗口（设备）宽度的减小，映射也将减小。

您需要指定任何父元素的大小（高度和宽度），直到html&body

---

您使用的是哪种响应框架？Bootstrap、骨架等？@我正在使用基础5可能的副本你能发送一个链接吗？尝试设置该分区容器的宽度。稍加解释/上下文将对后代有所帮助。我已添加了一些有关我所做工作的信息：）抱歉打扰您！这是由于外部分区造成的问题，因为它仅设置为高度，而不是宽度。这就是为什么地图变成了空白。我不知道该接受哪一个答案，所以，如果你投票支持我的问题，那么我将接受你的：）那么这是一个重复的答案。

       .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;
        }

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);

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

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