JQuery 호출 시 지도 깨짐 현상 문의

안녕하세요!

ajax 통신을 통해 받아온 data를 메인페이지에 띄워주고

jquery를 통해 click 시 자세한 내용이 나오도록 팝업창이 나옵니다(부트스트랩 활용)

그런데 팝업창내의 있는 지도가 깨져서 나옵니다. reload를 하면 ajax도 재동작 하여 중복된 내용이 페이지에 나오는 문제가 있는데…

혹시 ajax부분에는 영향이 안가도록 카카오지도만 따로 다시 불러 올 수 있는 방법은 없을까요?

작업하고 있는 사이트입니다! https://do-shoes.com

$(document).on("click", "div[data-toggle=modal]", function() {
	var text = $(this).text();
	var imgSrc = $(this).find('img').attr('src');
	$('.portfolio-modal-title').text(text);
	$('#portfolioModal .img-fluid').attr('src', imgSrc);

	//relayout을 호출하여 지도 영역(#map)이 변경되었음을 알려 준 다음에
	map.relayout()		
	// 이 후에 지도 중심을 지정하여 올바를 위치가 중심이 되도록 합니다.
	map.setCenter(center);
});
1개의 좋아요

map.relayout()
map.setCenter(new kakao.maps.LatLng(latitude, longitude));

제 위치를 받아오는 위도 변수를 넣고 진행 해봤지만…
똑같이 깨져서 나오네요 ㅠㅠ
(그냥 단순 숫자지정도 해봤습니다.)

그럼 아래와 같이 해 보세요.

$(document).on("click", "div[data-toggle=modal]", function() {
	var text = $(this).text();
	var imgSrc = $(this).find('img').attr('src');
	$('.portfolio-modal-title').text(text);
	$('#portfolioModal .img-fluid').attr('src', imgSrc);

	setTimeout(function() {
		//relayout을 호출하여 지도 영역(#map)이 변경되었음을 알려 준 다음에
		map.relayout()		
		// 이 후에 지도 중심을 지정하여 올바를 위치가 중심이 되도록 합니다.
		map.setCenter(center);
	 }, 0);
});
1개의 좋아요

덕분에 잘 고쳤습니다!! ㅎㅎ 시간 여유를 좀두니까 해결이 되었네요!