tinyMap - 自訂個人 Google Map 的 jQuery 擴充套件

這個套件主要是簡化 Google Map API 的使用，只要簡單的設置即可在網頁上呈現出 Google 地圖。

版本歷史

1.0.1
- 修正部份程式錯誤以符合 JSLint
- 改以 Google AJAX API 呼叫 Map
1.0
- Release

安裝


<!-- Include Google Map API -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_API_KEY"></script>
<script type="text/javascript" src="jquery.tinymap-1.0.js"></script>

<!-- 如果遇到 javascript 的 a.replace is not a function 錯誤，請把 Google Map API 的版本提高到 2.208： -->

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.208&sensor=false&key=YOUR_API_KEY"></script>

參數說明

width: 地圖寬度 (Number) /* 預設：640px */
height: 地圖高度 (Number) /* 預設：480px */
latlng: 地圖置中的座標或地址，若為座標請使用 [x, y]，地址則直接輸入。
control: 顯示地圖類型選單 (Boolean) /* 預設：true */
zoom: 顯示地圖縮放選單 (Boolean) /* 預設：true */
zoomLevel: 預設地圖縮放等級 (Number) /* 預設：13 */
mapType: 預設地圖類型 (String) /* 選項：default, hybrid（混合）, satellite（衛星）預設：default */
marker: 標記群組 (JSON)：
[{addr:'標記地址或座標', text:'標記說明', icon:[圖示寬度, 圖示高度, 圖示位址]}]

下載位置

Origin: jquery.tinymap-1.0.js (4.17 KB)
Packed: jquery.tinymap-1.0.min.js (2.03 KB)

範例一（預設地圖）

$(function(){
  $('#map').tinymap();
});

<div id="map"></div>

範例二（以混合地圖標記出台北市政府位置）

$(function(){
  $('#map').tinymap({
    width: 640,
    height: 360,
    zoomLevel: 14,
    latlng: '台北市信義區市府路1號',
    maytype: 'hybrid',
    marker: [
      {addr:'台北市信義區市府路1號', text:'台北市政府'}
    ]
  });
});

範例三（使用座標及自訂圖示標出台北 101 大樓）

$(function(){
  $('#map').tinymap({
    width: 640,
    height: 360,
    latlng: [25.03369510279853, 121.56480431556702],
    marker: [
      {addr:[25.03369510279853, 121.56480431556702], text:'台北 101', icon:[24,24,'2.png']}
    ]
  });
});

範例四（使用地址建立標記群組）

$(function(){
  $('#map').tinymap({
    width: 640,
    height: 360,
    latlng: '台北市',
    zoomLevel: 12,
    marker: [
      {addr:'台北市中正區北平西路3號', text:'台北車站'},
      {addr:'台北市士林區至善路二段221號', text:'國立故宮博物院'},
      {addr:'臺北市文山區新光路二段30號', text:'台北市立木柵動物園'},
      {addr:'台北市松山區南京東路四段2號', text:'台北小巨蛋'}
    ]
  });
});