jQuery tinyMap 進階應用
五年來，jQuery tinyMap 已邁入 v2.8.4，期間也是因為有許多網友們的建議，才能有逐漸成型的今日，就連 Facebook 分享數都突破了 300 大關，真是深感意外。
所以我整理了幾個比較特殊的問題並整理成範例讓更多人可以參考。
找出距離最近的標記
可以利用 Google Maps API 提供的幾何圖形程式庫來計算各點與目前的直線距離。
要使用該程式庫，在引入 API 時需加上 libraries=geometry 參數：
<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
在 Map Idle 事件內用迴圈逐一比對各標記與某點之間的距離，並將所得結果（公尺）存入陣列，再找出陣列最小值的索引值即可。
將地圖置放於 Collapse 或 Tab 容器內導致的顯示異常
Google Maps 會在容器寬高有異動時觸發 resize 事件。通常 Collapse 或 Tab 都使用 display: none/block 來達成效果，而這也會直接改變容器的寬高為 0，因此地圖再次顯示時就會不完整。
這個問題有兩種解決方法：
將 display: none/block 更改為 visibility: hidden/visible，然而這會導致該元素雖然隱藏了，但實際上仍然佔用住原始的空間，只是看不見該元素而已。
所以另一種手動觸發 resize 的方式較為適合。
以 Bootstrap 3 Collapse 為例：
$('#collapsible').on('shown.bs.collapse', function () {
// 再觸發一次 resize 事件
google.maps.event.trigger(MAP, 'resize');
});
點選 HTML 清單來移動地圖至點選的地址
使用 id 給予標記唯一識別，並利用 instance 取得標記陣列，再移動地圖至符合 id 的標記位置。
讀取地圖後開啟 infoWindow 或 點選按鈕控制 infoWindow
適用 v2.7.0 或更新版本
點選 marker 自動關閉其他已開啟的 infoWindow
v2.8.4 已新增 infoWindowAutoClose (bool) 參數可設置是否自動關閉。
2.8.3 – 2.7.0 版本請參考:
利用縮放取得地圖範圍內的標記
綁定地圖的 zoom_changed 事件，並利用 instance 取得目前範圍，再用迴圈逐一比對標記是否在範圍內。
延伸閱讀
五年來，jQuery tinyMap 已邁入 v2.8.4，期間也是因為有許多網友們的建議，才能有逐漸成型的今日，就連 Facebook 分享數都突破了 300 大關，真是深感意外。
所以我整理了幾個比較特殊的問題並整理成範例讓更多人可以參考。
找出距離最近的標記
可以利用 Google Maps API 提供的幾何圖形程式庫來計算各點與目前的直線距離。
要使用該程式庫，在引入 API 時需加上 libraries=geometry 參數：
<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
在 Map Idle 事件內用迴圈逐一比對各標記與某點之間的距離，並將所得結果（公尺）存入陣列，再找出陣列最小值的索引值即可。
將地圖置放於 Collapse 或 Tab 容器內導致的顯示異常
Google Maps 會在容器寬高有異動時觸發 resize 事件。通常 Collapse 或 Tab 都使用 display: none/block 來達成效果，而這也會直接改變容器的寬高為 0，因此地圖再次顯示時就會不完整。
這個問題有兩種解決方法：
將 display: none/block 更改為 visibility: hidden/visible，然而這會導致該元素雖然隱藏了，但實際上仍然佔用住原始的空間，只是看不見該元素而已。
所以另一種手動觸發 resize 的方式較為適合。
以 Bootstrap 3 Collapse 為例：
$('#collapsible').on('shown.bs.collapse', function () {
// 再觸發一次 resize 事件
google.maps.event.trigger(MAP, 'resize');
});點選 HTML 清單來移動地圖至點選的地址
使用 id 給予標記唯一識別，並利用 instance 取得標記陣列，再移動地圖至符合 id 的標記位置。
讀取地圖後開啟 infoWindow 或 點選按鈕控制 infoWindow
適用 v2.7.0 或更新版本
點選 marker 自動關閉其他已開啟的 infoWindow
v2.8.4 已新增 infoWindowAutoClose (bool) 參數可設置是否自動關閉。
2.8.3 – 2.7.0 版本請參考:
利用縮放取得地圖範圍內的標記
綁定地圖的 zoom_changed 事件，並利用 instance 取得目前範圍，再用迴圈逐一比對標記是否在範圍內。
延伸閱讀