카카오 다음 지도 API를 활용하여 다중마커찍기

카카오 다음 지도 API를 활용하여 다중마커찍기

2018/12/06 - [개발공부] - Ajax처리를 통한 즐겨찾기 갯수 나타내주기 / 더보기 버튼만들기 (JavaScript, Ajax, Spring)

이어지는 글,, wishlist메인에서 마포구를 클릭하면 이렇게 리스트가 뜬다. 

여기서는 다음 카카오 지도 API를 사용하였다!!!!!

나는 DB에서 각각의 숙소 주소를 받아와서 이 주소들을 지도에 마커로 찍어줘야하는데 이것도 조금,, 시간이 걸렸다

더 열심히 공부해야겠다 ㅠ_ㅠ... 아무튼 전체적인 코드를 본다면,

    <script>
        var mapContainer = document.getElementById('map'); // 지도를 표시할 div  
        mapOption = {
            center : new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표 
            level : 7 // 지도의 확대 레벨
        };
 
        var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
        var geocoder = new daum.maps.services.Geocoder();
        var addressArray = [];
        var wishList = $('.de_add');
 
        for (var i = 0; i < wishList.length; i++) {
            addressArray.push({
                'groupAddress' : $("input[name='address']").eq(i).val()
            });
        }
 
        for (var i = 0; i < addressArray.length; i++) {
            geocoder.addressSearch(
                            addressArray[i].groupAddress,
                            function(result, status, data) {
 
                                // 정상적으로 검색이 완료됐으면 
                                if (status === daum.maps.services.Status.OK) {
 
                                    var coords = new daum.maps.LatLng(
                                            result[0].y, result[0].x);
 
                                    // 결과값으로 받은 위치를 마커로 표시합니다
                                    var marker = new daum.maps.Marker({
                                        map : map,
                                        position : coords
                                    });
 
                                    // 마커를 지도에 표시합니다.
                                    marker.setMap(map);
 
                                    var content = '<div class ="labelWish"><span class="leftWish"></span><span class="centerWish">'
                                            + result[0].address_name
                                            + '</span><span class="rightWish"></span></div>';
 
                                    // 커스텀 오버레이를 생성합니다
                                    var customOverlay = new daum.maps.CustomOverlay(
                                            {
                                                position : coords,
                                                content : content
                                            });
 
                                    // 커스텀 오버레이를 지도에 표시합니다
                                    customOverlay.setMap(map);
 
                                    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                                    map.setCenter(coords);
                                }
                            });
        }
    </script>

카카오 디벨로퍼(http://apis.map.daum.net/web/guide/)에 가보면 예제도 잘 나와있으니 참고해보면 될것같다! 

나는 각각의 주소값을 객체배열로 저장하여서 for문으로 돌려 마커를 찍어주었다! 

그리고 주소의 값을 커스텀 오버레이로 위에 말풍선처럼 띄워주었다!

여기서 주소값은 모두 신주소값이었고, 카카오에서 제공해주는 service를 통해 주소값->좌표로 바꿔서 마커를 찍어주는 그런 방식이다!

코드만 잘 살펴보면 쉽게 이해할 수 있을 것이라고 생각된다!

이것을 사용하기 위해선, 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=각자의 앱키&libraries=services"></script>

꼭 head부분에 추가해주어야 한다~★