[JavaScript] 카카오 Map API 키워드로 장소검색하기

안녕하세요 이번 게시글에서는 카카오 Map API를 사용해 키워드로 장소 검색할 수 있는 기능을 구현해보겠습니다.

 

카카오 지도를 띄우는 방법은 아래의 게시글을 참고해주세요.

https://stickode.tistory.com/447

[Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기

 

우선 키워드를 검색할 수 있는 from태그를 만들어 줍니다.

         <div>
                <form onsubmit="searchPlaces(); return false;">
                    키워드 : <input type="text" value="" id="keyword" size="15"> 
                    <button type="submit">검색하기</button> 
                </form>
         </div>

장소 검색을 할 수 있는 객체를 생성한 다음. 검색하기 버튼을 눌렀을 때 호출되는 함수를 작성합니다. 

// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();

// 키워드로 장소를 검색합니다
searchPlaces();

// 키워드 검색을 요청하는 함수입니다
function searchPlaces() {

    var keyword = document.getElementById('keyword').value;

    if (!keyword.replace(/^\s+|\s+$/g, '')) {
        alert('키워드를 입력해주세요!');
        return false;
    }

    // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
    ps.keywordSearch( keyword, placesSearchCB); 
}

// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status) {
    if (status === kakao.maps.services.Status.OK) {

        console.log('data', data);

    } else if (status === kakao.maps.services.Status.ZERO_RESULT) {

        alert('검색 결과가 존재하지 않습니다.');
        return;

    } else if (status === kakao.maps.services.Status.ERROR) {

        alert('검색 결과 중 오류가 발생했습니다.');
        return;

    }
}

'사당' 이라는 키워드로 장소 검색이 완료되면 키워드에 맞는 장소들이 array로 반환되며 확인할 수 있는 데이터형식는 다음과 같습니다.

[
    {
        "address_name": "서울 동작구 사당동 134-1",
        "category_group_code": "AT4",
        "category_group_name": "관광명소",
        "category_name": "여행 > 관광,명소 > 테마거리 > 먹자골목",
        "distance": "",
        "id": "2119575152",
        "phone": "",
        "place_name": "이수역꼬치거리",
        "place_url": "http://place.map.kakao.com/2119575152",
        "road_address_name": "",
        "x": "126.981953967038",
        "y": "37.4872392486403"
    },

   {

         ... 

   }

]