[GoogleMap] 위치 검색 자동완성

우리동네 교통사고 다발지역 서비스를 위해서는 일단 위치 검색을 할 수 있어야 한다.

제일 먼저 생각나는 것이

서울이라고 가정하면 구단위를 선택하고 그 다음에 동단위를 선택해야 하는데

그렇게 검색한 결과의 위도/경도 정보를 알 수 있어야 구글맵에 마커를 보여줄텐데 그 값을 어떻게 알 수 있을까..

 

또 각 구단위, 동단위를 선택하려면 select box로 구현을 해서 비동기로 값이 바뀔 때마다 이벤트 핸들링을 해줘야 하나...

막 이런 생각이 먼저 들었는데,

 

다행히도 구글맵에는 위치 자동완성 해주는 컴포넌트를 제공해 주고 있다.

text input에 내가 입력하고 싶은 위치 정보를 넣으면 아래 이미지처럼 자동완성된 가능목록 중에서 선택할 수 있다.

이 기능을 위해 구글맵의 기본 라이브러리를 사용하면 되나 그냥 사용하면 안 되고 아래와 같이 library 설정을 해 주어야 한다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

이렇게 해야 스트립트 요청에 파라미로 전달되는 callback 함수에서 아래와 같이 google.maps.places.Autocomplete 객체를 생성할 수 있다.

function initAutocomplete() {
	autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
		types: ['geocode']
	});
	autocomplete.addListener('place_changed', fillInAddress);
}

만약 library 설정을 안 했다면 스크립트 에러를 보게 될 것이다.

map.js:89 Uncaught (in promise) TypeError: Cannot read property 'Autocomplete' of undefined
    at initAutocomplete (map.js:89)
    at js?key=AIzaSyDhAJbqfPNwD3xaEUeyktvFWRtytTJhCpY&libraries=&callback=initAutocomplete:146
    at js?key=AIzaSyDhAJbqfPNwD3xaEUeyktvFWRtytTJhCpY&libraries=&callback=initAutocomplete:146

장소가 입력이 되면 'place_changed' 이벤트가 발생하게 되고, 등록해 둔 이벤트 핸들러가 동작하게 되는데,

그 안에서 AutoComplete객체에서 가져온 Place 객체를 통해 위도/경도 값을 가져올 수 있다

function fillInAddress() {
	var place = autocomplete.getPlace();
    alert(place.geometry.location.lat());
    alert(place.geometry.location.lng());
    
    map.setCenter(place.geometry.location);
	searchMarker = new google.maps.Marker({
		map: map,
		position: place.geometry.location
	});
}