Маркер Leaflet-Draw не работает должным образом с настраиваемым элементом управления

Я использую Leaflet Draw и создал настраиваемый элемент управления вместо элемента управления по умолчанию.

В моем настраиваемом элементе управления все работает нормально (полилинии, многоугольники, круги и прямоугольники), кроме маркера.
Когда я нажимаю на пункт меню «Маркер», маркер сразу же помещается в позицию позади меню, вместо того, чтобы показывать у меня есть возможность перетащить его по карте и выбрать местоположение (см. ниже неправильное и ожидаемое).

Как я могу решить эту проблему?

HTML-код:

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-pencil"></i> Drawing tools <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#" onclick="draw('polyline')">Line</a></li>
            <li><a href="#" onclick="draw('polygon')">Polygon</a></li>
            <li><a href="#" onclick="draw('rectangle')">Rectangle</a></li>
            <li><a href="#" onclick="draw('circle')">Circle</a></li>
            <li><a href="#" onclick="draw('marker')">Marker</a></li>
        </ul>
</div>

Функция Javascript:

function draw(type) {

    var po = '';
    switch(type) {
        case 'polygon':
            po = new L.Draw.Polygon(map);
            break;
        case 'polyline':
            po = new L.Draw.Polyline(map);
            break;
        case 'rectangle':
            po = new L.Draw.Rectangle(map);
            break;
        case 'circle':
            po = new L.Draw.Circle(map);
            break;
        case 'marker':
            po = new L.Draw.Marker(map);
            break;
    }
    po.enable();
}

Спасибо и извините за мой плохой английский!