카카오맵 상단 마커표시

카카오 맵 마커표시 밑 마커 창 표시해주기

```
$(document).ready(function() {		
var mapContainer = document.getElementById('map'); // 지도를 표시할 div
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();	

var adres= '${museumItDomain.adres1}';
	var adres2= '제주특별자치도 제주시 첨단로 242';
	// 주소로 좌표를 검색합니다
	geocoder.addressSearch(adres, function(result, status) {

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

	        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
				//주소를 좌표로 변환해줘야 마커창 기능이 제대로 작동한다(주의)
		    var mapOption = {
			        center: coords, // 지도의 중심좌표
			        level: 3 // 지도의 확대 레벨
			    };
			var map = new kakao.maps.Map(mapContainer, mapOption);

	        // 결과값으로 받은 위치를 마커로 표시합니다
	        var marker = new kakao.maps.Marker({
	            map: map,
	            position: coords
	        });
 			var content = '<div class="o_mapwrap">' +
            '    <div class="o_mapinfo">' +
            '        <div class="o_maptitle">' +
            '            서울시립 미술아카이브<br>(ART ARVHIVES SEOUL MESEUM OF ART' +
            '            <a class="o_mapclose" id="closeMarkerBtn" href="javascript:;"><span class="blind">닫기</span></a>' +
            '        </div>' +
            '        <div class="o_mapbody">' +
            '            <div class="o_mapimg">' +
            '                <img src="/resources/assets/svg/o_type_b.svg" alt="">' +
            '           </div>' +
            '            <div class="o_mapdesc">' +
            '                <div class="o_maph1">서울특별시 종로구<br>평창문화로 101</div>' +
            '                <div class="o_maph2">SeMA Art Archieves</div>' +
            '            </div>' +
            '        </div>' +
            '    </div>' +
            '</div>';

		// 마커 위에 커스텀오버레이를 표시합니다
		// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
		var overlay = new kakao.maps.CustomOverlay({
		    content: content,
		    map: map,
		    position: coords
		});

		kakao.maps.event.addListener(marker, 'click', function() {
		    overlay.setMap(map);
		});

 		$("#closeMarkerBtn").click(function(){
 			  overlay.setMap(null);
		});

	        map.setCenter(coords);
	    }
	});
});
```