Google Maps API - 地理編碼服務 ( 地址定位 )

一開始使用地圖，總會用經緯度來標記位置，但經緯度往往不夠直覺，而且要知道某個地點的經緯度也是個問題，所以這時就必須使用 Google Maps API 的地理編碼服務來實現「地址定位」，只要輸入對應的地址，就可以在地圖上標記。

啟用 Google Maps Geocoding API

要使用地理編碼服務，首先要前往 Google API Console，進入之後，建立新的專案或是選擇現有的專案 ( 不知道怎麼做可以參考 Google Maps (1) - 網頁載入地圖 ( 起手式 ) )，接著點選上方「啟用 API 和服務」。

在搜尋欄位搜尋「Google Maps Geocoding API」，找到後點選並且啟用。

啟用後，在資訊主頁最下方的 API 就會看到 Google Maps Geocoding API 的訊息， 依據 Google API 標準方案，免費版本一天可以呼叫這個 API 2500 次，每秒可以 50 次，對於自己要練習或是簡單的程式，應該都相當夠用。

使用地址定位

要使用地址定位，第一步要先透過google.maps.Geocoder物件存取程式碼內的 Google Maps API 地理編碼服務，而Geocoder.geocode()方法會初始化對地理編碼服務的要求。

geocoder = new google.maps.Geocoder();

接著使用geocoder.geocode({ 'address': address}, callback(results, status))對地址進行地理編碼，在擷取到地理編碼時會依序傳遞兩個參數 results 和 status，results 包含以下的結果物件，而最常使用的應該就是geometry.location，因為這回傳的就是地圖常用的經緯度 LatLng。

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

然而 status 回傳的是成功與否的狀態，如果回傳 OK 表示順利剖析地址並且已至少傳回一個地理編碼，以下面的範例來說，就可以透過地址編碼，將地圖標記放在「總統府」的地址上。

範例：使用地址定位

var map, geocoder;

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

  var address = '總統府';

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      console.log(status);
    }
  });
}

簡單的查詢地址功能

如果已經會使用地址定位，就可以來透過 HTML 的 input 和 button 做點變化，下面的例子在網頁中放入一個輸入欄位，輸入地址之後按下定位，就可以將自己指定的地址在地圖上置中，並放上標記。

範例：使用地址定位

submitBtn.on('click', function() {
  console.log(addressInput.val());
  geocoder.geocode({
    'address': addressInput.val()
  }, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      console.log(status);
    }
  });
});

參考資料

地理編碼服務是參考 Google 官方文件 地理編碼服務，如果想要了解 results 回傳的參數細節用法就可以前往閱讀，文件的後半段也提到一些地址反查的功能，不過目前還沒想到該怎麼用，就等有用到的時候再寫篇文章記錄一下好了。