구글 지도 API 장소 검색 서비스
•
MongoDB에 경도, 위도를 저장하면 효율적으로 처리할 수 있다. (경도, 위도 순서이다!)
•
다른 곳에서는 위도, 경도 순서로 많이 사용하지만, MongoDB에서는 경도, 위도 순서로 저장하는 것이 좋다!
@google/maps API 사용하기
•
API Key를 사용하여 Map를 이용할 수 있도록 아래 명령어를 통해서 Package를 설치한다.
npm install @google/maps
•
해당 Package 안에는 createClient() Method가 있는데, 여기에 API Key 값을 인자로 주어 Client로써 API를 이용할 수 있도록 한다. (Code 참고하자.)
•
Query Auto Complete의 경우, API Key를 넣어서 생성한 Client의 placesQueryAutoComplete()라는 Method를 활용한다. (자세한 것은 npm의 @google/maps를 찾아본다.)
•
Client의 places() 라는 장소를 찾는 Method를 Promisify를 해준 이유는, 해당 Method는 Promise를 지원하지 않기 때문이다. (Callback Function을 이용해도 되지만 지저분 하므로...)
구글 지도와 연동하기
•
장소에 대한 검색으로 Latitude, Longitude를 받아 왔다면, Google Map을 받아온 뒤 해당 좌표를 나타낼 수 있도록 해야 한다.
•
Frontend에서 Google Map을 연동 했을 때, getCurrentPosition() Method를 사용하게 되는데 이용 권한이 없을 때 Method, 이용 권한이 있을 때 Method를 따로 구현해야 한다. (세 번째 인자로 Option 값들을 준다.)
•
Google Map Client에는 장소의 검색 결과를 갖고 오는 places라는 Callback Function도 있지만, 주변 탐색을 수행하는 placesNearby라는 Callback Function도 있다. (places와 placesNearby의 Option 값 이름이 아주 살짝 다르니 참고하자.)
•
placesNearby는 Type 까지 걸러서 검색이 가능하다.
즐겨찾기 구현하기
•
지도 위의 Marker를 클릭 했을 때, 즐겨찾기 여부를 묻는 등 팝업이 뜨는 것을 Info Window라고 한다.
•
Info Window는 사용자가 직접 구현을 해야 하지만, 구현한 부분을 Google Map과 연동하여 편하게 사용할 수 있다. (팝업 되었을 때 보이는 문구 혹은 버튼 및 버튼 기능을 구현 했다고 하더라도, 위의 것들은 Marker를 Click 했을 때 보여야 하는 것들이므로 Google Map과의 연동이 필요한 것이다. Code 참고하자.)