키워드로 장소검색하고 목록으로 표출하기 예제를 활용하던 중 Pagination이 작동되지 않는 것 같아 질문드립니다.
콩카페 이태원점 밑에 페이지 번호가 표시되어야 하지만 뜨지 않습니다.
검색은 예제와 같이 ‘이태원 맛집’ 으로 검색한 결과입니다.
코드는 아래와 같습니다.
var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
center: new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
});
var clickedOverlay = null;
var selectedMarker = null;
var markers = [];
// 장소 검색 객체 생성
var ps = new kakao.maps.services.Places();
// 키워드 장소 검색
searchPlaces();
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
if(!keyword.replace(/^\s+|\s+$/g, "")){
alert('키워드를 입력해주세요');
return false;
}
ps.keywordSearch(keyword, placesSearchCB);
}
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
displayPlaces(data);
displayPagination(pagination);
}
else if (status === kakao.maps.services.Status.ZERO_RESULT) {
alert('검색 결과가 존재하지 않습니다.');
return;
}
else if (status === kakao.maps.services.Status.ERROR) {
alert('검색 결과 중 오류가 발생했습니다.');
return;
}
}
function displayPlaces(places) {
var listEl = document.getElementById('placesList'),
menuEl = document.getElementById('search_area'), //주의!
fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds(),
listStr = '';
removeAllChildNods(listEl);
removeMarker();
for (var i=0; i<places.length; i++){
var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
marker = addMarker(placePosition, i),
itemEl = getListItem(i, places[i]);
bounds.extend(placePosition);
fragment.appendChild(itemEl);
}
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
map.setBounds(bounds);
}
function getListItem(index, places){
var el = document.createElement('li'),
itemStr = '<span class= "markerbg marker_' + (index+1) + '"></span>' +
'<div class= "info">' +
' <h5>' + places.place_name + '</h5>';
if (places.road_address_name) {
itemStr += ' <span>' + places.road_address_name + '</span>' +
' <span class= "jibun gray">' + places.address_name + '</span>';
}
else {
itemStr += ' <span>' + places.address_name + '</span>';
}
itemStr += ' <span class= "tel">' + places.phone + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
function addMarker(position, idx, title) {
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png',
imageSize = new kakao.maps.Size(36,37),
imgOptions = {
spriteSize : new kakao.maps.Size(36, 691),
spriteOrigin : new kakao.maps.Point(0, (idx*46) + 10),
offset : new kakao.maps.Point(13,37)
},
markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new kakao.maps.Marker({
position : position,
image: markerImage
});
marker.setMap(map);
markers.push(marker);
return marker;
}
function removeMarker() {
for (var i = 0; i < markers.length; i++){
markers[i].setMap(null);
}
markers=[];
}
function displayPagination(pagination) {
var paginationEl = document.getElementById('pagination'),
fragment = document.createDocumentFragment(),
i;
while (paginationEl.hasChildNodes()) {
paginationEl.removeChild (paginationEl.lastChild);
}
for (i=1; i<=pagination.last; i++) {
var el = document.createElement('a');
el.href = "#";
el.innerHTML = i;
if (i===pagination.current) {
el.className = 'on';
} else {
el.onclick = (function(i) {
return function() {
pagination.gotoPage(i);
}
})(i);
}
fragment.appendChild(el);
}
paginationEl.appendChild(fragment);
}
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild(el.lastChild);
}
}