Google Maps API - 設計地圖標記圖案

通常在自定義的 Google 地圖裡,常常會使用不同的地圖標記圖案,來表示不同地點的屬性,這篇將會介紹幾種常見的更換地圖標記圖案的 Google Maps API,讓地圖增添一些不同的趣味。

Icon

Icon 是 Google 最常用的地圖標記,用法也是最簡單的,只要有張要作為 icon 的圖片網址,就可以把地圖標記換成這個圖案,如果沒有適當的圖片來源或網頁空間,可以參考「這個網站」有收集了不少 Google 地圖標記圖案,就可以直接使用。不過比較可惜,這些地圖標記都是比較舊的版本,如果要比較漂亮新穎的,可以繼續往下看 Symbol 和 SVG 的用法。

此外除了使用url來標記圖片的網址,也可以使用scaledSize來改變圖片的大小

範例:更換地圖標記圖案 - Icon

var map;
position = {
  lat: 25.0336962,
  lng: 121.5643673
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });

  var marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: {
      url: 'http://maps.google.com/mapfiles/ms/micons/cabs.png',
      scaledSize: new google.maps.Size(50, 150)
    }
  });
}

Symbol

Symbol 有別於 Icon,在地圖裡它是以向量的方式存在,Symbol 的用法和 SVG 頗類似,只是在 Google 地圖裡對於 Symbol 只有預設五種 path ( 參考 符號 ),所以要使用 Symbol 的話就必須按照制式的寫法,不然就要繼續往下看 SVG 的用法。

Symbol 有以下幾種屬性:

舉例來說先在地圖上建立一個標記的位置,接著使用marker.setIcon指定標記的 symbol,再來透過setTimeout做兩個不同 symbol 的切換,感覺就跟一般常見的標記圖案不太相同了。

範例:更換地圖標記圖案 - Symbol

var map;
position = {
  lat: 25.0336962,
  lng: 121.5643673
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });

  var marker = new google.maps.Marker({
    position: position,
    map: map
  });

  symbol1() ;
  function symbol1(){
    marker.setIcon({
      path: google.maps.SymbolPath.CIRCLE,
      strokeColor: '#c00',
      strokeWeight: 150,
      fillColor: '#00c00c',
      fillOpacity: .5,
      scale: 12,
      anchor: new google.maps.Point(2, 5)
    });
    setTimeout(symbol2, 500);
  }

  function symbol2(){
    marker.setIcon({
      path: google.maps.SymbolPath.CIRCLE,
      strokeColor: '#c00',
      strokeWeight: 10,
      fillColor: '#00c00c',
      fillOpacity: .5,
      scale: 50
    });
    setTimeout(symbol1, 500);
  }

}

SVG

因為通常地圖標記不會太複雜,所以使用 SVG 形狀當作是標記圖案是相當好的做法,因為除了放大縮小不會有解析度問題之外,又保有可以程式修改的彈性,使用 SVG 有兩種做法,如果是用 icon 的方式,就一樣在標記的 icon 屬性,填入 SVG 的網址 ( 其實還有查到可以直接寫在程式碼內的方法,不過技術上比較複雜,再找篇幅好好記錄 ),如果是用 symbol 則會有些限制,因為 symbol 只支援單一 path ,所以如果是比較複雜的形狀,也就必須要用單一 path 包起來才能用 symbol。

下面這段程式,就是先用 Illustrator 繪製了 SVG 的圖案,接著把圖案的 path 提供給標記的 path 使用,最後就會在地圖上呈現客製化的標記囉!

範例:更換地圖標記圖案 - SVG

var map;
position = {
  lat: 25.0336962,
  lng: 121.5643673
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });

  var icon='M29-63.8C24.2-75.1,13-83,0-83c-17.4,0-31.5,14.1-31.5,31.5c0,7.5,4.2,16.4,9.4,24.6C-12.8-12.5,0,0,0,0s31.5-30.8,31.5-51.5C31.5-55.9,30.6-60,29-63.8z M0-30.8c-11.4,0-20.7-9.3-20.7-20.7S-11.4-72.2,0-72.2s20.7,9.3,20.7,20.7S11.4-30.8,0-30.8z M0-59.3c-5.8,0-10.5,8.2-10.5,14c0,5.8,4.7,7.1,10.5,7.1c5.8,0,10.5-1.3,10.5-7.1C10.5-51.1,5.8-59.3,0-59.3zM0.9-43.7v1c0,0.3-0.3,0.6-0.6,0.6h-0.5c-0.3,0-0.6-0.3-0.6-0.6v-0.9c-0.7-0.1-1.6-0.4-2.3-0.8c-0.3-0.2-0.3-0.5-0.2-0.8l0.5-0.8c0.2-0.3,0.5-0.3,0.8-0.2c0.6,0.4,1.1,0.5,1.7,0.5c0.8,0,1.1-0.3,1.1-0.9c0-1.2-4-1.4-4-4.1c0-1.6,0.9-2.6,2.4-2.9v-1c0-0.3,0.3-0.6,0.6-0.6h0.6c0.3,0,0.6,0.3,0.6,0.6v1c0.8,0.1,1.4,0.4,1.9,0.9C3-52.6,3.1-52.2,2.9-52l-0.6,0.7c-0.2,0.2-0.5,0.3-0.8,0.1c-0.4-0.3-0.8-0.4-1.2-0.4c-0.7,0-1,0.2-1,0.8c0,1.2,4,1.2,4,4C3.3-45.3,2.5-44.1,0.9-43.7z M-2.2-59.8c0.7-0.2,1.4-0.3,2.2-0.3c0.7,0,1.4,0.1,2.1,0.3l1.5-4.9c0.2-0.6-0.4-1-0.9-0.8L0-64l-2.7-1.4c-0.5-0.3-1.1,0.2-0.9,0.8L-2.2-59.8z';

  var marker = new google.maps.Marker({
    position: position,
    map: map
  });

  marker.setIcon({
    path: icon,
    strokeWeight: 0,
    fillColor: '#09c',
    fillOpacity: 1,
    scale: 2
  });

}

有興趣瞧瞧其他新文章嗎?