[ JavaScript ] kakaomap API를 사용 및 응용해보기

2024. 6. 17. 17:01ㆍ· FRONT-END/└ JS

환경: Visual Studio Code

kako MAP API : https://apis.map.kakao.com/

 

- appkey의 value에 각자의 key 값을 삽입해야한다.

[ 1. 카카오가 기본 제공하는 지도 ]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kakao 지도 시작하기</title>
</head>
<body>
    <div id="map" style="width:500px;height:400px;"></div>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값"></script>
    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(33.450701, 126.570667),
            level: 3
        };

        var map = new kakao.maps.Map(container, options);
    </script>
</body>
</html>

 

[ 2. 여러 개의 지도를 원하는 위치로 표시 ]

    + 내 스타일로 코드 수정(필요한 코드만 따오기)

<head>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>

    <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값"></script>
    <script type="text/javascript">
        $(function () {

            //여러 개의 지도를 동시에 생성
            $(".map").each(function () {
                //this == 지도 영역(컨테이너)
                //지도 생성을 위한 영역을 선택
                var container = this;

                //위도와 경도를 데이터셋에서 추출
                var lat = $(this).data("lat");//data-lat
                var lng = $(this).data("lng");//data-lng

                //지도 생성을 위한 옵션 설정
                var options = {
                    center: new kakao.maps.LatLng(lat, lng), //위치정보
                    level: 3 //확대 수준
                };
                //지도 생성
                var map = new kakao.maps.Map(container, options);
            });
        });

    </script>
</head>

      (+) each() 메소드를 사용하여 반복 생성되도록 함. 

      (+) 여기서의 this는 현재 선택된 컨테이너이다. (지도 영역)

      (+) 위도와 경도를 추출하여 이 위치 정보를 지도 생성 옵션에 삽입 해준 후, 지도를 생성해준다. 

<div class="cell my-30">
    <div class="map" data-lat="37.533896" data-lng="126.896718"></div>
</div>

      (+) body 태그에 위와 같이 div 태그를 여러개 설정하면 됨. 

             └ data-lat="위도" data-lng="경도"

      (+) 클래스 명을 map으로 주어 적용되게끔 설정함. 

 

[ 3. 지도에 마커 표시 ]

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값"></script>
    <script type="text/javascript">
        $(function () {

            //여러 개의 지도를 동시에 생성
            $(".map").each(function () {
                //this == 지도 영역(컨테이너)
                //지도 생성을 위한 영역을 선택
                var container = this;

                //위도와 경도를 데이터셋에서 추출
                var lat = $(this).data("lat");//data-lat
                var lng = $(this).data("lng");//data-lng

                //지도 생성을 위한 옵션 설정
                var options = {
                    center: new kakao.maps.LatLng(lat, lng), //위치정보
                    level: 3 //확대 수준
                };
                //지도 생성
                var map = new kakao.maps.Map(container, options);

                //지도 위에 마커를 표시하기 위한 코드
                var marker = new kakao.maps.Marker({
                    position:new kakao.maps.LatLng(lat, lng),//지도 가운데
                });
                //마커의 지도를 설정해라
                marker.setMap(map);
            });
        });

    </script>
</head>

 

2번에서 추가된 코드는 아래코드이다. (마커 표시 코드 추가)

//지도 위에 마커를 표시하기 위한 코드
var marker = new kakao.maps.Marker({
     position:new kakao.maps.LatLng(lat, lng),//지도 가운데
});
//마커의 지도를 설정해라
marker.setMap(map);

      (+) 지도를 나타내주기 위해 가져왔던 위도, 경도 위치를 마커를 표시하기 위한 메소드의 매개변수 값으로 삽입해준 후 

           마커를 지도위에 설정해주면 된다. 

[ 4. 마커, 인포 윈도우 추가 ]

 

    <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값"></script>
    <script type="text/javascript">
        $(function () {

            //여러 개의 지도를 동시에 생성
            $(".map").each(function () {
                //this == 지도 영역(컨테이너)
                //지도 생성을 위한 영역을 선택
                var container = this;

                //위도와 경도를 데이터셋에서 추출
                var lat = $(this).data("lat");//data-lat
                var lng = $(this).data("lng");//data-lng

                //지도 생성을 위한 옵션 설정
                var options = {
                    center: new kakao.maps.LatLng(lat, lng), //위치정보
                    level: 3 //확대 수준
                };
                //지도 생성
                var map = new kakao.maps.Map(container, options);

                //지도 위에 마커를 표시하기 위한 코드
                var marker = new kakao.maps.Marker({
                    position: new kakao.maps.LatLng(lat, lng),//지도 가운데
                });
                //마커의 지도를 설정해라
                marker.setMap(map);

                //마커에 인포윈도우를 표시하기 위한 코드
                //data-info 속성을 읽어서 있을 경우만 생성
                var info = $(this).data("info");
                if(info != undefined) {
                    // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능
                	var iwContent = '<div style="padding:5px; padding-left:50px;">'+info+'</div>';
                	var iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치

                	// 인포윈도우를 생성
                	var infowindow = new kakao.maps.InfoWindow({
                    	position: iwPosition,
                    	content: iwContent
                	});

                	// 마커 위에 인포윈도우를 표시.
                	//두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됨
                	infowindow.open(map, marker);
                }
            });
        });

    </script>
</head>

 

 3번에서 추가된 코드는 아래코드이다. (인포윈도우 표시 코드 추가)

//마커에 인포윈도우를 표시하기 위한 코드
//data-info 속성을 읽어서 있을 경우만 생성
var info = $(this).data("info");
if(info != undefined) {
       // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능
       var iwContent = '<div style="padding:5px; padding-left:50px;">'+info+'</div>';
       var iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치

       // 인포윈도우를 생성
       var infowindow = new kakao.maps.InfoWindow({
             position: iwPosition,
             content: iwContent
       });

       // 마커 위에 인포윈도우를 표시.
       //두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됨
       infowindow.open(map, marker);
}

      (+) data-info 속성을 주어 속성이 있는 경우만 인포윈도우를 생성하도록 설정해줌

      (+) 변수에 태그를 삽입하여, 이 변수를 position으로 지정해줌

<div class="cell my-30">
     <div class="map" data-lat="37.633896" data-lng="126.696718" data-info="당산점"></div>
</div>

 

[ 5. 주소로 지도 검색 ]

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값&libraries=services"></script>

      (+) &libraries=services를 넣어준다. (GEO 코더)

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값&libraries=services"></script>
	<script type="text/javascript">
		$(function(){
            var mapContainer = document.querySelector('.map'), // 지도를 표시할 div 
                mapOption = {
                    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                    level: 3 // 지도의 확대 레벨
                };  

            // 지도를 생성합니다    
            var map = new kakao.maps.Map(mapContainer, mapOption); 

            //검색 버튼을 누르면 주소 검색 후 지도가 표시되도록 설정
            $(".btn-search").click(function(){
                //입력된 주소를 불러온다
                var keyword = $(".address-input").val();
                if(keyword.trim().length == 0) return;

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

                // 주소로 좌표를 검색합니다
                geocoder.addressSearch(keyword, function(result, status) {

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

                        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                        console.log(coords);
                        // 결과값으로 받은 위치를 마커로 표시합니다
                        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;">'+keyword+'</div>'
                        });
                        infowindow.open(map, marker);

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

            });
		});
	</script>
</head>

      (+) 버튼을 클릭했을 때 이벤트가 발생하도록 클릭이벤트 안에 코드를 넣어준다. 

      (+) 주소를 좌표로 변환할 수 있도록 geocorder를 사용한다. 

<body>

    <div class="container w-500">
        <div class="cell center">
            <h1>주소로 지도 검색</h1>
        </div>

        <div class="cell flex-cell">
            <input type="text" class="address-input tool w-100"
                        placeholder="주소를 입력하세요">
            <button class="btn positive btn-search">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>

        <div class="cell my-30">
            <div class="map"></div>
        </div>  
    </div>

</body>

[ 6. 여러개의 주소를 각각 지도에 표시] 

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=key값&libraries=services"></script>
	<script type="text/javascript">
		$(function(){
            
            $(".map").each(function(){
                //this == 지도영역

                var container = this;
                var options = {
                    center : new kakao.maps.LatLng(33.450701, 126.570667),
                    level: 3
                };

                var map = new kakao.maps.Map(container, options);

                //주소 및 인포 불러오기 
                var address = $(this).data("address");
                var info = $(this).data("info");

                //주소 검색
                var geocoder = new kakao.maps.services.Geocoder();
                // geocoder.addressSearch(주소, 함수);
                geocoder.addressSearch(address, 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
                        });

                        //인포윈도우 - 없으면 주소로 설정
                        if(info == undefined) {
                             var infowindow = new kakao.maps.InfoWindow({
                                 content: '<div style="width:150px;text-align:center;padding:6px 0;">'+address+'</div>'
                             });
                             infowindow.open(map, marker);
                        }
                        else {
                             var infowindow = new kakao.maps.InfoWindow({
                                 content: '<div style="width:150px;text-align:center;padding:6px 0;">'+info+'</div>'
                             });
                             infowindow.open(map, marker);
                        }

                        //지도이동
                        map.setCenter(coords);
                    } 
                });
            });

 	});
	</script>
</head>

 

인포윈도우가 없으면 주소를 인포윈도우로 설정하는 코드를 아래와 같이 작성할 수도 있다.

//(참고)if문 없이 OR연산자를 사용하여 할 수 있음
var infowindow = new kakao.maps.InfoWindow({
        content: '<div style="width:150px;text-align:center;padding:6px 0;">' + (info || address) + '</div>'
});
infowindow.open(marker.getMap(), marker);

 

 

 

 

개인 공부 기록용입니다:)

728x90

'· FRONT-END > └ JS' 카테고리의 다른 글

[ JavaScript ] 이동 차단  (0) 2024.06.19
[ JavaScript ] 이벤트: onBlur, onChange, onClick, onFocus, onSelect, onSubmt  (0) 2024.06.15
[ JS ] 이미지 슬라이더 라이브러리 적용하기  (0) 2024.06.13
[ JS ] 날짜 라이브러리 적용하기  (1) 2024.06.12
[ JS ] DOM 제어  (0) 2024.06.08

관련글

티스토리툴바