카카오API 지도 호출 시 잘림

지도/로컬 API
,
#1

캡처

안녕하세요.

반응형 웹사이트에서 카카오API 지도를 호출하면 위처럼 나옵니다.

카카오API 지도를 호출하는 소스는 아래와 같습니다.

어떻게 수정해야 할까요?

window.onload = function() {
var position = new kakao.maps.LatLng(37.511536, 127.057668);

	var map = new kakao.maps.Map(document.getElementById('map'), {
		center: position,
		level: 3,
		mapTypeId: kakao.maps.MapTypeId.ROADMAP
	});

	var marker = new kakao.maps.Marker({
		position: position
	});
	marker.setMap(map);

	kakao.maps.event.addListener(marker, "click", function() {
		window.open("http://map.daum.net/link/map/37.511536,127.057668");
  	});
	map.relayout();
	$('#map div a').attr("alt", "Kakao 지도");
	$('map[name="kakao.maps.Marker.Area:1"] area').attr("alt", "Seven Luck Casino - 강남 코엑스점");
	$('map[name="kakao.maps.Marker.Area:1"] area').attr("title", "Seven Luck Casino - 강남 코엑스점");
	$('#map_api').hide();
};
#2

relayout을 부르는 시점이 언제인가요?
지도를 표시할 영역의 크기가 잡히기 전에 relayout을 호출하는 것 같습니다.
relayout 예제에서도 확인할 수 있듯이 지도 크기를 바꾸고 relayout을 호출하지 않으면
첨부 사진처럼 지도가 깨지는 것을 확인할 수 있습니다.

모달, 탭인 경우 display가 block으로 바뀌는 시점(content가 보이는 시점),
동적으로 스타일을 변경할 경우 스타일이 변경된 후에 relayout을 호출해서 확인해주세요.

#3

말씀하신 대로 해결했으나
캡처

마커 위치가 구석에 있습니다. replayout()을 한 뒤에 마커 위치로 이동하는 방법은 없을까요?

#4

map.setCenter(latlng);을 호출해서 마커 위치로 중심좌표를 이동시켜주세요.

#5

덕분에 해결했습니다. 감사합니다.

1개의 좋아요