Daum 지도.카카오지도 api 하나의 페이지에 여러 지도 사용법 질문드립니다!

지도/로컬 API에 대한 문의게시판입니다.

아래와 같은 소스를 반복적으로 사용하여 하나의 페이지에 같은지도를 무수히 많이 만들려고합니다.
그렇게 하기위해서 id 가 겹치지 않게하기위해 스트립트 부분 수정을 반복하여도 정상적으로 작동이 안됩니다ㅠ\

혹시 대표예시로 id=“map” 으로 했을시와 id=“map2” 로했을 시 입력해야하는 스크립트 값을 알 수 있을까요?

<div id="map" style="width:100%;height:100%; "></div>
<div id="map2" style="width:100%;height:100%; "></div>
<div id="map3" style="width:100%;height:100%; "></div>
<div id="map...." style="width:100%;height:100%; "></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7f18c3a2d89e7d4cd0cdc93e12bce6ae"></script>
    <script>
		var mapContainer = document.getElementById('map'), // 지도의 중심좌표
                mapOption = { 
                    center: new daum.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
                    level: 3 // 지도의 확대 레벨
                }; 

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

            // 지도에 마커를 표시합니다 
            var marker = new daum.maps.Marker({
                map: map, 
                position: new daum.maps.LatLng(33.450701, 126.570667)
            });

            // 커스텀 오버레이에 표시할 컨텐츠 입니다
            // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
            // 별도의 이벤트 메소드를 제공하지 않습니다 
            var content = '<div class="wrap">' + 
                        '    <div class="info">' + 
                        '        <div class="title">' + 
                        '            카카오 스페이스닷원' + 
                        '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
                        '        </div>' + 
                        '        <div class="body">' + 
                        '            <div class="img">' +
                        '                <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
                        '           </div>' + 
                        '            <div class="desc">' + 
                        '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + 
                        '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + 
                        '                <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + 
                        '            </div>' + 
                        '        </div>' + 
                        '    </div>' +    
                        '</div>';

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

            // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
            daum.maps.event.addListener(marker, 'click', function() {
                overlay.setMap(map);
            });

            // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
            function closeOverlay() {
                overlay.setMap(null);     
            }
	</script>
  1. 커스텀 오버레이의 컨텐츠, 그러니까 var content 라고 문자열로 선언한 내부 엘리먼트는 변경이 필요합니다. 문자열이 아닌 HTMLElement로 만들어서 넣어주셔야 해요. 아래 답변을 확인해 보세요.
    닫기가 가능한 커스텀 오버레이

  2. 각기 만들어진 지도마다 다른 인터렉션이 들어가야 한다면, 각 지도가 사용할 변수명 자체도 다르게 주셔야 제대로 동작할겁니다. id=“map1” 인 경우 자바스크립트의 변수들도 다 뒤에 '1’을 붙여서 표기한다거나 하는 식으로요.