Google Maps API - 地圖標記 ( Marker )

地圖標記是地圖裡最常見的元素,透過地圖標記,可以標明指定的地點和資訊,也能透過對應的 Google Maps API,設計相對應的標記來展示地點資訊,這篇將會由基礎的地圖標記著手,逐步實做一些有趣的範例。

放置地圖標記

放置地圖標記的第一步要先取得「經緯度」,取得特定地點的經緯度很簡單,只要打開 Google Map,搜尋地點之後,在網址列就可以看到經緯度,第一個數字是緯度 ( latitude ),第二個數字是經度 ( Longitude )。

有了經緯度之後, 透過new google.maps.Marker就可以產生一個 maker 物件在地圖上,以下面的例子來說,就可以放置一個標記在台北 101 大樓。

範例:放置地圖標記

var map;

function initMap() {
  var position = {
    lat: 25.0339031,
    lng: 121.5623212
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    center: position
  });
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
}

地圖標記動畫 ( Marker Animations )

地圖標記的動畫效果,可以設定當點擊標記或標記載入時呈現相對應動畫,用法是在 maker 的 option 增加animation的屬性,內容是掉落 ( DROP ) 與彈跳 ( BOUNCE ) 兩種選項。

範例:marker 載入時掉落

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

範例:marker 不斷彈跳

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

地圖標記標籤 ( Marker Labels )

如果地圖上有很多個標記,可能也就需要在每個標記上標註標籤,標註的方法就是修改label的屬性,不過因為標記名稱需考量標記的「大小」,所以基本上就單一個中文字、英文字母或數字比較恰當 ( 也可以透過地圖標記圖案來修改 icon 大小,才不會造成文字「爆表」的情形 ),如果需要修改 label 的顏色,可以透過{text:顯示文字, color:顏色}來設定。

範例:地圖標記標籤

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

地圖標記圖案 ( Marker Icons )

如果要修改預設的地圖標記,就需要編輯icon的屬性,只要指定對應的圖片網址,就會看到這張圖片,變成在地圖裡的地圖標記了,但使用上要注意圖片的大小,呈現出來才會美觀也不會遮住地圖資訊,舉例來說,可以把台北 101 的圖案換成皮卡丘的圖片。( 地圖標記圖案可以玩的東西還很多,之後會找時間寫一篇來介紹 )

範例:地圖標記圖案

var marker = new google.maps.Marker({
  position: position,
  map: map,
  icon:'https://www.oxxostudio.tw/img/articles/201801/google-maps-3-marker-icon.png'
});

可拖曳地圖標記 ( draggable )

通常地圖上的標記都是不能用滑鼠移動的,但其實可以透過draggable的屬性,讓我們可以移動地圖上的標記。

範例:地圖標記圖案

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

地圖標記階層 ( zIndex )

如果地圖上有多個標記,可能會發生一個疊一個狀況,這時候就可以透過zIndex的屬性,就像 CSS 裡的z-index一樣,數字越大的在越上層,就能控制不同地圖標記的階層了。( zIndex 預設 1 )

範例:地圖標記階層

var marker1 = new google.maps.Marker({
  position: position1,
  map: map,
  icon:'https://www.oxxostudio.tw/img/articles/201801/google-maps-3-marker-icon.png',
  zIndex:1
});

其他的地圖標記屬性

地圖標記的屬性還有很多,這篇只是先把我覺得滿常用的屬性列出,如果有興趣可以繼續參考:MarkerOptions object specification 囉!

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