# Google API應用 (暫無實例)

## 地圖標記

地圖標記是地圖裡最常見的元素，透過地圖標記，可以標明指定的地點和資訊。

Step1-先取得欲標記地點之經緯度。

* 取得特定地點的經緯度很簡單，只要打開 Google Map，搜尋地點之後，在網址列就可以看到經緯度，第一個數字是緯度 ( latitude )，第二個數字是經度 ( Longitude )。


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

<br>

Step2 - 撰寫function

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
  });
}

EX:[Demo](https://www.oxxostudio.tw/demo/201801/google-maps-3-marker-demo-01.html)


<br>

## 地圖標記動畫 ( Marker Animations )

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

> 載入時掉落

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

[Demo2](https://www.oxxostudio.tw/demo/201801/google-maps-3-marker-demo-03.html)

> 載入時不斷彈跳

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

[Demo3](https://www.oxxostudio.tw/demo/201801/google-maps-3-marker-demo-02.html)