5
\$\begingroup\$

This is the proof-of-concept code with drafts for widgets for my current project that uses Google Maps. As a result the code produces 3 buttons in the top right corner:

enter image description here

Any advice on how I may improve it? (personally I'm specifically server-side developer and don't use JavaScript extensively, so expect a lot of no-no's in my code):

$(function() {
    var latlng = new google.maps.LatLng(-41.288771, 174.775314);
    var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        panControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var terrainBtn = new MapTypeButton({ title: 'Terrain', mapType: google.maps.MapTypeId.TERRAIN });
    terrainBtn.attach(map, google.maps.ControlPosition.TOP_RIGHT);
    var satelliteBtn = new MapTypeButton({ title: 'Satellite', mapType: google.maps.MapTypeId.SATELLITE });
    satelliteBtn.attach(map, google.maps.ControlPosition.TOP_RIGHT);
    var mapBtn = new MapTypeButton({ title: 'Map', mapType: google.maps.MapTypeId.ROADMAP });
    mapBtn.attach(map, google.maps.ControlPosition.TOP_RIGHT);
});

/**
 * Helper function to implement JS inheritance
 */
Function.prototype.subclass= function(base) {
    var c = Function.prototype.subclass.nonconstructor;
    c.prototype = base.prototype;
    this.prototype = new c();
};
Function.prototype.subclass.nonconstructor= function() {};

function CustomButton(options)
{
    var defaults = {};
    this.settings = $.extend({}, defaults, options);
}

CustomButton.prototype.render = function() {
    this.jq = $('<div class="custom-map-button">' + this.settings.title + '</div>');

    if (this.settings.classes) {
        for (var i in this.settings.classes) {
            this.jq.addClass('custom-map-button-' + this.settings.classes[i]);
        }
    }

    return this.jq[0];
};

CustomButton.prototype.attach = function(map, position) {
    this.map = map;
    map.controls[position].push(this.render());
};


function MapTypeButton(options)
{
    CustomButton.apply(this, arguments);
}
MapTypeButton.subclass(CustomButton);

MapTypeButton.prototype.render = function() {
    var result = CustomButton.prototype.render.apply(this, arguments);

    if (this.map.getMapTypeId() == this.settings.mapType) {
        this.jq.addClass('custom-map-button-selected');
    }

    this.jq.addClass('custom-map-button-mapType');

    return result;
};

MapTypeButton.prototype.attach = function(map, position, init) {
    var t = this;

    CustomButton.prototype.attach.apply(this, arguments);

    t.jq.click(function() {
        t.click();
    });
};

MapTypeButton.prototype.click = function() {
    $('.custom-map-button-mapType.custom-map-button-selected').removeClass('custom-map-button-selected');
    this.map.setMapTypeId(this.settings.mapType);
    this.jq.addClass('custom-map-button-selected');
};
\$\endgroup\$
2
\$\begingroup\$

Pretty good Zmayte!

But, if I had to nitpick...

var defaults = {};
this.settings = $.extend({}, defaults, options);

The defaults is redundant, whilst an empty object.

for (i in this.settings.classes) {
    this.jq.addClass('custom-map-button-' + this.settings.classes[i]);
}

i is not defined, so you are doing property assignment on the global object, making i a global variable. A for in also iterates over all enumerable properties on the prototype chain. This can lead to problems when you don't know what has augmented Object and so on. Use hasOwnProperty() to prevent this problem.

\$\endgroup\$
  • \$\begingroup\$ defauls will be filled with default values later. Fixed i visibility. And will read about hasOwnProperty() soon. Anything else? \$\endgroup\$ – zerkms Dec 28 '11 at 4:59
  • \$\begingroup\$ @zerkms: Probably, but let me look later when I'm not supposed to be working :) \$\endgroup\$ – alex Dec 28 '11 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.