tinyMap: v2.9.5 example

by essoduke chang

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW&amp;libraries=geometry"></script>
<script src="http://app.essoduke.org/tinyMap/jquery.tinyMap-2.9.5.min.js?ver=2.9.5.2"></script>
<button id="a">路徑規劃</button>
<div id="map" class="map"></div>
<div id="loading">LOADING</div>

CSS

#loading{background-color:#c00;color:#fff;padding:3px;position:fixed;top:0;right:0;display:none}
.map{width:100%;height:100vh}

JavaScript

var map = $('#map');
var loading = $('#loading');

map.tinyMap({
    'center': ['25.033972149830436', '121.56063079833984'],
    'zoom': 14
});

$(document)
    .on('click', '#a', function () {

        map.tinyMap('clear');
        loading.show();
        
        window.setTimeout(function () {
            map.tinyMap('modify', {
                'direction': [
                    {
                        'from': ['25.041904178378704', '121.55848503112793'],
                        'to': ['25.034516521123315','121.56496524810791'],
                        'toText': '台北 101',
                        'waypoint': [
                            {
                                'location':  ['25.031794640503858', '121.56414985656738'],
                                'text': '中繼點'
                            }
                        ],
                        'event': {
                            'directions_changed': {
                                'func': function () {
                                    loading.hide();
                                    console.dir(loading.is(':visible'));
                                }
                            }
                        }
                    }
                ]
            });
        }, 3000);
    });