HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Google Maps buttons

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
buttonsmapsgoogle

Problem

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 = $('' + this.settings.title + '');

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.

Solution

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.

Code Snippets

var defaults = {};
this.settings = $.extend({}, defaults, options);
for (i in this.settings.classes) {
    this.jq.addClass('custom-map-button-' + this.settings.classes[i]);
}

Context

StackExchange Code Review Q#7202, answer score: 2

Revisions (0)

No revisions yet.