jQuery tinyMap 3.2.0 Example

HTML

<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.2.0.js"></script>
<!-- 
jQuery tinyMap v3.2.0 已不需手動引入 Google Maps API
-->

<p><button type="button" id="clear">Clear</button></p>
<div id="map" class="map"></div>

CSS

.map {width:100vw;height:100vh}
.label{background-color:rgba(0,0,0,0.5);color:white;padding:3px 6px}

JavaScript

// Markers
var marker =  [
    {'addr': ['25.041282077030896', '121.56741142272949'], 'id': 'A'},
    {'addr': ['25.0383270525352', '121.57045841217041'], 'id': 'A'},
    {'addr': ['25.034516521123315','121.56496524810791'], 'id': 'A'},
    {'addr': ['25.037627167884715', '121.56732559204102'], 'id': 'D', 'label': 'D', 'css': 'label'},
    {'addr': ['25.039726809855434', '121.55633926391602'], 'id': 'A'}
];
// Directions


var direction = [
    {
        'id': 'DIR1',
        'from': '臺北市大安區羅斯福路四段一號',
        'fromText': '起點: 羅斯福路四段',
        'waypoint': [
            {'location': '台北市信義區仁愛路4段505號', 'text': '仁愛路中繼點'},
            {'location': '臺北市松山區南京東路4段2號', 'text': '南京東路中繼點'}
        ],
        'to': '臺北市北平西路三號',
        'toText': '終點: 北平西路',
        'travel': 'driving',
        'icon': {
            'from': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
            'to': 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
            'waypoint': '3.png'
        }
    },
    {
        'id': 'DIR2',
        'from': '台北車站',
        'to': '台北101'
    }
];
// Polylines
var polyline = [
    {
        'id': 'L1',
        'coords': [
            ['25.05176362315452', '121.54683386230465'],
            ['25.0587614830369', '121.55301367187496'],
            ['25.05673992011185', '121.56005178833004'],
        ],
        'color': '#008800',
        'width': 2
    }
];
// Circles        
var circle = [
    {
        'id': 'C1',
        'center': ['25.047924', '121.51708099999996'],
        'radius': 500,
        'width': 1,
        'color': '#333333',
        'fillcolor': '#999999'
    },
    {
        'id': 'C2',
        'center': ['25.038', '121.56399999999996'],
        'radius': 400,
        'width': 3,
        'color': '#FF0000',
        'fillcolor': '#CC0000',
    }
];

// Execute jQuery tinyMap       
var map = $('#map');
map.tinyMap({
    'center': ['25.037627167884715', '121.56732559204102'],
    'zoom': 14,
    'marker': marker,
   ...