jquery

구글 맵 api를 이용한 중점찾기 #2 지오코딩 geocoder

RYUHA/ editor

  • 2 comments
  • 1,520 views
  • 2017년 4월 25일

구글 맵 api의 지오코딩 서비스를 통해 주소를 위,경도로 위,경도를 주소로 변환해봅니다.

#지오코딩

 

지난 번에 구현한 지도 상에 마커를 찍으면 그 위치의 주소를 받아오는데 사용한 지오코딩에 대해 간단하게 먼저 보고 가겠습니다.

기본적으로 위도, 경도 바탕으로 데이터를 잡아오기 때문에 우리는 geocoder라는 서비스를 이용해서 위도, 경도를 실 주소로 변환하게 됩니다.

 

geocoder는 실 주소를 위도, 경도로 변환하는 프로세스이지만 역 지오코딩을 통해 위/경도를 실 주소로 변환하게 됩니다.

지오코딩은 비동기식 액세스로 콜백을 통해 결과를 처리합니다.

먼저 google.maps.Geocoder를 선언해주어야 합니다.

기존의 initMap 함수 내에 var geocoder = new google.maps.Geocoder로 선언해주거나, 전역 변수로 var geocoder를 선언하고, initMap 내부에 new google.maps.Geocoder를 선언합니다.

 

위에서 말한 것처럼 지오코딩은 콜백을 이용하여 처리하므로, 콜백함수가 필요합니다. 이 콜백은 results와 status 두개의 매개변수를 가집니다.

그래서 이렇게 사용하게 되지요.

geocoder.geocode({'location': location}, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    …
                } else {
                    …
                }
            });

 

그러면, 주소를 입력하면 마커를 찍는 것을 구현해봅시다.

 

# 주소입력해서 마커 추가

 

먼저 프로세스를 보면, html의 주소 입력 칸에 주소를 넣고 버튼을 누르면 geocodeAddress라는 함수로 넘어가게 합니다. 그리고 함수 내부에서 마커를 추가하게 될 것입니다.

먼저 initMap 함수에 버튼 클릭 이벤트를 생성합니다.

document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
 });

그러면 geocodeAddress에서 geocoder와 찍힐 map 을 매개변수로 가지고 갑니다.
 

function geocodeAddress(geocoder, resultsMap) {
            var address1 = $('#address1').val();
            var address2 = $('#address2').val();
            var address = [address1, address2]; // 주소가 두개이므로 배열로 받아 for문을 돌려준다 

            for(var i=0; i<2; i++) {
                geocoder.geocode({'address': address[i]}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        resultsMap.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: resultsMap,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        }

함수 내부에선 입력된 주소값을 받아와 배열에 저장합니다.
그리고 for문으로 배열을 돌려 마커를 하나씩 추가하게 되지요.
간단한 로직을 통해 구현할 수 있습니다.

그럼 이를 바탕으로 중점도 찍어볼까요?
지난 번 다음 map을 통해서 중점을 찍을 때처럼 두 지점의 위도, 경도값을 더해 2로 나누어 구할 수 있지요.

먼저 사용자가 입력한 주소의 위도, 경도를 변환한 후 2로 나누어 나온 결과 위치에 마커를 추가해줄 것입니다.

중점을 위해 setCenter라는 함수를 새로 만들어 주었습니다.

function setCenter(lat, lng, resultsMap) {
            cnt++; // 2개의 중점이므로 갯수 세어줌
            centerLat += lat;
            centerLng += lng;

            if(cnt == 2) { //2개가 되면, 중점 마커를 구해 찍어줌
                var centerMarker = new google.maps.Marker({
                    map: resultsMap,
                    position: {lat: centerLat / 2, lng: centerLng / 2}
                });
            }
        }

함수 바깥에 var centerLat, centerLng = 0;으로 초기화해주었습니다. cnt 역시 0으로 초기화 해준 상태입니다.

이 함수는 위도, 경도 그리고 표시될 지도를 매개 변수로 받아옵니다. 그래서 받아온 위도, 경도 값을 centerLat, centerLng에 계속 더해주고 cnt가 2가 되면 중점을 계산하여 찍어주는 것입니다. 이 함수는 geocodeAddress 함수 안으로 들어가게 됩니다. 아래 코드처럼 말이죠.

function geocodeAddress(geocoder, resultsMap) {
        ..... 
            for(var i=0; i<2; i++) {
                geocoder.geocode({'address': address[i]}, function (results, status) {
                   ......
          setCenter(results[0].geometry.location.lat(),results[0].geometry.location.lng(),resultsMap);
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        }

이러면 다음 이미지에서 보듯이 중점이 찍히게 됩니다.

여기까지 주소를 입력하여 그 위치에 마커를 추가하고 그 중점 마커까지 표시하는 것을 진행했습니다.

다음번엔 주소 입력과, 직접 지도에 마커를 추가하는 방식을 합치는 코드를 정리하겠습니다.

질문은 댓글로 남겨주세요!

RYUHA

만들어 보면서 하나씩 글 씁니당:)

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
RYUHA진선 Recent comment authors
newest oldest most voted
진선
Member

인풋태그 코딩도 올려주시면 안될까요