안녕하세요, 기존에 다음(daum) 지도 API 잘 사용하고 있던 사용자입니다.
지도 API를 web에 사용하여 사무실 지도로 잘 쓰고 있었는데요
어느 순간(언제 부터인지 정확히 모르겠습니다만) 부터
지도가 지도 표시 영역 일부에만 표시됩니다.
웹의 화면(브라우져 크기)을 키우거나 줄이는 액션을 해야만 지도가 지도 영역에 제대로(fully) 표시됩니다.
처음에는 daum 에서 kakao 로 변경되어서 그런가 해서
kakao 개발자 등록하고 kakao api로 해도 같은 현상이 있습니다.
URL은
입니다.
이에 대해 답변 부탁드립니다.
infowindow 생성 옵션에
disableAutoPan: true 를 줘보세요.
http://apis.map.daum.net/web/documentation/#InfoWindow
답변 주셔서 감사합니다.
알려주신 내용 시도 해보겠습니다.
질문글 쓴 이후, 문제 해결은 한 상태인데, CSS와 HTML의 binding 시점(?)이 원인인 것으로 추측합니다.
일단, 저는 wordpress를 사용하고 있고, 지도를 표시할 영역(div id)의 특성(height, width 등)을 CSS에 정의하고
그 div id에 daum 지도 api를 사용하여 지도를 구현하였습니다.
그동안은 문제 없이 잘 되었구요.
그런데 지도가 제대로 표시되지 않는 문제가 발생한 이후, 이것 저것 시도해보다가
위 div id를 CSS에 정의하지 않고, html에 style tag를 이용하여 html 자체에 정의하여 해보니
문제가 해결되었습니다(현재 e-sue.com/contact 에 접속해 보면 지도가 잘 되는 걸 볼 수 있습니다).
그래서 개인적으로 CSS와 html의 binding 시점(?)을 문제 원인으로 추측하고 있습니다(이런 게 원인이 되는 지는 모르겠습니다만).
네, 언급하신 시점의 문제가 있을 수 있습니다.
Map에 넘겨주는 container가 되는 HTMLElement의 스타일이 의도대로 먹혀있지 않은 상태에서
Map 객체를 선언하고 인스턴스를 만들게 되면
그 시점의 container 스타일대로 영역을 계산하여 지도가 그려지게 됩니다.
이후에 container에 스타일을 주어 다른 영역을 가지게 된다면 (그게 의도되었든 그렇지 않았든)
API의 내부에서는 container의 스타일이 바뀌었다는 것을 모르기 때문에
처음 그려진 그대로를 보여주게 될 것이고
그 결과 화면만을 보면 마치 그려지다 만 것처럼 보여지는 것이죠.
보통 브라우저의 트리구축 => 레이아웃 포지셔닝 => 페인팅 과정에서 의도하지 않은 동작이 순식간에 일어나기에 해결법을 찾기가 힘듭니다.
그래서 취하신 방법대로 container에 inline으로 스타일을 주는 것도 한 가지 해결책이라 생각합니다. ^^;
일반적으로 이렇게 동적으로 스타일을 변경할 경우,
Map객체의 메소드 중 Map.relayout()을 호출하여
지도 container의 영역을 재계산하도록 명령할 수 있습니다.
답변 감사합니다!