google-maps - 响应式谷歌地图？

Question

如何从代码制作响应式谷歌地图

<div class="map">
    <iframe>...</iframe>
</div>

我在 css 中使用完整 map

.map{max-width:100%;}

和小型设备

.map{max-width:40%;}

但是没有成功。

有人有想法吗？谢谢。

Answer 1

将其添加到您的初始化函数中:

<script type="text/javascript">

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  // Resize stuff...
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
  });

}

</script>