[카카오 맵 API] 데이터베이스에서 주소 데이터 받아서 지도에 마커 찍기, 키워드 검색하기

설명

데이터베이스 상점 테이블에는 주소 데이터가 있다.

이걸 위도, 경도로 변환하고

그걸 검색해서 마커를 찍도록 해야 한다.

 

마커를 여러 개 찍어야 하고

마커를 클릭했을 때 뜨는 인포윈도우도 달아줬다.

인포윈도우에는 각 상점의 이름이 보인다.

 

따로 만든 검색창에서 입력한 키워드로 지도에서 검색하게 했고

검색한 위치 주변에 내가 찍어둔 마커들이 보인다.

 

 

 

에러 원인

처음에 자꾸 알 수 없는 에러가 나서 진행을 하지 못했는데

원인은 변수에 있었다..

도큐먼트 레디 밖에서 먼저 선언해서 전역 변수로 만들어주고 써야 했다. 

 

 

 

전체 코드

<script type="text/javascript">
var map;
var mapContainer;
var mapOption;
var ps;

$(document).ready(function() {
	// 마커 표시
	reloadMarker();
	  
	//검색
	$(".search_wrapper.active").on("click", "#submitBtn", function() {
		searchPlaces();
	});
}); // document ready end

// 상점 마커 표시 Ajax
function reloadMarker(){
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "MainAjax",
		type : "POST",
		datatype : "json",
		data : params,
		success : function(res){
			drawMarker(res.mMarker);
		},
		error : function(request, status, error){
			console.log(request.responseText);
		}
	});
}

// 지도 생성, 마커 표시
function drawMarker(mMarker) {
	if(map == null) {
		mapContainer = document.getElementById('map'); //지도 표시할 div
		mapOption = {
		   center: new kakao.maps.LatLng(37.5666805, 126.9784147), //지도의 중심 좌표 (서울 시청)
		   level: 3 //지도의 확대 레벨
		};   
		
		//지도 생성
		map = new kakao.maps.Map(mapContainer, mapOption);
		
		// 장소 검색 객체
		ps = new kakao.maps.services.Places(); 
	}
	
	// 마커 이미지 주소
	var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
	// 마커 이미지의 이미지 크기
    var imageSize = new kakao.maps.Size(24, 35); 
    // 마커 이미지 생성
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
	
	// 주소-좌표 변환 객체
	var geocoder = new kakao.maps.services.Geocoder();
    
	mMarker.forEach(function(data) {
		// 주소로 좌표 검색
		geocoder.addressSearch(data.MK_ADR, function(result, status) {
			if (status === kakao.maps.services.Status.OK) {
				var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
				
				// 결과값으로 받은 위치를 마커로 표시합니다
	            var marker = new kakao.maps.Marker({
	            	title: data.MK_NAME,
	                map: map,
	                position: coords,
	                image : markerImage // 마커 이미지 
	            });
	
				// 인포윈도우 닫기 버튼
	    		var iwRemoveable = true;
			    
				// 인포윈도우로 장소에 대한 설명 표시
		        var infowindow = new kakao.maps.InfoWindow({
		            content : '<div id="goInfo">'+ data.MK_NAME +'</div>',
				    removable : iwRemoveable,
				    zIndex : 1
		        });
				
				// 마커에 클릭이벤트를 등록
		        kakao.maps.event.addListener(marker, 'click', function() {
		        	// 다른 열린 인포윈도우는 닫게 함
					$("img[alt='close']").click();
					// 마커 위에 인포윈도우 표시
					infowindow.open(map, marker);  
		        });
			}
		})
	});
}

//키워드 검색 요청
function searchPlaces() {
	if(!$(".search_wrapper.active").children().children().children("#keyword").val().replace(/^\s+|\s+$/g, "")) {
		alert("키워드를 입력해주세요.");
		return false;
	}
	ps.keywordSearch($("#keyword").val(), placesSearchCB);
}

//키워드 검색 완료 시 호출되는 콜백함수
function placesSearchCB (data, status) {
    if (status === kakao.maps.services.Status.OK) {
        // 검색된 장소 위치를 기준으로 지도 범위 재설정
        // LatLngBounds 객체에 좌표 추가
        var bounds = new kakao.maps.LatLngBounds();

        for (var i=0; i<data.length; i++) {
            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        }       
        map.setBounds(bounds);
    }  else if (status === kakao.maps.services.Status.ZERO_RESULT) {
        alert('검색 결과가 존재하지 않습니다.');
        return;
    } else if (status === kakao.maps.services.Status.ERROR) {
        alert('검색 결과 중 오류가 발생했습니다.');
        return;
    }
} 
</script>