웹이지에 두개의 지도를 넣고 싶습니다

지도/로컬 API
1

지도 api를 사용하고 있습니다. 웹페이지에 한개의 지도는 잘 나오는되요.
웹페이지에 2개의 지도를 넣으면 한쪽이 지도가 안나와요.

2개의 지도를 넣을 수 없는건지 궁금합니다.

2 
<div id="map1" style="width:100%;height:350px;"></div>
<div id="map2" style="width:100%;height:350px;"></div>
<script>
var mapContainer1 = document.getElementById('map1'),
    mapOption1 = {  
        center: new daum.maps.LatLng(33.450701, 126.570667),
        level: 3
    };
var map1 = new daum.maps.Map(mapContainer1, mapOption1);
    
var mapContainer2 = document.getElementById('map2'),
    mapOption2 = { 
        center: new daum.maps.LatLng(33.450701, 126.570667),
        level: 3
    };
var map2 = new daum.maps.Map(mapContainer2, mapOption2);
</script>

작성하신 코드와 비교해 보세요.

3 
   // 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
        function setMapType(maptype) {
            var roadmapControl = document.getElementById('btnRoadmap');
            var skyviewControl = document.getElementById('btnSkyview');
            if (maptype === 'roadmap') {
                map.setMapTypeId(daum.maps.MapTypeId.ROADMAP);
                roadmapControl.className = 'selected_btn';
                skyviewControl.className = 'btn';
            } else {
                map.setMapTypeId(daum.maps.MapTypeId.HYBRID);
                skyviewControl.className = 'selected_btn';
                roadmapControl.className = 'btn';
            }
        }

        // 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
        function zoomIn() {
            map.setLevel(map.getLevel() - 1);
        }

        // 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
        function zoomOut() {
            map.setLevel(map.getLevel() + 1);
        }
4

최초 질문에 대한 코드 맞나요…?

맵을 두 개 쓰는 건 안보이는데요?

5

아하… 이해했습니다.

지금 보내주신 코드들은 지도 두 개를 띄우는데 전혀 상관이 없습니다.
줌인/아웃 버튼을 눌렀을 때 한 쪽 지도만 움직일거고
CustomOverlay같은 경우 한 쪽 지도에만 그려지긴 하겠지만…
브라우저 상에 하나의 지도만 뜨는 것과는 상관이 없습니다.

콘솔에 에러 메세지가 있는지 한 번 확인해보세요.

(흐음… 지도 두 개를 띄우는 코드가 이 문제의 핵심인듯 한데요…)

6

답변 주셔서 감사합니다.
제가 원하는 기능은 위에 올린 코드로 한 웹페이 안에서 서로 다른 위치 표기 및 각각 컨트롤 가능 여부입니다.
위에 알려주신 코드 처럼 코드들을 변경해면 될 것 같은데… 어떤 것들을 변경해하는지 잘 몰라서요.

전체 코드 남겨요.

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
            mapOption = {
                center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                level: 5 // 지도의 확대 레벨
            };

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




        // 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
        function setMapType(maptype) {
            var roadmapControl = document.getElementById('btnRoadmap');
            var skyviewControl = document.getElementById('btnSkyview');
            if (maptype === 'roadmap') {
                map.setMapTypeId(daum.maps.MapTypeId.ROADMAP);
                roadmapControl.className = 'selected_btn';
                skyviewControl.className = 'btn';
            } else {
                map.setMapTypeId(daum.maps.MapTypeId.HYBRID);
                skyviewControl.className = 'selected_btn';
                roadmapControl.className = 'btn';
            }
        }
7

그럼 제가 처음 단 답변처럼 2벌씩 관리하시면 됩니다.
특별히 두 지도를 동기화 한다거나 상호작용하는 로직이 없다면

1번 맵의 변수들은 다 이름 끝에 1번을 붙이고
2번 맵의 변수들은 다 이름 끝에 2번을 붙이는 방식으로 나누어 진행하세요.

지도 영역 및 버튼, class 및 id들도 다 따로 만들어 주시면 됩니다.

8

네~ 친절한 답변 감사합니다. 한번 해보겠습니다. 즐거운 하루 보내세요~~