Upgrading google maps api with mapstraction in Rails 3

Question

I'm trying to upgrade an app into Rails 3. The app requires a map that can be edited and it has been using google maps and mapstraction. When I upgraded to rails 3 the map stopped showing up and I figured that's because it needed to be updated from google maps api v2 to v3.

I've been trying to use this tutorial to upgrade it but because the app is using mapstraction I've been having difficulty getting it to work.

Initially, this was in the html:

<script src="http://maps.google.com/maps?file=api&v=2&key=<%= GOOGLE_MAPS_KEY %>" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.js" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.core.js" type="text/javascript"></script>
<script src="/javascripts/mapstraction/mxn.google.core.js" type="text/javascript"></script>

And the maps.js was as follows:

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])
        m.m.addMarker(marker);
    }
});

I tried changing the html to this (based on the upgrade tutorial and the tutorial from mapstraction):

<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://mapstraction.com/mxn/build/latest/mxn.js?(googlev3)" type="text/javascript"></script>

But when that didn't make a difference I tried to remove mapstraction and change the maps.js to the following:

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])
        m.m.addMarker(marker);
    }
});

But still nothing...does anyone have any idea how I can get the map to display?

Thanks

Answer 1

1. as it seems your code uses jQuery($.extend), did you include jQuery?
2. all the method you've defined are methods of Map but you try to call these methods for Map.m(which is a google.map.Map-instance and doesn't have such methods)
3. I don't see where you create the Map-instance(I mean your "class", not the google.maps.Map) at all
4. a google.maps.Map requires a center-property which is not present(at least not when you create the google.maps.Map-instance in Map.init())