he estado buscando sobre este tipo de botón
del complemento de control de ubicación del folleto , y este ejemplo de geocodificador

pero todavía no entendía lo básico para hacer un control extendido con la función de expansión
así que agrego un código jquery para crear este botón de Google:

 L.Control.STARTpointroute = L.Control.extend({ options: { position: 'topright' }, initialize: function(options) { L.Util.setOptions(this, options); }, /*BEGIN CREATE BUTTON USING LEAFLET*/ onAdd: function() { this._map = mymap; var className = 'leaflet-control-startpoint', container = this._container = L.DomUtil.create('div', className); L.DomEvent.disableClickPropagation(container); var button = this._button = L.DomUtil.create('button', className ); var showcrosshair = L.DomUtil.create('span', 'when-inactive'); showcrosshair.textContent ='Pilih Lokasi Awal Rute'; button.appendChild(showcrosshair); var marklocation = L.DomUtil.create('span', 'when-active'); marklocation.textContent ='Okay'; button.appendChild(marklocation); /*END CREATE BUTTON USING LEAFLET*/ /*BEGIN FUNCTION FOR TOOGLE BUTTON USING JQUERY*/ $(function(){ $('button.leaflet-control-startpoint').on('click', handler1); $('button.leaflet-control-startpoint').on("click", _crosshair); }); function handler1() { $(this).addClass("active"); $(this).on("click", handler2); $(this).on("click", _marker); $(this).off("click", _crosshair); } function handler2() { $(this).removeClass("active"); $(this).on("click", handler1); $(this).on("click", _crosshair); $(this).off("click", _marker); } /*END FUNCTION FOR TOOGLE BUTTON USING JQUERY*/ _crosshair = function() { //show croshair the center of map } _marker = function() { //add marker by the center coordinate } container.appendChild(button); return button; } }); var startPointRoute = new L.Control.STARTpointroute(); mymap.addControl(startPointRoute);

y algo de codigo css

 .leaflet-control-startpoint.active .when-active, .leaflet-control-startpoint .when-inactive{ display:inline-block; } .leaflet-control-startpoint.active .when-inactive, .leaflet-control-startpoint .when-active{ display:none; }

¿Puede alguien ayudarme a descubrir cómo crear este botón de Google usando solo un folleto (función de expansión y contracción)?