맵을 축소시키면 위 화면처럼 계속 로딩만된다고 표시됩니다. 어디서 잘못됫을까요
var placeOverlay = new daum.maps.CustomOverlay({zIndex:1}),
contentNode = document.createElement(‘div’);
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places(map);
//지도에 idle 이벤트를 등록합니다
daum.maps.event.addListener(map, ‘idle’);
//커스텀 오버레이의 컨텐츠 노드에 css class를 추가합니다
contentNode.className = ‘placeinfo_wrap’;
//커스텀 오버레이의 컨텐츠 노드에 mousedown, touchstart 이벤트가 발생했을때
//지도 객체에 이벤트가 전달되지 않도록 이벤트 핸들러로 daum.maps.event.preventMap 메소드를 등록합니다
addEventHandle(contentNode, ‘mousedown’, daum.maps.event.preventMap);
addEventHandle(contentNode, ‘touchstart’, daum.maps.event.preventMap);
//커스텀 오버레이 컨텐츠를 설정합니다
placeOverlay.setContent(contentNode);
// 카테고리로 은행을 검색합니다
ps.categorySearch(‘PM9’, placesSearchCB, {useMapBounds:true});
//엘리먼트에 이벤트 핸들러를 등록하는 함수입니다
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
} else {
target.attachEvent(‘on’ + type, callback);
}
}
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === daum.maps.services.Status.OK) {
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
}
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: new daum.maps.LatLng(place.y, place.x)
});
// 마커와 검색결과 항목을 클릭 했을 때
// 장소정보를 표출하도록 클릭 이벤트를 등록합니다
(function(marker, place) {
daum.maps.event.addListener(marker, ‘click’, function() {
displayPlaceInfo(place);
});
})(marker, place);
}
//마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, order) {
var imageSrc = ‘http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png’, // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new daum.maps.Size(27, 28), // 마커 이미지의 크기
imgOptions = {
spriteSize : new daum.maps.Size(72, 208), // 스프라이트 이미지의 크기
spriteOrigin : new daum.maps.Point(46, (order*36)), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new daum.maps.Point(11, 28) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
},
markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new daum.maps.Marker({
position: position, // 마커의 위치
image: imageSrc
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
return marker;
}
//클릭한 마커에 대한 장소 상세정보를 커스텀 오버레이로 표시하는 함수입니다
function displayPlaceInfo (place) {
var content = ‘
’ ’ + place.place_name + ‘’;
if (place.road_address_name) {
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
} else {
content += ' <span title="' + place.address_name + '">' + place.address_name + '</span>';
}
content += ' <span class="tel">' + place.phone + '</span>' +
'</div>' +
'<div class="after"></div>';
contentNode.innerHTML = content;
placeOverlay.setPosition(new daum.maps.LatLng(place.y, place.x));
placeOverlay.setMap(map);
}