한페이지 지도 2개를 넣었는데 이미지 마커가 한쪽은 안나타나서...
본문
지도는 나타나는데 이미지 마커가 나타나지 않아서 문의드려봅니다.
첫번째 지도는 기본적으로 잘 나타나고 있어서 두번째 변형을 잘 봐주세요
<div id="map" style="width:100%;height:400px;"></div>
<!-- 다음 지도키 -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a325692e5234c8c164046a1e1d0008a1"></script>
<script>
ar mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.40147, 126.72201), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new daum.maps.Map(mapContainer, mapOption);
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new daum.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
var imageSrc = '/images/here.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(80, 68), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(40, 68)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(37.40147, 126.72201); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
</script>
<!--/지도 -->
두번째 지도/// 이미지 마커가 안보여요. 나름 겹치지 않게 이름을 변경했는데;;
알고서 하는 것이 아니라서 오류를 못잡겠어서 도움 요청 드립니다.
<div id="map2" style="width:100%;height:400px;"></div>
<!-- 다음 지도키 -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a325692e5234c8c164046a1e1d0008a1"></script>
<script>
var mapContainer = document.getElementById('map2'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.60306, 126.65551), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new daum.maps.Map(mapContainer, mapOption);
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new daum.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
var imageSrc2 = '/images/here.png', // 마커이미지의 주소입니다
imageSize2 = new daum.maps.Size(80, 68), // 마커이미지의 크기입니다
imageOption2 = {offset: new daum.maps.Point(40, 68)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage2 = new daum.maps.MarkerImage2(imageSrc2, imageSize2, imageOption2),
markerPosition2 = new daum.maps.LatLng(37.60306, 126.65551); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker2 = new daum.maps.Marker2({
position: markerPosition2,
image: markerImage2 // 마커이미지 설정
});
// 마커가 지도 위에 표시되도록 설정합니다
marker2.setMap(map2);
</script>
<!--/지도 -->
... 디자이너가 혼자 하려니 도움 받고자 올렵니다.
답변 2
두번째맵에 적용되는 script 에
var map
var mapTypeControl
등 변수명도 다르게 주셔야 합니다.
감사합니다! 덕분에 아이콘은 표시가 되었습니다.
다만 지도 컨트롤이 첫번째 지도에 두개씩 나타나더라고요. ㅜ.ㅜ. 일단 두번째에서는 지도 컨트롤 자체를 없애서 급한것만 모면했어요. 다른 도움 말씀도 있으시면 부탁드립니다.
진짜 큰 도움이었습니다. 즐거운 주말 되세요. 고맙습니다.
맵같은 변수명들도 나눠줘야하지않을까 싶네요
도움 말씀 감사합니다. 언어라는 것이 생소하다보니 흐름을 잘 몰라서 여기저기 다르게만 하니까 잘 적용이 안되더라고요. 힌트에 도움 주셔서 고맙습니다.
답변을 작성하시기 전에 로그인 해주세요.
