안녕하세요 지도 api를 이용해서 카테고리 검색 시 마커로 표시하도록 설정해두었는데요,
childnodes 부분에서 계속해서 properties of null 문제가 발생하였습니다.
카카오 맵에서 직접 해보기로 되는것을 확인하고 vs code에 넣었는데도 같은 에러가 발생하네요…
혹시 몰라서 body 부분을 올려봅니다.
<div class="map_wrap">
<div id="map" style="width:750px;height:750px;position:relative;overflow:hidden;"></div>
<div id="menu" class="bg_white">
<div class="option">
<form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" value="" id="keyword" size="15">
<button type="submit">검색하기</button>
</form>
</div>
</div>
<hr>
<ul id="placeList"></ul>
<div id="pagination"></div>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d7321a4ca490a773781ccb79d6d95762&libraries=services"></script>
<script>
var markers = [];
var mapContainer = document.getElementById(‘map’),
mapOption = {
center: new window.kakao.maps.LatLng(35.229, 126.847),
level: 3
};
var map = new window.kakao.maps.Map(mapContainer, mapOption);
var mymarkerPosition = new window.kakao.maps.LatLng(35.229, 126.847);
var mymarker = new kakao.maps.Marker({
position: mymarkerPosition
});
mymarker.setMap(map);
var ps = new window.kakao.maps.services.Places();
var infowindow = new window.kakao.maps.InfoWindow({zIndex:1});
searchPlaces();
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
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('menu'),
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);
(function(marker, title) {
kakao.maps.event.addListener(marker, 'mouseover', function() {
displayInfowindow(marker, title);
});
kakao.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
itemEl.onmouseover = function () {
displayInfowindow(marker, title);
};
itemEl.onmouseout = function () {
infowindow.close();
};
})(marker, places[i].place_name);
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 displayInfowindow(marker, title) {
var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild (el.lastChild);
}
}