Javascript 动态显示和初始化多个Google地图

我正在开发一个单页应用程序，它在某一点上显示一个结果列表，每个结果都包含一个位置，该位置应该显示在单独的GoogleMaps元素中。（所以我可能会得到很多地图元素）

为防止不必要的数据加载，映射应仅在单击后加载。 由于我的地图都不存在于pageload上的DOM中（我使用jQuery生成它们），因此在加载google maps javascript api时，无法使用作为参数传递的回调函数初始化它们。下面是用于创建resultlist的循环的一部分。“container”是保存地图的div容器，而“mapCon”是实际上是googlemap元素的div

expandContainer.click(function () {
            var mapCon = $(container.find(".googleMap")[0]);

            function myMap() {
                var mapProp = {
                    center: new google.maps.LatLng(51.508742,-0.120850),
                    zoom:5
                };
                new google.maps.Map(mapCon,mapProp);
            }

            myMap();
        });

我使用以下代码（在stackoverflow上找到）加载google maps javascript api：

在生成任何结果之前，我以“完成”警报方式完成。尽管如此，我在单击地图时收到以下错误消息：

Uncaught TypeError: Cannot read property 'defaultView' of undefined
at new _.Fw (common.js:174)
at Object.uz.f (map.js:57)
at Array.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:91)
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at Object.<anonymous> (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52)
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:52
at js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108
at Pc (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:54)
at Oc.pa (js?key=MY_KEY&callback=googleMapsLoaded&_=1504820910025:108)

Uncaught TypeError:无法读取未定义的属性'defaultView'
在纽约（common.js:174）
在Object.uz.f（map.js:57）
在阵列上。（js？key=MY_key&callback=googleMapsLoaded&=1504820910025:91）
在js？key=MY_key&callback=googleMapsLoaded&=1504820910025:108
反对。（js？key=MY_key&callback=googleMapsLoaded&=1504820910025:52）
在js？key=MY_key&callback=googleMapsLoaded&=1504820910025:108
在js？key=MY_key&callback=googleMapsLoaded&=1504820910025:52
在js？key=MY_key&callback=googleMapsLoaded&=1504820910025:108
在个人电脑上（js？key=MY_key&callback=googleMapsLoaded&_=1504820910025:54）
在Oc.pa（js？key=MY_key&callback=googleMapsLoaded&=1504820910025:108）

---

在这一点上，我不知道如何解决这个问题，我非常渴望找到一个解决方案，因为它不是“外包”地图（单页应用程序）的选项。

哇，所以我在发布这个问题后就找到了解决方案…：-）

而不是

var mapCon = $(container.find(".googleMap")[0]);

应该是

var mapCon = container.find(".googleMap")[0];

自

new google.maps.Map(mapCon,mapProp);

---

不会将jQuery元素作为参数。

js？key=MY_key&

在这行中，我希望您发送的是真正的键，而不是占位符？是的，我刚刚删除了此帖子的键：）

new google.maps.Map(mapCon,mapProp);