在Rails 3中使用mapstraction升级google maps api

我正在尝试将应用程序升级到Rails 3.该应用程序需要一个可以编辑的地图，并且它一直在使用谷歌地图和地图绘制。 当我升级到rails 3时，地图停止显示，我认为这是因为它需要从谷歌地图api v2更新到v3。

我一直在尝试使用本教程升级它，但由于应用程序正在使用mapstraction，我一直难以让它工作。

最初，这是在HTML中：

<script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript">    

maps.js如下：

 var Map = function() { this.init() } $.extend(Map.prototype, { m : false, init: function() { this.m = new mxn.Mapstraction('mapdiv', 'googlev3') this.m.addControls({pan: true, zoom: 'large', map_type: false}) // this.m.enableScrollWheelZoom() this.m.setMapType(3) return this.m }, addPoint: function(lat, lng, html) { var myPoint = new mxn.LatLonPoint(lat, lng); var marker = new mxn.Marker(myPoint); marker.setInfoBubble(html); this.m.addMarker(marker); }, setCenterAndZoom: function(center, zoom) { this.m.setCenterAndZoom(center, zoom) }, boundingBox: function(lat1, lon1, lat2, lon2) { var zoom = this.m.getZoomLevelForBoundingBox(new mxn.BoundingBox(lat1, lon1, lat2, lon2)) var centerlng = (lon1 + lon2) / 2 var centerlat = (lat1 + lat2) / 2 var myPoint = new mxn.LatLonPoint(centerlat, centerlng); this.m.setCenterAndZoom(myPoint, zoom) }, addPointToLine: function(lat, lng, line, html, length) { var point = new mxn.LatLonPoint(lat, lng) line.points.push(point); var i = line.points.length var num = 100 if (i == 1) { m.addPoint(lat, lng, html) } }, addUser: function(lat, lng, avatar, html) { var marker = new mxn.Marker(new mxn.LatLonPoint(lat, lng)); marker.setInfoBubble(html); marker.setIcon(avatar); marker.setIconSize([30,30]) mmaddMarker(marker); } }); 

我尝试将html更改为此（基于升级教程和mapstraction教程）：

但是当这没有什么区别时，我试图删除mapstraction并将maps.js更改为以下内容：

 var Map = function() { this.init() } $.extend(Map.prototype, { m : false, init: function() { this.m = new google.maps.Map(document.getElementById('mapdiv'), {zoom: 13, mapTypeId: google.maps.MapTypeId.HYBRID}); // this.m.addControls({pan: true, zoom: 'large', map_type: false}) // this.m.enableScrollWheelZoom() // this.m.setMapType(3) return this.m }, addPoint: function(lat, lng, html) { var myPoint = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker(myPoint); marker.setInfoBubble(html); this.m.addMarker(marker); }, setCenterAndZoom: function(center, zoom) { this.m.setCenterAndZoom(center, zoom) }, boundingBox: function(lat1, lon1, lat2, lon2) { var zoom = this.m.getZoomLevelForBoundingBox(new google.maps.LatLonAltBox(lat1, lon1, lat2, lon2)) var centerlng = (lon1 + lon2) / 2 var centerlat = (lat1 + lat2) / 2 var myPoint = new google.maps.LatLng(centerlat, centerlng); this.m.setCenterAndZoom(myPoint, zoom) }, addPointToLine: function(lat, lng, line, html, length) { var point = new google.maps.LatLng(lat, lng) line.points.push(point); var i = line.points.length var num = 100 if (i == 1) { m.addPoint(lat, lng, html) } }, addUser: function(lat, lng, avatar, html) { var marker = new google.maps.Marker(new google.maps.LatLng(lat, lng)); marker.setInfoBubble(html); marker.setIcon(avatar); marker.setIconSize([30,30]) mmaddMarker(marker); } }); 

但仍然没有…有没有人知道如何让地图显示？

谢谢

Answer 1

1. 因为看起来你的代码使用jQuery（ $.extend ），你是否包含了jQuery？
2. 您定义的所有方法都是Map方法，但是您尝试为Map.m调用这些方法（这是一个google.map.Map -instance并且没有这样的方法）
3. 我没有看到你在哪里创建Map -instance（我的意思是你的“类”，而不是google.maps.Map ）
4. google.maps.Map需要一个不存在的center属性（至少在Map.init()创建google.maps.Map -instance时不会出现）