Javascript 谷歌地图-未捕获类型错误：无法设置属性'；位置'；未定义的

我使用backbone.js作为我的框架。我的问题是，我在尝试将google地图与backbone.js集成时遇到了一个奇怪的问题

Uncaught TypeError: Cannot set property 'position' of undefined

本教程来自此网站

即使我已经尝试了这些解决方案，问题仍然存在

下面是我的代码

js

define（['jquery'，下划线，'backbone'，text！modules/map/mapListViewTemplate.html']，函数（$，\u，backbone，mapListViewTemplate）{
var MapListView=Backbone.View.extend({
初始化：函数（）{}，
render:function（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（-25.363882131.044922）
};
var map=new google.maps.map（$（'#map canvas'），mapOptions）；
//在地图的任意位置添加5个标记
var西南=新google.maps.LatLng（-31.203405125.244141）；
var northEast=new google.maps.LatLng（-25.363882131.044922）；
var bounds=new google.maps.LatLngBounds（西南、东北）；
映射边界（bounds）；
var lngSpan=northEast.lng（）-soutwest.lng（）；
var latSpan=northEast.lat（）-soutwest.lat（）；
对于（变量i=0；i<5；i++）{
var position=new google.maps.LatLng(
soutwest.lat（）+latSpan*Math.random（）、soutwest.lng（）+lngSpan*Math.random（））；
var marker=new google.maps.marker({
职位:职位,，
地图：地图
});
marker.setTitle（（i+1.toString（））；
此.attachSecretMessage（标记，i）；
}
此.el.html（mapListViewTemplate）；
},
attachSecretMessage:函数（标记，num）{
var message=['This'，'is'，'the'，'secret'，'message']；
var infowindow=new google.maps.infowindow({
内容：消息[num]
});
google.maps.event.addListener（标记'click'，函数（）{
打开（marker.get（'map'），marker）；
});
},
删除：函数（）{
Backbone.View.prototype.remove.call（this）；
$（窗口）.off（'scroll'）；
}
});
返回MapListView；
});

html

---

谢谢。

你必须换行

var map = new google.maps.Map($('#map-canvas'), mapOptions);

到

Map（）构造函数期望

节点
对象。另见和

更新：如果映射容器div元素的id为
maplist页面，则使用：

var map = new google.maps.Map($('#maplist-page')[0], mapOptions);

另请参见不带主干的.js。
您必须更改行

var map = new google.maps.Map($('#map-canvas'), mapOptions);

到

Map（）构造函数期望
节点
对象。另见和

更新：如果映射容器div元素的id为
maplist页面，则使用：

var map = new google.maps.Map($('#maplist-page')[0], mapOptions);

另请参见without backbone.js。
问题是，我猜在初始化映射时，div尚未渲染。所以
this.$el.html（mapListViewTemplate）
应该是
render
方法内的第一行

然后用dom元素初始化Google地图，而不是Anto Jurkovic所说的jQuery对象：
var map=new Google.Maps.map（$（'#map canvas'）[0]，mapOptions）
问题是，我猜在初始化贴图时，div尚未渲染。所以
this.$el.html（mapListViewTemplate）
应该是
render
方法内的第一行

然后用dom元素初始化Google地图，而不是Anto Jurkovic所说的jQuery对象：
var map=new Google.Maps.map（$（'#map canvas'）[0]，mapOptions）
由于行
var-map=new google.maps.map（$（'#map canvas'），mapOptions），该消息正在提交检查地图容器或将该行更改为
var map=new google.maps.map（document.getElementById（“地图画布”）、mapOptions我已经包括在内了。检查我编辑的问题。我已经在问题中说明他的解决方案没有帮助。该消息之所以出现，是因为行
var map=new google.maps.map（$（'#map canvas'），mappoptions）检查地图容器或将该行更改为
var map=new google.maps.map（document.getElementById（“地图画布”）、mapOptions我已经包括在内了。检查我编辑的问题。我已经在问题中说明了他的解决方案没有帮助。我得到了这个错误未捕获类型错误：无法读取undefinedWhat的属性'offsetWidth'地图容器div元素的id是什么？我的地图容器是#maplist pagethank you@AntoJurković，它帮助了我！我在未捕获的TypeError中收到此错误：无法读取未定义的属性'offsetWidth'，映射容器div元素的id是什么？我的映射容器是#maplist pagethank you@AntoJurković，它帮助了我！
var map = new google.maps.Map($('#maplist-page')[0], mapOptions);