Resize container and move to center.
HTML
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.2.4.min.js"></script>
<p>
<button type="button" id="resize">Resize</button>
</p>
<div id="map"></div>
CSS
#map{width:100px;height:100px}
JavaScript
var map = $('#map'),
center = {};
map.tinyMap({
'center': '台北車站',
'zoom': 14,
'event': {
'idle': function () {
// 閒置後取得目前的位置
center = this.getCenter();
$('#resize').prop('disabled', false);
}
}
});
$('#resize').on('click', function () {
map.animate({
'width': (map.width() * 1.5),
'height': (map.height() * 1.5),
}, 300, function () {
var m = map.data('tinyMap');
// 執行 map resize
google.maps.event.trigger(m.map, 'resize');
// 移動地圖
m.map.setCenter(center);
// 或r map.tinyMap('panTo', center);
});
});