patternjavascriptMinor
Google Maps buttons
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.
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...
The
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.