jQuery tinyMap

一種丟棄 Google Maps API 手冊的概念!輕鬆在網頁建立 Google Map 的 jQuery Plugin。

Google+

下載 Download

Download on GitHub

目前版本: 3.4.13

安裝 Install

<‐‐ 不需要引入 Google Maps API ‐‐>
<script src="jquery.min.js"></script>
<script src="jquery.tinyMap‐3.4.13.min.js"></script>

使用 Usage

// Javascript
$('.map').tinyMap({
    'center': '台北市信義區台北101',
    'zoom'  : 14
    …
});
<‐‐ HTML Markup ‐‐>
<div class="map"></div>
// Set the width, height of container
// 指定地圖容器的寬高
.map {
    width: 640px;
    height: 480px;
}

組態 Configure

// 執行 tinyMap 前可使用 $.tinyMapConfigure 進行 API 的設定。
$.fn.tinyMapConfigure({
    // Google Maps API URL
    'api': '//maps.googleapis.com/maps/api/js',
    // Google Maps API Version
    'v': '3.21',
    // Google Maps API Key,預設 null
    'key': 'Google Maps API KEY'
    // 使用的地圖語言
    'language': 'zh‐TW'
    // 載入的函式庫名稱,預設 null
    'libraries': 'adsense,drawing,geometry...',
    // 使用個人化的地圖,預設 false
    'signed_in': true|false,
    // MarkerClustererPlus.js 路徑
    // 預設 'https://cdn.essoduke.org/js/tinyMap/markerclusterer.js'
    // 建議下載至自有主機,避免讀取延遲造成無法使用。
    'clusterer': 'path/to/markerclusterer.js'
    // MarkerWithLabel.js 路徑
    // 預設 'https://cdn.essoduke.org/js/tinyMap/markerwithlabel.js'
    // 建議下載至自有主機,避免讀取延遲造成無法使用。
    'withLabel': '/path/to/markerwithlabel.js'
});

留言 Comments

comments powered by Disqus