[KAKAO MAP] 카카오 지도 API 활용하기: 편의점 위치 표시 및 상세 정보 구현 🚀

1️⃣ 카카오 지도 API Key 발급받기

• 카카오 개발자 사이트에 접속하여 애플리케이션을 등록하고, 필요한 API 키를 발급받아야 함

• 카카오 개발자 포털에서 애플리케이션을 새로 생성한 후,

[내 애플리케이션] > [앱 설정] > [플랫폼] > [Web 플랫폼 추가]를 통해 사이트 도메인을 등록

 

2️⃣ HTML 파일에 지도 삽입

• 기본 HTML 구조 내에 카카오 지도를 삽입

• <div> 태그를 사용하여 지도가 표시될 영역을 지정하고, <script> 태그를 통해 카카오 지도 API를 로드

<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY&libraries=services"></script>

 

3️⃣ 지도에 편의점 위치 표시

• 자바스크립트를 사용하여 지도에 편의점의 위치를 마커로 추가

• 지도 객체를 먼저 생성하고, 편의점 데이터가 포함된 배열을 반복 처리하여 각 위치에 marker와 infowindow를 추가

var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 편의점 위치 데이터 배열
var positions = [
    {
        title: '롯데리아 명동점',
        latlng: new kakao.maps.LatLng(37.563619, 126.985237)
    },
    {
        title: '세븐일레븐 종로3가점',
        latlng: new kakao.maps.LatLng(37.570841, 126.991957)
    }
];

// 마커 이미지의 이미지 주소
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png'; 

for (var i = 0; i < positions.length; i ++) {
    // 마커 이미지의 이미지 크기
    var imageSize = new kakao.maps.Size(24, 35); 
    
    // 마커 이미지 생성   
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 

    // 마커 생성
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀
        image : markerImage // 마커 이미지 
    });
}

 

4️⃣ 사용자 인터랙션 강화

• 사용자가 마커를 클릭할 때 인포윈도우에 편의점의 이름과 주소를 보여주는 기능을 추가

• kakao.maps.event.addListener 메서드를 사용하여 마커 클릭 이벤트를 처리

 

5️⃣ 사용자의 현재 위치 가져오기

HTML5의 Geolocation API를 사용하여 사용자의 현재 위치를 확인

if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude, // 위도
            lon = position.coords.longitude; // 경도
        var locPosition = new kakao.maps.LatLng(lat, lon); // 사용자의 현재 위치를 생성

        map.setCenter(locPosition); // 지도의 중심을 사용자의 위치로 이동
    });
} else {
    alert('이 브라우저에서는 Geolocation을 지원하지 않습니다.');
}

 

6️⃣ 주변 편의점 찾기

사용자의 현재 위치를 기반으로 주변 편의점을 찾는 기능을 구현

카카오 지도 API의 키워드 검색을 활용하여 주변 편의점을 검색

아래 코드는 키워드로 '편의점'을 검색하여 그 결과를 지도에 표시하는 방법

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

// 키워드로 장소를 검색
ps.keywordSearch('편의점', placesSearchCB, {
    location: locPosition,
    radius: 500 // 500m 반경 내 검색
});

// 장소 검색이 완료됐을 때 호출되는 콜백함수
function placesSearchCB(data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {
        var bounds = new kakao.maps.LatLngBounds();

        for (var i=0; i<data.length; i++) {
            displayMarker(data[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('검색 결과가 존재하지 않습니다.');
    } else if (status === kakao.maps.services.Status.ERROR) {
        alert('검색 결과 중 오류가 발생했습니다.');
    }
}

// 검색 결과 목록과 마커를 표출하는 함수
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);
    });
}