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

[botjs]

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

[lea.ju]

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

[botjs]

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

에러메세지

소스코드

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();
}

[lea.ju]

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

setTimeout 대신 promise를 사용하여 비동기 처리해주세요

주소로 장소표시할때 클러스터 질문

주소로 장소 표시는 비동기 로직으로 전체 주소 정보를 받아온 다음 클러스터러에 추가해야 합니다. 아래 콜백 함수에서 카운트 비교 후 다음 함수를 호출하는 방법과 promise를 사용하는 방법도 함께 참고해주세요. const list = [ '제주특별자치도 제주시 첨단로 242', '경기도 성남시 분당구 판교역로 235', '경기도 성남시 분당구 판교역로 231', '제주특별자치도 서귀포시 상효동 산 1-2', '제주특별자치도 제주시 첨단로 216-19', '제주특별자치도 제주시 첨단로7길 23' ]; var geocoder = new kakao.maps.services.Geocoder(); const addressSearch = address => { return new Promise((resolve, reject) => { geocoder.addressSearch(address, function(result,…

그리고 마커 개수가 많아지면 지도가 느려질 수 있습니다.
서버 연산으로 지도 범위에 포함되는 주소 데이터만 가져올 수 있는 방법도 고려해주세요.

클러스터러 대용량 데이터 효율적으로 표시할수 있는 방법이 있을까요

천개 이상만 넘어가도 일단 마커를 생성하고 위치를 갱신하는 자바스크립트의 연산량 자체가 절대적으로 많기 때문에 느릴 수 밖에 없습니다. 그 연산이 끝나기 전까지 사용자는 아무것도 못하는 먹통 브라우저를 마냥 기다릴 수 밖에 없죠. 사실 이런 연산들을 클라이언트에 위임하는 것은 사실 매우 비효율적입니다. 최근 브라우저 환경이 좋아졌다고는 하지만 자바스크립트 연산은 비교적 느린편이며 브라우저는 자바스크립트 연산 말고도 후에 이어지는 레이아웃 갱신, 페인팅 등등의 렌더링 작업도 같이 해야하므로 처리 비용이 크기 때문입니다. 이런 경우에는 서버에서 연산 후, 클러스터링을 한 데이터를 클라이언트에 내려주는 방법이 가장 효율적입니다. 보통 서버에서의 처리속도가 더 빠르며 혹시라도 서버 연산이 지연되더라도 클라이언트에서는 응답을 받기 전까지 UI로 사용자에게 피드백을 줄 수 있으므로 사용성을 크게 해치지 않는 장점이 있기 때문입니다.