웹에서 지도를 두개띄우고 화면을 회전하는경우 마커가 사라지는 상황입니다

안녕하세요 현재 모바일 웹페이지에서 기본 MAP 1과 버튼 클릭시 나타나는 MAP2 기능을 사용중입니다.
MAP2 에서 화면을 가로 또는 세로로 회전하고 다시 MAP1으로 돌아가면 기존에 보이던 마커가 사라지는 현상이 발생하고있습니다. 또한 맵 API의 확대 축소 또한 장애를 일으키고있습니다.

그리고 MAP1에서 다시 화면을 전환하면 사라졌던 마커가 생겨나는 현상입니다.

마커가 사라지는 상황에서 마커의 포지션이나 z-index를 찍어보면 여전히 값은 유지되고있고 단지 마커만 보이지 않고 있습니다.

현재 지도는

var mapContainer = document.getElementById(‘Map’),
mapOption = {
center: new daum.maps.LatLng(37.#####, 126.#####),
level: 14,
draggable:true,
scrollwhell:true,
};
var oMap = new daum.maps.Map(mapContainer, mapOption);

버튼 클릭 function (){
mapContainer2 = document.getElementById(‘Map2’);
mapOption2 = {
center: new daum.maps.LatLng(mylat, mylon),
level: 5,
draggable:true,
scrollwhell:true,
};

console.log(mylat+"////"+mylon);

oMap2 = new daum.maps.Map(mapContainer2, mapOption2);
////
////

}
이런 식으로 생성되고있습니다.

다음지도는 지도 영역이 바뀔 경우에 지도의 중심이 유지되지 않으므로
map.relayout() 함수와 map.setCenter()로
지도의 영역 및 중심을 다시 지정해 주어야 합니다.

var map = new daum.maps.Map(document.getElementById('map'), {
  center: new daum.maps.LatLng(XXX, XXX),
  level: 4
});
var center = map.getCenter();

daum.maps.event.addListener(map, 'drag', function (event) {
  center = map.getCenter();
});

daum.maps.event.addListener(map, 'zoom_changed', function (event) {
  center = map.getCenter();
});

var marker = new daum.maps.Marker({
  position: new daum.maps.LatLng(XXX, XXX),
  map: map
});

$(window).on('orientationchange', function(event) {
  map.relayout();
  map.setCenter(center);
});

위 코드는 세로/가로 모드 변환시 지도 중심을 유지시키는 코드입니다.

일단 이것을 먼저 적용시켜보시고
그 이후에 잘 안되는 현상에 대해서 추가로 얘기해 보시죠.

알려주신 방법을 적용하고 화면이 전환 될 때마다 center값을 받아와서 적용시키니 정상적으로 작동이 됩니다. 감사합니다.

1개의 좋아요