Question

我一直在寻找正确的答案，但我找不到它。

我有一个谷歌地图API，当我将浏览器宽度设置得更大时，我会尝试响应。

在我的javascript中，我有这个与我的HTML DIV交互的代码

  ui.map = new google.maps.Map(document.getElementById("map_canvas"), mapParams);
    ui.bounds = new google.maps.LatLngBounds();

    google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);

我的HTML：

<div id="map_canvas" class="map"></div>

我的CSS响应代码：

@media screen and (min-width: 800px) {
#map_canvas {
margin:0 auto; height:600px; min-width:450px; max-width:750px; float:right;

问题是我的谷歌MAP保持在450px .. 有人知道为什么我的浏览器宽度更大时我的谷歌地图不会变大吗？

Answer 1

您需要让css中width的{{1}}等于100％。这样它将相对于父容器的宽度拉伸。如果您在调整浏览器大小时达到这些限制，它仍会遵循#map_canvas和min-width属性。

使我的谷歌地图的宽度响应

1 个答案: