建立屬於你的 Google Map 地圖標記(一) - Google Map API 與 React

手邊的專案暫時告一段落，是時候來整理一下專案中所需要的功能和處理方式了！
專案是一個可以讓商家在地圖上建立位置標記，然後透過標記連結可以看到詳細資料的社群平台，因此這一個系列要來紀錄如何實作這個功能：React 框架與 google-maps-apis 的串接，以及當中面臨需求時的處理方式。

簡單描述地圖標記區塊的功能：

在專案中的地圖標記區塊，我們會有一個可以輸入地址的 input 欄位，讓使用者輸入商家地址，接著可以點擊搜尋按鈕直接發送搜尋請求，或是直接透過 Google Maps API 的自動搜尋功能 Place Autocomplete 取得相近結果。帶有座標數值和 placeId 的結果，則將渲染標記於地圖上，並且可以透過拖曳或點擊改變標記位置，並重新反向透過新的座標資料取得更新位置後的 placeId。

因此這系列文章將紀錄開發中如何透過使用 google-map-react 這個套件，在 Google Maps API 串接的同時渲染 React 元件。實作過程中，也大量運用 React 中的 useRef 和 useState hooks 來操作資料與狀態判斷。接下來將會按照三大功能分類來介紹：

1. 創立座標。
2. 編輯座標。
3. 呈現座標標記。