익스에서는 잘 나오는데 크롬에서는 지도가 깨져서 나옵니다

카카오맵 API (지도/로컬)
1

익스플로러에서는 잘 나오는데 크롬에서만 짤려서 나오더라구요
왜 그런지 아실까요?
동적으로 변경되는 부분은 없습니다~

image
image

2

첨부 사진 모두 크롬 브라우저인가요?
먼저 DOM 렌더링이 끝난 후에 지도 선언 및 초기화가 되었는지 시점도 확인해주시고
콘솔에 에러 로그가 있다면 에러 메세지와 현상을 확인할 수 있는 소스 코드도 첨부해주세요.

3

콘솔의 에러 메세지와 소스코드를 첨부하였습니다.
죄송합니다 바쁘신데…

에러메세지

image
image

소스코드

var map;

function initMap() {
var mapContainer = document.getElementById(‘map’),

mapOption = { 
    center: new kakao.maps.LatLng(36.64200866120209, 127.48881107056708), 
    level: 8,
};

map = new kakao.maps.Map(mapContainer, mapOption);

}

function setMapType(maptype) {
var roadmapControl = document.getElementById(‘btnRoadmap’);
var skyviewControl = document.getElementById(‘btnSkyview’);
if (maptype === ‘roadmap’) {
map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
$("#btnSkyview").parent().removeClass(“on”);
$("#btnRoadmap").parent().addClass(“on”);
} else {
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
$("#btnRoadmap").parent().removeClass(“on”);
$("#btnSkyview").parent().addClass(“on”);
}
}

function zoomIn() {
map.setLevel(map.getLevel() - 1);
}

function zoomOut() {
map.setLevel(map.getLevel() + 1);
}

var geocoder = new kakao.maps.services.Geocoder();

var adresList = new Array();
var cmpnmList = new Array();
var pt1 = new Array();
var pt2 = new Array();
var busway = new Array();
var busway2 = new Array();
var highwayArray = new Array();
var highwayArray2 = new Array();

var r = ${busListJson}
console.log®;

if(r != undefined){
var busList =JSON.parse(’${busListJson}’);
}

var bus_xdate = new Array();
var bus_ydate = new Array();

var xbus_xdate = new Array();
var xbus_ydate = new Array();

var busvalue = 0;
var y = ‘’;
var x = ‘’;

var t = ${highwayListJson}
console.log(t);

if(t != undefined){
var highwayList =JSON.parse(’${highwayListJson}’);
}

var hw_xdate = new Array();
var hw_ydate = new Array();

var idx = 0;
var highwayvalue = 0;
var hw_y = ‘’;
var hw_x = ‘’;

var p = ${rdnmadrListJson}
console.log§;

if(p != undefined){
var rdnList =JSON.parse(’${rdnmadrListJson}’);
}

for(var k in rdnList){
var $obj = rdnList[k];
var bb = $obj.indv_pnucode_fctrycmpnmlist;
var cc = $obj.indv_stllte_photo;
var dd = $obj.indv_photo;
var ee = $obj.indv_lnm_adres;
cmpnmList.push(bb);
pt1.push(cc);
pt2.push(dd);
adresList.push(ee);

}

