Mapbox（Leaflet / OpenStreetMap）で検索ボックスを表示したい

現在Monacaで地図を用いたアプリを開発しております。

MapboxとLeafletを使い、下記のコードを書くことでブラウザ上に地図を表示させることができました。これに加えて検索ボックスを表示させたいと考えているのですが、Leafletのドキュメントに特に記載がないようで、またLeaflet用の検索プラグインのデモも試してみましたが、正しく地図が表示されませんでした。

地図上（あるいは地図が表示されているページのどこか）に検索ボックスを置き、例えば「渋谷」と打ち込んだら渋谷周辺の地図が表示されるようなページを作りたいのですが、Leafletで実現することは可能でしょうか？

※ちなみにLeafletを用いているのは、地図上の任意の位置にマーカー（アイコン）をJavaScriptで設定できるためで、もし検索ボックスの設置とマーカーの表示がMapboxのみでできる場合、Leafletを使わなくても大丈夫です。

HTML
1<head>
2<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
3<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
4<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
5   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
6   crossorigin=""/>
7<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
8   integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
9   crossorigin=""></script>
10</head>
11
12<body>
13<div id="mapid" style="height: 600px;"></div>
14    
15<script>
16
17	var mymap = L.map('mapid', {
18    // オプション設定
19    center: [35.658350, 139.7015], // 初期表示の場所
20    zoom: 16,                      // 地図のズーム倍率
21    zoomControl: false,            // ズームコントロールボタンの表示
22  });
23
24	L.tileLayer('XXXXXXXXXXX', { // MapBoxのアクセストークン
25		maxZoom: 18,
26		id: 'mapbox.streets', // マップデザインの種類
27	}).addTo(mymap);
28
29  // マーカー
30	L.marker([35.658350, 139.7015]).addTo(mymap)
31		.bindPopup('ポップアップを表示');
32
33</script>    
34</body>