Leaflet demo

For update marker position

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 100%;
}

.menu-metric-control-test {
	background-color: white;
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	display: block;
}

.menu-metric-control-test-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}

.menu-metric-control-test-toggle {
	width: 30px;
	height: 30px;
	background-size: 15px 15px;
}

.menu-metric-control-test-form {
  height:100%;
  width: 100%;
}

.menu-metric-control-test .menu-metric-control-test-form,
.menu-metric-control-test-expanded .menu-metric-control-test-toggle {
	display: none;
}

.menu-metric-control-test-expanded .menu-metric-control-test-form{
	display: block;
	position: relative;
}

JavaScript

var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	 	        maxZoom: 18,
	 	        attribution: '&copy; <a href="http://openstreetmap.org/copyright">OSM</a>'});

var map = L.map('map').setView([51, 0], 6).addLayer(osm);

L.Control.MetricMenuTest = L.Control.extend({
    options: {
        position: 'topleft',
        collapsed: true,
    	autoZIndex: true
    },
    initialize: function (options) {
    	L.Util.setOptions(this, options);
    },
    onAdd: function (map) {
    	this._map = map;
    	this._initMenu();    	
    	return this._container;
    },
    addTo: function (map) {
		L.Control.prototype.addTo.call(this, map);
		return this._expandIfNotCollapsed();
	},
    _initMenu: function (map) {
    	var container = L.DomUtil.create('div', 'menu-metric-control-test leaflet-bar leaflet-control');
    	container.setAttribute('aria-haspopup', true);

		L.DomEvent.disableClickPropagation(container);
		L.DomEvent.disableScrollPropagation(container);

    	this._map.on('click', this._collapse, this);

    	if(this.options.collapsed){
    		if (!L.Browser.android) { 
    			L.DomEvent.on(container, 'mouseover', this._expand, this);
            	L.DomEvent.on(container, 'mouseout', this._collapse, this);
    		}
    	}
    	else {
    		this._expand();
    	}

    	var menuIcon = this._menuIcon = L.DomUtil.create('div', 'menu-metric-control-test-toggle', container);
    	if (L.Browser.touch) {
			L.DomEvent.on(menuIcon, 'click', L.DomEvent.stop);
			L.DomEvent.on(menuIcon, 'click', this._expand, this);
		} 
		else {
			L.DomEvent.on(menuIcon, 'focus', this._expand, this);
		}

		var form = this._form = L.DomUtil.create('form', 'menu-metric-control-test-form leaflet-bar-part leaflet-bar-part-single');
		for(var i = 0; i<50; i++) {
			var label = document.createElement('label');

			var input = document.createElement('input');
			input.type = 'checkbox';
			input.defaultChecked = false;

			var name =...