Google Maps code inside of the object literal

Question

I'm trying to create a wrapper object for google maps script, but for some reason it doesn't seem to be working - could someone have a look at the below code and tell me what I'm doing wrong please?

var cmdMapObject = {
canvas : 'map-canvas',
latLng : '-25.344, 131.036',
zoom : 14,
myLocation : '',
poly : '',
map : '',
markers : [],
path : '',
addPoint : function(event) {
    "use strict";

    // add the latitude and longitute to array after the last item
    cmdMapObject.path.insertAt(cmdMapObject.path.length, event.latLng);


    // create new marker
    var marker = new google.maps.Marker({
        position: event.latLng,
        map: cmdMapObject.map,
        draggable: true
    });


    // add new marker to the array
    cmdMapObject.markers.push(marker);


    // set tooltip title to the marker
    marker.setTitle("#" + cmdMapObject.path.length);


    // remove marker on click
    google.maps.event.addListener(marker, 'click', function() {

            // remove marker from the map
            marker.setMap(null);

            // remove location from array and path
            for (var i = 0, ml = cmdMapObject.markers.length; i < ml && cmdMapObject.markers[i] != marker; ++i) {
                cmdMapObject.markers.splice(i, 1);
                cmdMapObject.path.removeAt(i);
            }
        }
    );


    // add listener to draggend event to change the position of the marker
    // when dragging has ended
    google.maps.event.addListener(marker, 'dragend', function() {
        for (var i = 0, ml = cmdMapObject.markers.length; i < ml && cmdMapObject.markers[i] != marker; ++i) {
            var thisNewPosition = marker.getPosition();
            cmdMapObject.markers[i]['position'] = thisNewPosition;
            cmdMapObject.path.setAt(i, thisNewPosition);
        }
    });

},
initialize : function() {

    "use strict";

    cmdMapObject.path = new google.maps.MVCArray;

    cmdMapObject.myLocation = new google.maps.LatLng(cmdMapObject.latLng);

    cmdMapObject.map = new google.maps.Map(document.getElementById(cmdMapObject.canvas), {
        zoom: cmdMapObject.zoom,
        center: cmdMapObject.myLocation,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    cmdMapObject.poly = new google.maps.Polygon({
        strokeWeight: 3,
        fillColor: '#5555FF'
    });

    cmdMapObject.poly.setMap(cmdMapObject.map);
    cmdMapObject.poly.setPaths(new google.maps.MVCArray(cmdMapObject.path));

    google.maps.event.addListener(cmdMapObject.map, 'click', cmdMapObject.addPoint);

},
mapInit : function() {
    "use strict";
    google.maps.event.addDomListener(window, 'load', cmdMapObject.initialize);
}
};
cmdMapObject.mapInit();

What I get is the zooming slider on the left, map/sattelite buttons and the copyright notice at the bottom, but no map.

Answer 1

Ok - I've figured it out - I used a constructor approach rather than literal object:

function cmdMapObject() {

    var thisObj = this;

    var canvas = 'map-canvas';
    var latLng = [ '-25.344', '131.036' ];
    var zoom = 14;
    var myLocation = null;
    var poly = null;
    var map = null;
    var markers = [];
    var path = new google.maps.MVCArray;

    this.addPoint = function(event) {
        "use strict";

        // add the latitude and longitute to array after the last item
        path.insertAt(path.length, event.latLng);


        // create new marker
        var marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            draggable: true
        });


        // add new marker to the array
        markers.push(marker);


        // set tooltip title to the marker
        marker.setTitle("#" + path.length);

        // remove marker on click
        google.maps.event.addListener(marker, 'click', function() {

            // remove marker from the map
            marker.setMap(null);

            // remove location from array and path
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                markers.splice(i, 1);
                path.removeAt(i);


        });


        // add listener to draggend event to change the position of the marker
        // when dragging has ended
        google.maps.event.addListener(marker, 'dragend', function() {
            for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
                var thisNewPosition = marker.getPosition();
                markers[i]['position'] = thisNewPosition;
                path.setAt(i, thisNewPosition);
        });

    };


    this.initialize = function() {

        "use strict";

        myLocation = new google.maps.LatLng(latLng[0], latLng[1]);

        map = new google.maps.Map(document.getElementById(canvas), {
            zoom: zoom,
            center: myLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        poly = new google.maps.Polygon({
            strokeWeight: 3,
            fillColor: '#5555FF'
        });

        poly.setMap(map);
        poly.setPaths(new google.maps.MVCArray([path]));


        // bind the click event to the map to trigger polygon drawing
        google.maps.event.addListener(map, 'click', function(event) {
            thisObj.addPoint(event);
        });

    };


    this.mapInit = function() {
        "use strict";
        google.maps.event.addDomListener(window, 'load', function() {
            thisObj.initialize();
        });
    }

};

var mapPolygon = new cmdMapObject();
mapPolygon.mapInit();

Thanks to all participating - still don't know who downvoted - I mean seriously - if I knew I wouldn't ask.

Answer 2

The problem is:

latLng : '-25.344, 131.036'

This is a string. It should be a google.maps.LatLng object. Then when you use it here:

cmdMapObject.myLocation = new google.maps.LatLng(cmdMapObject.latLng);

You either need to convert it from a string to two numbers (-25.344, 131.036), or just set it to be that google.maps.LatLng object:

cmdMapObject.myLocation = cmdMapObject.latLng;

working example