上篇文章中我們成功顯示出地圖，但總不可能要使用者自己找座標，這樣也太難用了，所以我們來做地址轉座標的功能，讓使用者輸入地址後就能顯示出地圖。

申請 API TOKEN

關於 Token 的申請，請參考 https://developers.google.com/maps/documentation/javascript/get-api-key?hl=zh-tw

發送 API 取得座標

地址轉換座標的功能，我們會使用 Google MAP API 來完成，API_TOKEN 就存在 .env 裡面：

import axios from 'axios'
import type { GeocoderResponse } from '../types'

const API_TOKEN = process.env.PUBLIC_GOOGLE_MAP_TOKEN || ''

const request = axios.create({
  baseURL: `https://maps.googleapis.com/maps/api/geocode/json`,
  params: {
    key: API_TOKEN,
  },
})

export const fetchAddressCoordinates = (address: string) => request.get<GeocoderResponse>('', {
    params: {
      address,
    },
  });

呼叫這個函式後將地址帶入後，會拿到這樣的 response：

export type GeocoderResponse = {
  results: {
    formatted_address: string
    geometry: {
      location: {
        lat: Number
        lng: Number
      }
    }
  }[]
  status: 'ZERO_RESULTS' | 'OK'
}

這邊我沒將完整的型別定義出來，只放上我需要用的。

當中的 lat 以及 lng 就是我們要用的座標！

寫回 kintone

拿到座標後就好辦了，我們接著使用 kintone.app.record.get() 以及 kintone.app.record.set(record) 將座標設定回 record 中即可。

以上是非常粗糙的開發教學，當中還有很多細節要處理，例如 request 錯誤的時候如何處理，找不到 kintone 欄位的時候怎麼辦，要不要加個 loading 之類的，這部分就留給大家自行實作了！