카카오지도 여러개 연동
본문
원 페이지에 카카오지도 여러개를 연동하려고 하니 하나는 잘 나오는데 하나는 안나와서 질문드립니다ㅠㅠ
<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
별일 없다면 mapContainer 을 재사용하므로 문제 없지 싶은데요
혹시 모르니 gmapContainer 와 umapContainer 를 분리해서 사용해보세요
그리고 $(document).ready 함수에 넣어서 사용하세요