JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.2.18.min.js"></script>
<div class="box">
<input type="search" id="q" value="台北101" placeholder="Search…" autofocus />
<button type="button" id="submit">Go</button>
</div>
<div class="map"></div>
CSS
input[type],button{padding:4px}
.box{padding:1rem 0}
.map{width:100vw;height:100vh}
.label{background:rgba(0,0,0,0.5);color:white;padding:3px}
JavaScript
var map = $('.map');
// Create tinyMap
map.tinyMap({
'center': ['25.034516521123315','121.56496524810791'],
'zoom': 13
});
// Events binding
$(document)
.on('keyup', '#q', function (e) {
// ENTER
if (13 === e.keyCode) {
$('#submit').trigger('click');
}
})
.on('click', '#submit', function () {
var q = $('#q').val();
if (!q.length) {
alert('請輸入地址');
return false;
}
map.tinyMap('clear')
.tinyMap('modify', {
'marker': [{
'addr': q,
'newLabel': q,
'newLabelCSS': 'label',
'draggable': true,
'event': {
'created': function () {
map.tinyMap('panTo', this.position);
}
}
}]
});
});