响应Google Map？ [英] Responsive Google Map?

问题描述

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

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

我在css中使用完整地图

  .map {max-width：100％;} 
  

和小设备

  .map {max-width：40％;} 
  

但它不起作用。

任何人有想法？谢谢。

解决方案

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

 < script type =text / javascript> 
 
函数initialize（）{
 
 var map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; 
 
 //调整大小... 
 google.maps.event.addDomListener（window，resize，function（）{
 var center = map.getCenter（）; 
 google.maps.event.trigger（map，resize）; 
 map.setCenter（center）; 
}）; 
 
} 
 
< / script> 
  

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>

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