Question

I'm using exactly this Google Map iframe toggle code: http://jsfiddle.net/cancerian73/T7jLf/20/ But this example works because the map iframe has a lot of parametrs. And I'm using custom Google My Maps which cant have the same parameters... When my iframe opens, my markers are in upper left corner and map is unzoomed to the point where I see whole continent. How can I make this work?

I tried putting my map in separate HTML file and calling this location from my hidden div Iframe, I thought that if map is loaded in other HTML file it would work, but same problems...
I tried removing display:none and putting div size 1px by 1px but it completely messes up with div toggle and surrounding content...

BTW since im using Google Map Iframe for me API solutions like this one don't apply:

google.maps.event.trigger(map, 'resize')

I have one more idea, but don't know if it will work and I don't know how to do it. Would it be possible to put some kind of a lazy load on display:none CSS so the map loads in full size and after 1 or 2 seconds it hides? Please help if you can

Answer 1

显示此类地图的最简单方法是调用javascrip函数，在单击显示框架的元素时生成地图。

我经常使用隐藏的地图，我发现查看它们没有任何问题的最简单方法是调用连接到演示事件（如按钮或标签）的地图显示功能

HTML中的

<div class = "myclass" onclick = "show_my_map()">

在javascript中

<script>

show_my_map function() {

   mapOptions var = {
     Level: 17,
     center: new google.maps.LatLng (41.650299490787712, 12.536399034779)
     mapTypeId: google.maps.MapTypeId.SATELLITE
   };



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

}
</script>

Google map Iframe in a hidden <div> problems with zoom and centering

1 个答案: