[API] 카카오맵 사용하기

🗺️ 카카오맵 API

지금까지는 관리자 모드에서 매장을 등록했으니 사용자가 볼 수 있는 화면을 만들어보겠다!

장소를 등록했으니 사용자들이 매장을 찾기 쉽게 카카오맵 API를 사용해서 위치를 표시했다.

 

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

카카오에서 API를 사용하는 방법에 대해서 아주 잘 설명해놓아서 가져와서 지도만 띄우는데는 진짜 5분도 안걸린 것 같다!

친절한 카카오 : )

 

html에 지도가 들어갈 컨테이너를 넣어준다.

<div id="map" style="width:650px;height:510px;"></div>

 

페이지가 로드될 때 li의 첫번째에 있는 주소값에 마커가 생성되도록 초기값을 설정했다.

li를 클릭할 때마다 해당 장소로 마커가 이동되도록 해주었다.

// 지도를 표시할 div 요소

var mapContainer = document.getElementById('map');

// 지도를 생성하고 초기화

var map = new kakao.maps.Map(mapContainer, {

    center: new kakao.maps.LatLng(33.450701, 126.570667), // 초기 지도 중심 좌표

    level: 3 // 초기 지도 확대 레벨

});

// 마커를 담을 변수

var marker;

// 마커를 설정하고 정보 창을 표시

function setMapMarker(coords, content) {

    // 새로운 마커 생성

    marker = new kakao.maps.Marker({

        map: map,

        position: coords

    });

    // 정보 창 생성

    var infowindow = new kakao.maps.InfoWindow({

        content: content

    });

    // 정보 창 열기

    infowindow.open(map, marker);

    // 마커 위치를 지도 중심으로 설정

    map.setCenter(coords);

}

// 지도 확대 레벨을 초기화하는 함수

function resetMap() {

    map.setLevel(3);

}

// 주소를 받아와 지도에 마커를 표시하는 함수

function positionM(address, name) {

    var geocoder = new kakao.maps.services.Geocoder();

    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 content = '<div style="padding:5px; font-size:12px;">' + name + '</div>';

            setMapMarker(coords, content);

        }

    });

}

// 초기화면에서 첫 번째 장소의 주소와 이름으로 지도에 마커 표시

$(document).ready(function () {

    var defaultAddress = $('.store_list > ul > li:first-child .seum_addr1').val();

    var defaultName = $('.store_list > ul > li:first-child .store_tit').text();

    positionM(defaultAddress, defaultName);

    // 목록에서 다른 장소를 클릭했을 때의 이벤트 처리

    $('.store_list > ul > li').click(function () {

        var address = $(this).find('.seum_addr1').val();

        var name = $(this).find('.store_tit').text();

        positionM(address, name);

        resetMap();

    });

});

 

 

다음 번에는 마커랑 인포윈도우를 커스텀 해보려고 한다. 😀