This is a simple checkbox menu example. You have to define two methods to make it work: activateCurrent and getHtml
and this variable will be scoped to the current Maplace instance.
var html_checks = { //required: called by Maplace.js to activate the current voice on menu activateCurrent: function(index) { this.html_element.find("input[value='" + index + "']").attr('checked', true); }, //required: called by Maplace.js to get the html of the menu getHtml: function() { var self = this, html = ''; //if more than one location if(this.ln > 1) { html += '<div class="checkbox controls ' + this.o.controls_cssclass + '">'; //check "view all" link //use ShowOnMenu(index) to know if a location has to appear on menu if(this.ShowOnMenu(this.view_all_key)) { html += '<label><input type="radio" name="gmap" value="' + this.view_all_key + '"/>' + this.o.view_all_text + '</label>'; } //iterate the locations for (var a = 0; a < this.ln; a++) { if(this.ShowOnMenu(a)) html += '<label><input type="radio" name="gmap" value="' + (a+1) + '"/>' + (this.o.locations[a].title || ('#' + (a+1))) + '</label>'; } html += '</div>'; } this.html_element = $('<div class="wrap_controls"></div>').append(html); //event on change //use ViewOnMap(index) to trigger the marker on map this.html_element.find('input[type=radio]').bind('change', function() { self.ViewOnMap(this.value); }); return this.html_element; } };
//new Maplace object var maplace = new Maplace(); //add the new menu with the method AddControl(name, function) maplace.AddControl('checks', html_checks); //load the map maplace.Load({ controls_type: 'checks', locations: [{...}, {...}] });