Cannot read property 'addListener' of undefined

지도 이동시에 중심 좌표를 받아오려고 addListener를 추가했는데
"Cannot read property ‘addListener’ of undefined" 이에러가 발생합니다…
appKey부분 삭제한 소스 아래에 첨부합니다.
왜 해당 에러가 발생하는지 모르겠네요…

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}" /> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=&libraries=services,clusterer,drawing"></script>
<title>Insert title here</title>
</head>

<body>
<div id="map" style="width:100%;height:400px;"></div>
<input type="button" id="refresh" value="이 지역 검색" onclick="refresh()">
<p id="result"></p>
<script>
	var map;
	var infowindow;

	navigator.geolocation.getCurrentPosition(function(position){
		 var latitud = position.coords.latitude;
         var longitude = position.coords.longitude;
		
		//마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
		infowindow = new kakao.maps.InfoWindow({zIndex:1});
		
		var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
		var options = { //지도를 생성할 때 필요한 기본 옵션
			center: new kakao.maps.LatLng(latitud, longitude), //지도의 중심좌표.
			level: 3 //지도의 레벨(확대, 축소 정도)
		};
		
		map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
		
		// 장소 검색 객체를 생성합니다
		var ps = new kakao.maps.services.Places(map); 

		// 카테고리로 은행을 검색합니다
		ps.categorySearch('PM9', placesSearchCB, {useMapBounds:true}); 
	});

	// 키워드 검색 완료 시 호출되는 콜백함수 입니다
	function placesSearchCB (data, status, pagination) {
	    if (status === kakao.maps.services.Status.OK) {
	        for (var i=0; i<data.length; i++) {
	            displayMarker(data[i]);    
	        }       
	    }
	}

	// 지도에 마커를 표시하는 함수입니다
	function displayMarker(place) {
	    // 마커를 생성하고 지도에 표시합니다
	    var marker = new kakao.maps.Marker({
	        map: map,
	        position: new kakao.maps.LatLng(place.y, place.x) 
	    });

	    // 마커에 클릭이벤트를 등록합니다
	    kakao.maps.event.addListener(marker, 'click', function() {
	        // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
	        infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
	        infowindow.open(map, marker);
	    });
	}
	
	function refresh(){
		alert("click");
	}
	
	// 지도가 이동, 확대, 축소로 인해 중심좌표가 변경되면 마지막 파라미터로 넘어온 함수를 호출하도록 이벤트를 등록합니다
	kakao.maps.event.addListener(map, 'center_changed', function() {
		//alert("1111111");
	    // 지도의  레벨을 얻어옵니다
	    var level = map.getLevel();

	    // 지도의 중심좌표를 얻어옵니다 
	    var latlng = map.getCenter(); 

	    var message = '<p>지도 레벨은 ' + level + ' 이고</p>';
	    message += '<p>중심 좌표는 위도 ' + latlng.getLat() + ', 경도 ' + latlng.getLng() + '입니다</p>';

	    var resultDiv = document.getElementById("result");
	    resultDiv.innerHTML = message;

	});
</script>
</body>
</html>

navigator.geolocation.getCurrentPosition
여기 안으로 addListener를 옮겨서 해결했습니다.

1개의 좋아요