Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at I.c.Ud (kakao.js:128)
at new I (kakao.js:27)
at Object. (mapList.do:565) ->커스텀오버레이 생성부분.
at jquery-1.11.0.min.js:2
at Function.map (jquery-1.11.0.min.js:2)
at n.fn.init.map (jquery-1.11.0.min.js:2)
at Object.success (mapList.do:556)
at j (jquery-1.11.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
at x (jquery-1.11.0.min.js:4)
---- 해당 소스 -----
//마커들을 저장할 변수
var markers = $(data.position).map(function(i, position) {
var marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(data.position[i].latitudeAz,data.position[i].longitudeAz),
clickable : true
});
var content = $('<div class ="overlaybox"><span class="left"></span><span class="center")><h5 class="sidoCd">111</h5></span><span class="right"></span></div>');
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
//생성된 마커를 반환합니다.
return marker;
});
// 마커 클러스터러에 클릭이벤트를 등록합니다
// 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
// 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨
var level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
});
//클러스터에 마커들을 저장합니다.
clusterer.addMarkers(markers);
//마커들을 저장할 변수
var markers = $(data.position).map(function(i, position) {
//마커를 하나 새로 만드는데, 위치값을 지정하고 클릭이 가능하게 설정함.
var marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(data.position[i].latitudeAz,data.position[i].longitudeAz),
clickable : true
});
//생성된 마커를 반환합니다.
return marker;
});
console.log(markers);
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="http://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: markers.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
var overlay = new kakao.maps.CustomOverlay({
content: content,
// map: map, <= 이 옵션을 지워주세요. overlay.setMap(map) 한 코드와 같은 의미입니다.
position: markers.getPosition()
});
최적화를 하기 위해서는
커스텀 오버레이를 하나만 만들어서
내부 컨텐츠만 바꿔 사용하는 방법도 있습니다.
