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

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

版本歷史

安裝


<!-- 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>

參數說明

下載位置

範例一(預設地圖)

javascript
$(function(){
  $('#map').tinymap();
});
HTML
<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:'台北小巨蛋'}
    ]
  });
});
錯誤: a.replace is not a function 來源檔案: http://maps.gstatic.com/intl/en_ALL/mapfiles/225b/maps2.api/main.js 列: 1424