테스트 사이트 - 개발 중인 베타 버전입니다

카카오지도 여러개 연동 채택완료

midal 5년 전 조회 3,138

원 페이지에 카카오지도 여러개를 연동하려고 하니 하나는 잘 나오는데 하나는 안나와서 질문드립니다ㅠㅠ

<div id="gmap" ></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e03c8d9509faa75c9e2a798d9fc7c21b"></script>
                        <script>
                        var mapContainer = document.getElementById('gmap'), // 지도를 표시할 div 
                          mapOption = { 
                                center: new kakao.maps.LatLng(35.835614, 129.209786), // 지도의 중심좌표
                                level: 4 // 지도의 확대 레벨
                            };
                        
                        var map = new kakao.maps.Map(mapContainer, mapOption);
                        
                        var imageSrc = 'http://ryomi.cafe24.com/img/map_icon.png', // 마커이미지의 주소입니다    
                            imageSize = new kakao.maps.Size(48, 52), // 마커이미지의 크기입니다
                            imageOption = {offset: new kakao.maps.Point(25, 55)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                        
                        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
                            markerPosition = new kakao.maps.LatLng(35.835614, 129.209786); // 마커가 표시될 위치입니다
                        
                        // 마커를 생성합니다
                        var marker = new kakao.maps.Marker({
                          position: markerPosition,
                          image: markerImage // 마커이미지 설정 
                        });
                        
                        // 마커가 지도 위에 표시되도록 설정합니다
                        marker.setMap(map);  
                        
                        // 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
                        var content = '<div class="customoverlay">' +
                            '  <a href="http://kko.to/BqO9SuDDH" target="_blank">' +
                            '    <span class="title">여기</span>' +
                            '  </a>' +
                            '</div>';
                        
                        // 커스텀 오버레이가 표시될 위치입니다 
                        var position = new kakao.maps.LatLng(35.835614, 129.209786);  
                        
                        // 커스텀 오버레이를 생성합니다
                        var customOverlay = new kakao.maps.CustomOverlay({
                            map: map,
                            position: position,
                            content: content,
                            yAnchor: 1 
                        });
                        </script>

 

하나는 <div id="gmap" ></div>으로 주고 다른 하나는
<div id="umap" ></div>으로 표시한다음

var mapContainer = document.getElementById('umap'), // 지도를 표시할 div 

으로 바꾸었는데 왜 안되는걸까요..

지도도 안뜨고 마커도 나오지 않습니다

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
5년 전

별일 없다면 mapContainer 을 재사용하므로 문제 없지 싶은데요

혹시 모르니 gmapContainer 와 umapContainer 를 분리해서 사용해보세요

 

그리고 $(document).ready 함수에 넣어서 사용하세요 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인