google Map을 사용한 장소 검색 및 마커 표시하는 기능을 추가하려고 한다.
<input ref="mapSearchBox" type="text" placeholder="Search for address" v-model="searchText" />
<button type="button" @click="setList"> search </button>
처음엔 google.maps.places.AutocompleteService를 사용해서 했다가 list에 나온 장소들이 지도에 마커되는 걸 보고
google.maps.places.SearchBox를 사용해서 첫번째 장소만 지도에 마커 되도록 했다.
하지만 이것도 내가 구현해야 되는 기능은 아니었다.
그래서 인터넷 검색을 통해서 findPlaceFromQuery 를 사용하기로 했다.
PlacesService class 에서 findPlaceFromQuery
Places Service | Maps JavaScript API | Google Developers
textSearch textSearch(request, callback) Return Value: None Retrieves a list of places based on a query string (for example, "pizza in New York", or "shoe stores near Ottawa"). Location parameters are optional; when the location is specified, results are
developers.google.com
이제 입력하는 순간마다 autocomplete api를 날리지 않고, 내가 원할때마다 검색이 가능했다.
여기서 만난 문제점은 결과값이 1개만 날아온다 ㅜ
난 여러개 값이 뜨는 list가 필요했는데
다시 또 인터넷 검색을 통해 알아낸 사실은 여러개의 결과 값을 받고 싶으면 nearbySearch 나 textSearch 를 써야 했다.
textSearch 를 사용했다.
검색한 주소와 연관된 장소들이 리스트로 왔다.
그 외에도 작업하면서 geometry의 하위에 location과 viewport가 있는데
콘솔에서 찍어 보면 locationdml lat(),lng()는 function이라고만 되어 있고 값은 보이지 않았다.
viewport Ga:hi lo zb: hi lo 항목으로 위도 경도 값이 표시되길래 이걸 써야 되나 고민을 했었다.
하지만 function을 그대로 받아 쓰면 되었다.
const marker ={
lat: item.geometry.location.lat(),
lng: item.geometry.location.lng(),
}- findPlaceFromQuery 1개의 결과만 돌려준다.
- textSearch를 쓸 경우에 여러개의 결과를 돌려준다.
- searchBox를 쓸 경우엔 autocomplete와 같은 검색어가 변경될때마다 하단에 자동 완성된 리스트가 뜬다.
- 차이점은 searchBox는 0번째에 지도 마커, autocomplete는 리스트에 뜬 모두에게 마커
참고 ) 구글 공식 문서
https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=ko#PlacesService.nearbySearch