한 페이지에 여러개의 지도를 출력하여 사용 중입니다.
그런데 ie9에선 두가지 문제가 발생하네요.
- 1개의 지도만 출력되고,
- api의 주소 → 좌표 기능을 이용한 부분이 먹히지 않아 예시 사례 때 나오는 디폴트 장소가 화면에 뿌려지고 있습니다.
스레드를 검색해보니 맵지도 ie 몇버전까지 지원 되나요? 에서 ie9까지 지원되는 것으로 답변이 있더군요.
한페이지에 여러번 지도를 호출해야 해서 다음과 같이 함수를 객체화하여 같은 것을 출력해야 하는 곳마다 map2, map3으로 정의해서 돌려썼습니다. 해결 방법에 대한 가이드가 있는지 알고 싶습니다.
function callMap1(){
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 지도 타입을 설정하고 컨트롤러를 생성하여 위치를 잡습니다.
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.BOTTOMLEFT);
// 지도 줌 컨트롤러를 생성하여 위치를 잡습니다.
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.LEFT);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: coords
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="map_info_window">' +
' <div class="info">'+
' '+
' </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);
}
});
};
