당신의 꿈을 응원 합니다.

카카오맵/카카오맵API사용법/카카오맵 위치 표시/KAKAO MAP API/카카오맵API사용하기/카카오맵 주소 좌표/카카오맵 주소를 좌표로 변환

구글맵이나, 네이버지도를 사용한 경험은 있었는데, 이번에 로또관련 페이지를 만들면서 카카오맵을 처음 사용해 보았다. 구글 개발자 페이지 들어가보니 깔금하게 정리가 되어 있어서 사용에는 어려움이 없었다. 

우선 내가 할 작업은 아래와 같다.

1. 로또 당첨판매점 주소를 가져온다.

2. 주소를 좌표로 변환한다.

3. 좌표를 카카오맵에 원하는 모양으로 표시해준다.

카카오API를 사용하려면 앱키가 필요하기 때문에, 혹시 아직 발급전이면 아래 페이지에 들어가서 키를 받아와야 한다.

내 내플리케이션 > 앱설정 > 플랫폼 메뉴로 들어가서 자신이 사용할 플랫폼을 등록해 준다.

나는 Web페이지에서 사용할 것이기 때문에 일단, 내 페이지들을 등록해 두었다.

개발 환경까지 등록해줘야 편하다.

Javascript API는 아래 페이지에서 가이드를 참고하면 된다.

https://apis.map.kakao.com/web/guide/

기본 준비가 끝났으니, 이제 웹페이지 작업을 해보자.

우리가 사용할 API와 라이브러리는 아래와 같다.

<!--실제 지도를 그리는 javascript API를 불러오기-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[앱키]&libraries=services"></script>

<!--주소-좌표 변환을 할수 있응 services 라이브러리 불러오기-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[앱키]"></script>

사용중인 전체 소스코드다. <%=store_add%> 부분에 표시할 주소를 입력해주면 나머지는 카카오에서 알아서 해준다.

정말 편한 것 같다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[나의 앱키]&libraries=services"></script>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[나의 앱키]"></script>
    <script type="text/javascript">
        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
            level: 3 //지도의 레벨(확대, 축소 정도)
        };

        // 지도를 생성합니다
        var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

        // 주소-좌표 변환 객체를 생성합니다
        var geocoder = new kakao.maps.services.Geocoder();

        // 주소로 좌표를 검색합니다
        geocoder.addressSearch('<%=store_add%>', function (result, status) {

            // 정상적으로 검색이 완료됐으면 
            if (status === kakao.maps.services.Status.OK) {

                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                // 결과값으로 받은 위치를 마커로 표시합니다
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });

                // 인포윈도우로 장소에 대한 설명을 표시합니다
                var infowindow = new kakao.maps.InfoWindow({
                    content: '<div style="width:150px;text-align:center;padding:6px 0;"><div style="font-weight: bold;"><%=store_name%></div><div>1등당첨횟수 : <%=win_cnt%></div></div>'
                });
                infowindow.open(map, marker);

                // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                map.setCenter(coords);
            }
        });    

    </script>

각자의 취향에 맞게 사용하면 되겠지만, 나는 팝업처럼 꾸며보았다.

그럼 다들 즐코딩하세요!

카카오맵 API를 활용해서 내가 만든 로또페이지! 

http://ddogram.ga/vue/index_v2.aspx

카카오맵/카카오맵API사용법/카카오맵 위치 표시/KAKAO MAP API/카카오맵API사용하기/카카오맵 주소 좌표/카카오맵 주소를 좌표로 변환