js로 카카오맵 연동

언젠가 내가 가본 곳 사진도 올리고 스크랩맵 (스크랩북 겸 맵) 만들어도 되겠다.

1, 먼저 적용할 부위 정하기

<div align="center">
<div id="map" style="width:800px;height:450px;"></div>
</div>

2, 전체 보기
위치는 경도, 위도 기준으로 잡기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<%=key%>"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
		// 37.5665851  , 126.9782038   ( 서울시청 )
		// 33.450701, 126.570667  ( 제주도 )
        center: new kakao.maps.LatLng(37.5665851  , 126.9782038), // 지도의 중심좌표. default로 보임
        level: 9 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
/*  추가 소스 시작 */
var custno = [];
var title = [];
var lat = [];
var lon = [];

<% for (MemberVo m : li) { %>
   custno.push('<%=m.getCustno()%>');
   title.push('<%=m.getCustname()%>');
   lat.push(<%=m.getLat()%>);
   lon.push(<%=m.getLon()%>);
<% } %>

var positions = [];

for (var i = 0; i < title.length; i++) { //지도상 위치에 해당 이름태그 생성, 상세보기 링크 삽입(title)
    positions.push({
        title: i + '.' + title[i],
        content: '<div style="width:150px;text-align:center;padding:3px 0; font-size:17px">' +
                 '<a href="<%=path%>/ShopCtrl?sw=E&custno=' + custno[i] + '" style="color:blue">' + title[i] + '</a></div>',
        latlng: new kakao.maps.LatLng(lat[i], lon[i])
    });
}

// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

for (var i = 0; i < positions.length; i++) {
    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new kakao.maps.Size(24, 35);

    // 마커 이미지를 생성합니다    
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image: markerImage // 마커 이미지
    });

    // 인포윈도우 생성
    var infowindow = new kakao.maps.InfoWindow({
        content: positions[i].content
    });

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));

    // 클릭 이벤트를 추가합니다
    (function(marker, i) {
        kakao.maps.event.addListener(marker, 'click', function() {
            // 새 탭에서 해당 위치의 링크를 엽니다. kakaomap으로 이동
            window.open('https://map.kakao.com/link/map/' + lat[i] + ',' + lon[i], '_blank');
        });
    })(marker, i);
}

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}
</script>

3, 상세보기
위치는 도로주소 기준으로 잡기
(경도, 위도 사용X)

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

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

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

// 주소로 좌표를 검색합니다
geocoder.addressSearch('<%=m.getRoadNmAddr()%>', 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:200px;text-align:center;padding:3px 0; position: relative;"><%=m.getCnterNm()%>' +
			            	'<img src="https://i.postimg.cc/4ypfwCky/hutyeh.jpg" alt="Image" style="width:100%;"></img>' +
			            	'</div>'
        });
        infowindow.open(map, marker);

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