adresList.forEach(function(addr, index){
	
	geocoder.addressSearch(addr, function(result, status) {
		
	     if (status === kakao.maps.services.Status.OK) {
	    	
	    	setTimeout(function(){
	    		
  		        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
  		        
  		    	  if(index == 0){
  		    		  
  		    		initMap();
  		    		
		        	//var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
		        	//map.setCenter(coords);
		        	
		        	//공항
		        	var polyline = new kakao.maps.Polyline({
		    	         map: map,	
		    	         path : [
		    	        	 new kakao.maps.LatLng(result[0].y, result[0].x),
		    	        	 new kakao.maps.LatLng(36.722200470783925, 127.49586754045484)
		    	         ],
		    	         strokeWeight: 0
		    	        });
		    	        
		    	        var airport = Math.round(polyline.getLength());
		    	        var k = '';
		    	        var m = '';
		    	        var ok = '';
		    	        
		    	        if(airport > 1000){
		    	        	k = Math.floor(airport/1000)
		    	        }
		    	        m = Math.floor(airport%1000)
		    	        if(airport > 1000){
		    	        	ok = "청주공항까지의 거리 : "+k+"."+m+" Km";
		    	        }else{
		    	        	ok = "청주공항까지의 거리 : "+m+" m";	
		    	        }
		    	        $(".airport").text(ok);
		        	
		        	
		        	
					//버스  		        	
		        	for(var k in busList){	
		    			var $obj = busList[k];
		    			var x =  $obj.bus_xdate;
		    			var y  =  $obj.bus_ydate;
		    			var bus_name  =  $obj.bus_name;
		    			
		    	 
			        var bus = new kakao.maps.Polyline({
		   	         map: map,	
		   	         path : [
		   	        	 new kakao.maps.LatLng(result[0].y, result[0].x),
		    	         new kakao.maps.LatLng(y, x)
		   	         ]
		   	        ,
		   	         strokeWeight: 0	   	        
		   	         
		   	        });
		 			var busdate = Math.round(bus.getLength());
		   	    	 busway.push(busdate);
		   	    	 busway2.push(bus_name);
		   	        
			    	}
					
			   	   	 
					 busvalue = Math.min.apply(null, busway);
					 
					 var bus_idx = busway.indexOf(Math.min.apply(null, busway));
		    	     var bus_name = busway2[bus_idx];
		        	
		    	        
		    	        var k2 = '';
		    	        var m2 = '';
		    	        var ok2 = '';
		    	        
		    	        if(busvalue > 1000){
		    	        	k2 = Math.floor(busvalue/1000)
		    	        }
		    	        m2 = Math.floor(busvalue%1000)
		    	        if(busvalue > 1000){
		    	        	ok2 = "[" + bus_name + "]" +" 정류소까지의 거리 : "+k2+"."+m2+" Km";
		    	        }else{
		    	        	ok2 = "[" + bus_name + "]" +" 정류소까지의 거리 : "+m2+" m";	
		    	        }
		    	        $(".bus_station").text(ok2);
		    	        
		    	        
		    	        
		    	      //고속도로  
		    	      for(var k in highwayList ){	
		    			var $obj = highwayList [k];
		    			var hw_x  =  $obj.hw_xdate;
		    			var hw_y  =  $obj.hw_ydate;
		    			var hw_name  =  $obj.hw_name;
		    			
		    		
		    	 
	  			        var highway = new kakao.maps.Polyline({
	  		   	         map: map,	
	  		   	         path : [
	  		   	        	 new kakao.maps.LatLng(result[0].y, result[0].x),
	  		    	         new kakao.maps.LatLng(hw_y, hw_x)
	  		   	         ]
	  		   	        ,
	  		   	         strokeWeight: 0	   	        
	  		   	         
	  		   	        });
	  		 			var highwaydate = Math.round(highway.getLength());
	  		 			highwayArray.push(highwaydate);
	  		 			highwayArray2.push(hw_name);
	  		 			
	  		   	        
	  			    	}
	  			   	   	 
	  					highwayvalue  = Math.min.apply(null, highwayArray);
	  					
		    	      	var hw_idx = highwayArray.indexOf(Math.min.apply(null, highwayArray));
		    	        var hw_name = highwayArray2[hw_idx];
	  					
	  					
		    	        var k3 = '';
		    	        var m3 = '';
		    	        var ok3 = '';
		    	        
		    	        if(highwayvalue > 1000){
		    	        	k3 = Math.floor(highwayvalue/1000)
		    	        }
		    	        m3 = Math.floor(highwayvalue%1000)
		    	        if(highwayvalue > 1000){
		    	        	ok3 = hw_name+"까지의 거리 : "+k3+"."+m3+" Km";
		    	        }else{
		    	        	ok3 = hw_name+"까지의 거리 : "+m3+" m";	
		    	        }
		    	        $(".highway").text(ok3);
		    	        
		    	      
  			        }
  		    	  
  		    	  var splittest = cmpnmList[index].split('|');
  		    	  var answer = "";
  		    	  
  		    	  if(splittest[3]){
  		    			answer = splittest[0] + "외 3업체";  
  	  		    	  }else if(splittest[2]){
  	  		    		answer = splittest[0] + "외 2업체";  
  	  		    	  }else if(splittest[1]){
  	  		    		answer = splittest[0] + "외 1업체";
  	  		    	  }else if(splittest[0]){
  	  		    		answer = splittest[0];
  		    	  }
  		    	  
  		    	
  	  		        
  	  		        var marker = new kakao.maps.Marker({
  	  		            map: map,
  	  		            position: coords
  	  		        });
  	  		        
  	  		        
  	  		      	var content = '<div class="map-tooltip">';
  			        content += '    <div class="tpd-content">';
  			        content += '    <div class="tooltip-title">';
  			        content += '    <li class="btn-detail">';
  			        content += '    <a hef="#" class="btn-detail title" data-whois="toggler" onclick="detailInfo('+ index +')"><strong>' + answer +'</strong>';
  			    	content += '    </div>';
  			        content += '    <div class="tooltip-cont">';
  			        content += '    <div class="thumbnail">';
  			        content += '        <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt1[index] + '&fileSn=0"'+' alt="" /></div>';
  			        if(pt1[index] != ''){
  			        	content += '        <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt1[index] + '&fileSn=0"'+' alt="" /></div>';	
  			        }else if (pt2[index] != ''){
  			        	content += '        <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt2[index] + '&fileSn=0"'+' alt="" /></div>';
  			        }else if (pt1[index] == '' && pt2[index] == ''){
  			        	content += '        <div class="thumbnail-view"><img src="${path}/img/img_none.gif" alt="" /></div>';
  			        }
  			        content += '    	</div>';
  			        content += '    <div class="ft-sectors">' + adresList[index] + '</div>';
  			        content += '    </a>';
  			        content += '    </div>';
  			        content += '    </div>';
  			        content += '</div>';
  			        content += '</li>';
  			        
  	  		      
  	  		        var infowindow = new kakao.maps.InfoWindow({
  	  		            content: content
  	  		           	//disableAutoPan: true
  	  		        });
  	  		        
  	  		    	kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
  	  	  		 	kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
  	  		      	//infowindow.open(map, marker);	
  	  		      	
	  	  	  		kakao.maps.event.addListener(marker, 'click', function() {
	  	  	  			
	  	  	  		detailInfo(index);
	  	  	  		
	  	  	  	

	  	  	  		});
	    	},index * 20);
	    } 
	});    
}); 





function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

if(adresList.length == 0){
initMap();
}

4

크롬에서 ERR_INSUFFICIENT_RESOURCES 오류를 반환하면서
주소 검색 및 타일 로드가 멈춘 현상으로 보입니다.

setTimeout 대신 promise를 사용하여 비동기 처리해주세요
https://devtalk.kakao.com/t/topic/115312/2?u=lea.ju

그리고 마커 개수가 많아지면 지도가 느려질 수 있습니다.
서버 연산으로 지도 범위에 포함되는 주소 데이터만 가져올 수 있는 방법도 고려해주세요.
https://devtalk.kakao.com/t/topic/40110/2?u=lea.ju