一页上有多个 Google 地图实例答案

【问题标题】：Multiple instances of Google Maps on one page一页上有多个 Google 地图实例
【发布时间】：2012-05-04 04:13:31
【问题描述】：

我有一个表格，可让您通过谷歌地图预览坐标。用户可以向表单动态添加多组坐标。坐标的数量是可变的。

我用这段代码遍历变量，我觉得这与加载谷歌地图的多个实例有关。第一张地图加载得很好，但第二张地图只加载了最左边的一个图块。如果我更新表格上的坐标，那么所有的地图只会在最左手角显示一个图块。

                while (tempClone != cloneCount) {   
var lat_lng = new google.maps.LatLng(lat, lng);              

                options = {
                    zoom: 14,
                    center: lat_lng,
                    panControl: false,
                    zoomControl: false,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };

                map[tempClone] = new google.maps.Map(document.getElementById("map"+tempClone), options);

                var infowindow = new google.maps.InfoWindow({
                    content: inputBL[tempClone][0][1] + 'Entrance'
                }); 

                marker[tempClone] = new google.maps.Marker({
                    position: lat_lng,
                    map: map[tempClone],
                    title: inputBL[tempClone][0][1]
                }); 
}

感谢您的帮助！亚伦

【问题讨论】：

您能否发布一个指向您的实时代码的链接，或者将其放在 JSFiddle 上以便我们在上下文中查看它？很难只调试部分代码。
是的，当然，我会尝试稍作调整。谢谢。
嗨，马诺，抱歉让您久等了。我只能将项目上传到外部服务器。我希望这会有所帮助，因为我无法在 jsfiddle 下模拟这个问题。这是链接：s401600969.onlinehome.us/testing/yii-front/index.php/reportForm/… 希望这能让您更好地了解正在发生的事情。问题在于洞穴入口。输入坐标（度或小数）后，图像显示正常，如果再次编辑入口，则无法正确显示。以下是一些示例坐标：59.32522, 18.07002 再次感谢您的帮助！
要将问题标记为已解决，使用最佳答案附近的绿色复选标记就足够了（就像您所做的那样）。您无需在问题标题中添加“已解决”。干杯！

标签： javascript jquery google-maps-api-3 instances

【解决方案1】：

看起来您在调整地图大小时遇到了问题。据我回忆，如果地图容器大小发生变化，就会发生这种情况。显示地图后可以尝试触发调整大小吗？

google.maps.event.trigger(map, "resize");

【讨论】：