tinyMap: Address list of markers

by essoduke chang

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW"></script>
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-2.8.4.min.js"></script>
<ul id="list">
    <li>點選：</li>
    <!-- 建立地址清單 -->
    <li><a href="#">新光三越</a></li>
    <li><a href="#">台北市政府</a></li>
    <li><a href="#">台北車站</a></li>
</ul>
<div id="map"></div>

CSS

#list {margin:0 0 10px 0;padding:0}
#list li{display:inline-block}
#list li a{padding: 4px;background-color:gray;color:white;text-decoration:none}
#list li a:hover{background:black}
#map{width:100%;height:300px}

JavaScript

var map = $('#map');    

map.tinyMap({
    'center': {
            'x': '25.04151536540612',
            'y': '121.56354904174805'
    },
    'zoom': 13,
    'direction':[
        {
            'from': '台北市信義區松壽路9號',
            'to': '台北市信義區松壽路200號',
            'waypoint': ['台北市信義區松壽路9號', '台北市信義區松壽路200號'],
            'travel': 'driving'
        }
    ],
    'marker': [
        /* 給予每個標記唯一的 id 值 */
        {'addr': '台北市信義區松壽路9號', 'text': '新光三越', 'id': '新光三越'},
        {'addr': '台北市政府', 'text': '台北市政府', 'id': '台北市政府'},
        {'addr': '台北車站', 'text': '台北車站', 'id': '台北車站'}
    ]
});

$('#list').on('click', 'a', function () {
    var obj = $(this),        
        id = obj.text(),
        m = {},
        marker = {},
        markers = [],
        i = 0;       
    
    // 放大移動點
    map.tinyMap('modify', {zoom: 15});
    
    // 移動地圖
    // 以新光三越為例，因為給予的地址（id）太籠統，所以不建議用此方式移動地圖。
    // 改為下方 m.map.panTo(marker); 直接移動到符合 ID 的標記位置比較好。
    // map.tinyMap('panto', id);
    
    // 取得 tinyMap 實例
    m = map.data('tinyMap');
    // 取得所有標記
    markers = m._markers;
        
    for (i; i < markers.length; i += 1) {
        marker = markers[i];
        // 關閉所有 infoWindow
        marker.infoWindow.close();
        console.dir(typeof marker.infoWindow.close);
        // 若標記 id 符合則開啟 infoWindow
        if (id === marker.id) {            
            marker.infoWindow.open(m.map, marker);
            // 移動地圖至符合的標記位置
            m.map.panTo(marker.position);            
        }
    }
    
});