jquery

구글 map api 를 이용한 중점찾기 #1

RYUHA/ editor

  • 0 comments
  • 2,565 views
  • 2017년 4월 5일

# 시작하기   지난 번 글인, 다음 map api를 이용하여 위치기반 중간 지점 찾기 프로그램 을 좀더 구체적이고 꼼꼼하게 리뉴얼하면서 이번엔 google map api를 이용하기로 했습니다. 지난번 다음 api를 사용했던 이유는 좀더 라이브러리가 정리가 잘 되어있다는 장점이었는데 사용하다 보니 부족한 부분도 있고 구글 쪽이 경로 찾는 것이나, 앞으로 api를 활용한 다른 프로젝트를 진행할 때 공부 면에서도 좋을 […]

# 시작하기

 

지난 번 글인, 다음 map api를 이용하여 위치기반 중간 지점 찾기 프로그램 을 좀더 구체적이고 꼼꼼하게 리뉴얼하면서 이번엔 google map api를 이용하기로 했습니다.

지난번 다음 api를 사용했던 이유는 좀더 라이브러리가 정리가 잘 되어있다는 장점이었는데 사용하다 보니 부족한 부분도 있고 구글 쪽이 경로 찾는 것이나, 앞으로 api를 활용한 다른 프로젝트를 진행할 때 공부 면에서도 좋을 것 같아 새로 시작하기로 했습니다.

 
지난 번과 마찬가지로 기본적인 기능은,

  • 두 사람 이상의 위치의 중점을 찍어줌 (직접 지정 or 위치기반) – 우선 두사람 기준
  • 카테고리로 문화시설 검색 가능(반경 1km 이내에, 카테고리 중첩 선택 가능)
  • 경로 탐색 – 지도에 오버레이 가능하면 보여주고 안되면 링크 걸어주기

이렇게 세가지 입니다.

 

 

# google map api

 

이제 구글 맵 api 연동하는 법을 알아봅니다.

먼저 구글 계정으로 로그인합니다.

https://developers.google.com/maps/documentation/javascript/?hl=ko 의 주소로 접속하여 위의 메뉴들을 봅니다. (링크 클릭 혹은 구글에서 google map 검색하여 google Maps API 클릭)

‘키 가져오기’를 클릭합니다.

계속을 선택하여 다음 페이지로 넘어갑니다.

프로젝트 선택박스가 나오면 , 기존의 프로젝트에 이어서 할 경우 목록에서 선택하고 새로 만드는 경우는 생성을 선택해줍니다.

 
그럼 저절로 생성이 되면서 사용자 인증 정보 페이지로 넘어가게 됩니다.
이름에 마땅한 이름을 입력해주고, 키 제한사항을 설정해줍니다.
웹에서 사용할 것이므로 앱은 아니고 도메인이 있는 경우 그 주소를 적으면 되고, 테스트 용이기 때문에 ip주소를 선택해 입력해줍니다.
그리고 저장하면 api 키가 생성되어있습니다.

그럼 이를 바탕으로 우리가 만든 웹페이지에 지도를 띄워봅시다.
먼저, html로 지도가 들어갈 부분을 지정해줍니다.

<div id="map" style="width: 700px; height: 700px;">
            <div id="map_view"></div>
</div>

간단하게 이렇게 넣어주고, 구글 api를 사용함을 알려줍니다.

<script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap" async defer></script>

발급받은 api key를 your api key 자리에 넣어줍니다.

그리고 map api 라이브러리를 참조하여, function initMap()을 선언합니다.

function initMap() {
            var cnt = 1; //마커 카운트 해서 우선 2개만 제한
            var initLatLng = {lat: 37.366184, lng: 127.107905};
            var geocoder = new google.maps.Geocoder;
            var map = new google.maps.Map(document.getElementById('map'), {
                center: initLatLng,
                zoom: 16
            });

            // 기본 마커 - 지도 생기면 중심에 찍혀있는 것
            var basicMarker = new google.maps.Marker({
                position: initLatLng,
                map: map, //map을 선택 안해주면 마커는 생성되지만 표시는 안됨 이 경우는 setmap으로 나중에 호출할 수 있음
                draggable: true
            });
        }

이렇게 기본 마커를 설정해주면,

웹페이지를 호출했을 때 이렇게 마커가 찍혀서 나오게 됩니다.

 
 

# Add Marker

 

그렇다면 지도를 클릭했을 때 그 위치에 마커가 생기게도 해볼까요?

간단합니다. initMap 함수 내에 지도 클릭 이벤트를 포함시켜주고 그 안에 addMarker 함수를 선언해주면 됩니다.

먼저 addMarker를 먼저 봅시다.

function addMarker(location, map) {
            var marker = new google.maps.Marker({
                position: location,
                map: map
                //label : 1,2 넣으면 좋겠다
            });
        }

(아래 label 주석은 사용자1의 위치, 2의 위치를 표시하기 위한 라벨입니다. label을 지정해주면 마커에 표시되어 나오게 되지요.)

그리고, initMap에 이벤트를 추가해줍니다.

google.maps.event.addListener(map, 'click', function(event) {
                if(cnt < 3) {
                    addMarker(event.latLng, map);
                    addAddress(event.latLng, geocoder, cnt);
                    cnt++;
                }
  });

제 경우는, 두 명의 사용자만을 이용할 것이므로, 정수형 변수 cnt를 선언해주었습니다. 처음에 cnt=1로 선언해주고, addMarker하는 경우 1씩 추가되어 3 미만일 경우에만 마커가 추가되는 것이지요.

만약 if 문 없이 사용하게 되면,

이렇게 마커들이 마구 찍힐 수 있습니다!.

 

그리고 addAddress라는 함수가 또 보일텐데요, 이것은 제가 만든 페이지 구성을 보면 됩니다.

이렇게 주소를 입력받아서 마커를 찍을 수도 있는데, 지도에 직접 클릭하는 경우는 그 주소를 저 입력창에 기입시키기 위해 addAddress 함수를 만들었습니다.

이때 구글맵은 위도, 경도로 위치 데이터를 받습니다. 이를 위해선 주소로 변환해주는 메소드도 필요하게 되지요.
그게 바로 geocoder! 입니다.

initMap()을 보면, var geocoder = new google.maps.Geocoder라고 선언해주었습니다. 그리고, addAddress의 파라미터로 클릭 이벤트 값과 geocoder, cnt를 넘겨줍니다.

cnt의 경우는, 입력창의 아이디에 이용하기 위해서지요!

다음과 같은 함수입니다.

function addAddress(location, geocoder, cnt) {
            //주소 인풋창에 주소 변환해서 입력하는 것
            geocoder.geocode({'location': location}, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        $('#address'+cnt).val(results[1].formatted_address);
                    } else {
                        window.alert('No results found');
                    }
                } else {
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
        }

그러면 이렇게 이쁜 결과를 받아옵니다.

 
 

여기까지 google map api 연동, map 띄우기, 마커 찍기 까지 보았습니다.
다음 번엔 주소를 입력하여 마커 찍기, 그 마커들의 중점 찾기를 진행하겠습니다.

RYUHA

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

Leave a Reply

avatar