想用循环加载多个谷歌地图答案

【问题标题】：want to load multiple google maps with loop想用循环加载多个谷歌地图
【发布时间】：2015-03-25 23:44:12
【问题描述】：

我正在使用 php while 循环多次创建 div 类

所以每次我都有不同的经纬度

还在每个循环中，我在不同的 div 上初始化一个新地图以创建地图这是我的代码

<script type="text/javascript">
          google.maps.event.addDomListener(window, 'load', initialize);

            function initialize() {

                var title= "Title";
                var lat = <?php echo $lat; ?>;
                var lng = <?php echo $lng; ?>;
                var myLatlng = new google.maps.LatLng(lat,lng);
                var mapOptions = {
                    zoom: 14,
                    center: myLatlng
                  }
                var map = new google.maps.Map(document.getElementById('beezMapBig<?php echo $tmp;?>'), mapOptions);

                var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: 'Hello World!'
                    });
                google.maps.event.addDomListener(window, "resize", function() {
                    var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center); 
                }); 

            }


          </script>

每次负载使用不同的 lat,lng 但我没有 100% 加载地图（由于声誉低，我无法发布图片...想象一下地图加载了 50%，其余为灰色空白）

现在奇怪的是，当我在任何浏览器上按 f12 以运行控制台以查看一些问题/失败时，地图会 100% 加载并调整大小。

任何想法为什么会发生这种情况以及为什么在运行浏览器控制台时代码运行正确？？

提前致谢！！

【问题讨论】：

stackoverflow.com/questions/17059816/…
什么设置了“地图” div 的大小？你真的有多个名为“initialize”的函数吗？

标签： javascript php jquery google-maps

【解决方案1】：

有同样的问题并通过这样做解决。写ready()函数。然后将窗口调整大小函数放在初始化方法本身中（在初始化地图之前）。会有帮助的。

【讨论】：

先写 $(document).ready() 函数，然后把你的 (window, 'resize') 函数放在地图初始化之前。在代码中做一些安排..会起作用..你几乎完成了所有工作。
它不能工作，因为我正在使用一个while循环......所以文档准备功能只运行了1次......
no.. 在循环后使用 doc.ready fn()。 STEP:1--doc.ready fn() STEP:2--你的循环 STEP:3--initializing() STEP:4--(window, 'resize') function() STEP:5--map 初始化 fn( ) 像这样

【解决方案2】：

我可以使用 PHP 和 JS。我有 3 个元素的数组。

首先我生成具有唯一 id 的 div

   <?php $i=0; foreach ($array as $single) : $i++; ?>

      <div id="map_<?php echo $i; ?>" style="width: 100%; height: 300px;"></div>

    <?php endforeach; ?>

然后我像这样打开脚本标签

 <script>
    var maps = [];
    <?php $i = 0; foreach($array as $single): $i++; ?>
    maps.push({
      mapContainer: 'map_'+<?php echo $i; ?>,
      lat: <?php echo $single['mapa_google']['lat']; ?>,
      lng: <?php echo $single['mapa_google']['lng']; ?>,
    });
    <?php endforeach; ?>

   function initMap() {
     for(var i = 0; i < maps.length; i++)
     {
       // The location of Uluru
       var uluru = {lat: maps[i].lat, lng: maps[i].lng};
       // The map, centered at Uluru
       var map = new google.maps.Map(
         document.getElementById(maps[i].mapContainer), {zoom: 16, center: uluru}
       );
       // The marker, positioned at Uluru
       var marker = new google.maps.Marker({position: uluru, map: map});
     }
   }
 </script>

在我使用异步脚本的页面底部

   <script async defer
           src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
   </script>

当然，在我的数组中，我有 3 个谷歌地图的数据。

【讨论】：