Google Maps buttons

Question

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

Answer 1

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.

• zerkms: defauls will be filled with default values later. Fixed i visibility. And will read about hasOwnProperty() soon. Anything else?
• alex: @zerkms: Probably, but let me look later when I'm not supposed to be working :)