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:

Any advices 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):

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:

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 (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');
};

$(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');
};