jQuery tinyMap: 輕鬆自訂 Google Map 的 jQuery 擴充套件

短小精幹！只要 3KB 就能無視 Google Map API 摧殘、輕鬆自訂 Google Map 的 jQuery 擴充套件。

版本歷史

安裝

<!-- Include Google Map API (Google Map API v3 已不需使用 API Key) -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.tinyMap-2.0.1.js"></script>

參數說明

下載位置

範例一

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

範例二：指定座標、縮放等級 16

$(function(){
  $('#map').tinyMap({
      center: {x: '25.03369510279853', y: '121.56480431556702'},
      zoom: 16
  });
});

範例三：指定地址、混合地圖、縮放等級 13、兩處地圖標記、自訂圖示

$(function(){
  $('#map').tinyMap({
      center: '台北縣三重市',
      zoom: 13,
      mapTypeId: 'hybrid',
      marker: [
          {addr: '台北市信義區市府路1號', text: '台北市政府'},
          {addr: '台北市士林區至善路二段221號', text: '國立故宮博物院', icon: '4.png'}
      ]
  });
});

範例四：路徑規劃

$(function(){
  $('#map').tinyMap({
      direction: [
          {from: '台北市松壽路1號', to: '台北車站', travel: 'driving'},
          {from: '台北市承德路二段235號', to: '台北市中華路一段', travel: 'walking'}
      ]
  });
});

意見