// 지도 API
var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
center : new daum.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
level : 13 // 지도의 확대 레벨
});
var clusterer = new daum.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10, // 클러스터 할 최소 지도 레벨
disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
});
var data = [<?=$positions?>];
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
var markers = data.positions.map(function(i, position) {
return new daum.maps.Marker({
position : new daum.maps.LatLng(position.lat, position.lng)
});
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
// 마커 클러스터러에 클릭이벤트를 등록합니다
daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {
// 현재 지도 레벨에서 1레벨 확대한 레벨
var level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
});
오픈 API기초로 작성한 코드인데요…
json 샘플이 아닌 DB에서 좌표를 배열로 넘겨받아 마커를 찍으려고 합니다.
근데 map(function(i, position) { <<= 이 부분에서 자꾸 map을 인식 못하는 에러가 납니다.
Uncaught TypeError: Cannot read property ‘map’ of undefined
이 에러가 나는데 왜 그럴까요?