响应式谷歌地图? [英] Responsive Google Map?

问题描述

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

<iframe>...</iframe>

我在css中使用全图

.map{max-width:100%;}

和小型设备

.map{max-width:40%;}

但是没有用.

有人知道吗?谢谢.

解决方案

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

How to make a responsive google map from the code

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

I use in css for full map

.map{max-width:100%;}

and small device

.map{max-width:40%;}

but it didn't work.

Anyone have idea? Thank you.

解决方案

Add this to your initialize function:

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

这篇关于响应式谷歌地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！