[인프런] 맛집지도 만들기 (9)

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

카카오맵 API

지도 생성 & 확대 축소 컨트롤러, 더미 데이터 준비하기

지도 생성 & 확대 축소 컨트롤러

지도에 컨트롤 올리기 https://apis.map.kakao.com/web/sample/addMapControl/

• 위 링크에서 코드를 복사해 가져온 후, 필요한 부분만 사용.

 

• 지도의 확대 축소 레벨을 원하는 정도로 바꿔 준다.
• 지도의 중심 좌표 부분을 바꿔 주기 위해 구글 지도에서 원하는 위치의 위도 경도 데이터를 가져온다.

Google Maps

 

script.js

/***********************************************************
1. 지도 생성 & 확대 축소 컨트롤러
*/
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new kakao.maps.LatLng(37.54, 126.96), //지도의 중심좌표.
    level: 8 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

/* 스카이뷰 부분
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
*/

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

 

 

 

 

더미 데이터 준비하기

서버에 저장되어 있는 맛집 데이터를 불러오는 방식을 아직 사용하지 못하기 때문에, 로컬 상에서 미리 지정하여 더미 데이터를 만들어 놓는다.

 

음식점의 이름, 주소, 영상 링크, 카테고리를 지정하여 더미 데이터를 생성한다.

 

script.js

/**********************************************************
2. 더미데이터 준비하기 (제목, 주소, url, 카테고리)
*/
const dataSet = [
    {
        title: "희락돈까스",
        address: "서울 영등포구 양산로 210",
        url: "https://www.youtube.com/watch?v=1YOJbOUR4vw&t=88s",
        category: "양식",
    },
    {
        title: "즉석우동짜장",
        address: "서울 영등포구 대방천로 260",
        url: "https://www.youtube.com/watch?v=1YOJbOUR4vw&t=88s",
        category: "한식",
    },
    {
        title: "아카사카",
        address: "서울 서초구 서초대로74길 23",
        url: "https://www.youtube.com/watch?v=1YOJbOUR4vw&t=88s",
        category: "일식",
    },
];

 

 

 

 

카카오맵에 여러 개의 맛집 위치 찍는 방법

여러개 마커 표시하기 https://apis.map.kakao.com/web/sample/multipleMarkerImage/

 

script.js

/***********************************************************
3. 여러개 마커 찍기
   주소 - 좌표 변환
*/

for (var i = 0; i < positions.length; i ++) {
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
    });
}

 

dataSet에서 생성한 데이터의 address 부분을 위도 경도로 변환해 positions에 넣어 줘야 한다.

 

 

 

주소로 장소 표시하기 https://apis.map.kakao.com/web/sample/addr2coord/

 

script.js

/***********************************************************
3. 여러개 마커 찍기
   주소 - 좌표 변환
*/

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

for (var i = 0; i < dataSet.length; i ++) {
    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(dataSet[i].address, 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({
                map: map, // 마커를 표시할 지도
                position: dataSet[i].latlng, // 마커를 표시할 위치
            });
        } 
    });    
}

Geocoder를 가져오지 못하는 에러

 

 

 

라이브러리 불러오기 https://apis.map.kakao.com/web/guide/

 

index.html

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=39adfa6fd9c92be4de0a8ff5be4f14c5&libraries=services"></script>

 

 

 

 

콜백 함수 안에 코드가 들어간 형태 개선(비동기 처리)

 

script.js

/***********************************************************
3. 여러개 마커 찍기
   주소 - 좌표 변환
*/

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

//주소-좌표 변환 함수

async function setMap() {
    for (var i = 0; i < dataSet.length; i ++) {
        let coords = await getCoordsByAddress(dataSet[i].address); //dataSet.address 값을 넘김
        console.log(coords);

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: coords, // 마커를 표시할 위치
        });
    }
}

function getCoordsByAddress(address) {
    return new Promise((resolve, reject) => {
        // 주소로 좌표를 검색합니다
        geocoder.addressSearch(address, function(result, status) {
            // 정상적으로 검색이 완료됐으면 
            if (status === kakao.maps.services.Status.OK) {
                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                resolve(coords);
                return;
            }
            reject(new Error("getCoordsByAddress Error: not valid Address"));
        });    
    })
}

setMap(); //setMap 함수 호출

 

 

 

 

맛집 클릭 시 상세 조회 + 유튜브 섬네일 따기, 지도 중심 이동

맛집 클릭 시 상세 조회(infowindow 만들기)

여러개 마커에 이벤트 등록하기1 https://apis.map.kakao.com/web/sample/multipleMarkerEvent/

 

script.js

/******************************************************************************
4. 마커에 인포윈도우 붙이기
   마커에 클릭 이벤트로 인포윈도우 https://apis.map.kakao.com/web/sample/multipleMarkerEvent/
   url에서 섬네일 따기
   클릭한 마커로 지도 센터 이동 https://apis.map.kakao.com/web/sample/moveMap/
*/

function getContent(data) {
    // 인포윈도우 가공하기
    return `
    <div class="infowindow">
        <div class="infowindow-img-container">
            <img src="" class="infowindow-img">
        </div>
        <div class="infowindow-body">
            <h5 class="infowindow-title">할머니집</h5>
            <p class="infowindow-address">서울특별시 중구 명동3길 42</p>
            <a href="" class="infowindow-btn" target="_blank">영상 이동</a> <!-- 새 창에서 열리게끔 target="_blank" -->
        </div>
    </div>
    `;
}

async function setMap() {
    for (var i = 0; i < dataSet.length; i ++) {
        let coords = await getCoordsByAddress(dataSet[i].address); //dataSet.address 값을 넘김
        console.log(coords);

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: coords, // 마커를 표시할 위치
        });

         // 마커에 표시할 인포윈도우를 생성합니다 
        var infowindow = new kakao.maps.InfoWindow({
            content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용
        });

        // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
        // 이벤트 리스너로는 클로저를 만들어 등록합니다 
        // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
        kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
        kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
    }
}

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        infowindow.open(map, marker);
    };
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

 

 

map.css 생성.

 

map.css

/* 인포윈도우 설정 */
.infowindow {
    width: 25rem;
    border: 1px solid black;
    border-radius: 5px;
    background-color: white;
}

.infowindow-img-container {
    width: 100%;
    overflow: hidden;
}

.infowindow-img {
    width: 100%;
}

.infowindow-title {
    font-size: 2rem;
}

.infowindow-address {
    font-size: 1.6rem;
}

.infowindow-btn {
    font-size: 1.6rem;
}

 

index.html

<link rel="stylesheet" href="map.css" />

 

 

 

유튜브 섬네일 따기

 

script.js

/******************************************************************************
4. 마커에 인포윈도우 붙이기
   마커에 클릭 이벤트로 인포윈도우 https://apis.map.kakao.com/web/sample/multipleMarkerEvent/
   url에서 섬네일 따기
   클릭한 마커로 지도 센터 이동 https://apis.map.kakao.com/web/sample/moveMap/
*/

function getContent(data) {
    // 유튜브 섬네일 id 가져오기
    let finUrl = "";
    let replaceUrl = data.url;
    replaceUrl = replaceUrl.replace("https://youtu.be/", "");
    replaceUrl = replaceUrl.replace("https://www.youtube.com/embed/", "");
    replaceUrl = replaceUrl.replace("https://www.youtube.com/watch?v=", "");
    finUrl = replaceUrl.split("&")[0];
    
    // 인포윈도우 가공하기
    return `
    <div class="infowindow">
        <div class="infowindow-img-container">
            <img src="https://img.youtube.com/vi/${finUrl}/mqdefault.jpg" class="infowindow-img"/>
        </div>
        <div class="infowindow-body">
            <h5 class="infowindow-title">${data.title}</h5>
            <p class="infowindow-address">${data.address}</p>
            <a href="${data.url}" class="infowindow-btn" target="_blank">영상 이동</a> <!-- 새 창에서 열리게끔 target="_blank" -->
        </div>
    </div>
    `;
}

async function setMap() {
    for (var i = 0; i < dataSet.length; i ++) {
        let coords = await getCoordsByAddress(dataSet[i].address); //dataSet.address 값을 넘김
        console.log(coords);

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: coords, // 마커를 표시할 위치
        });

         // 마커에 표시할 인포윈도우를 생성합니다 
        var infowindow = new kakao.maps.InfoWindow({
            content: getContent(dataSet[i]), // 인포윈도우에 표시할 내용
        });
        //인포윈도우 생성 때마다 배열에 추가
        infowindowArray.push(infowindow);

        // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
        // 이벤트 리스너로는 클로저를 만들어 등록합니다 
        // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
        kakao.maps.event.addListener(
            marker, "click",
            makeOverListener(map, marker, infowindow));
        kakao.maps.event.addListener(
            map, 'click',
            makeOutListener(infowindow));
    }
}

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow) {
    return function() {
        // 1. 클릭 시 다른 인포윈도우 닫기
        closeInfowindow();
        infowindow.open(map, marker);
    };
}

let infowindowArray = []; //인포윈도우를 관리하는 배열

// 1. 클릭 시 다른 인포윈도우 닫기
function closeInfowindow() {
    for (infowindow of infowindowArray) {
        infowindow.close();
    }
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
function makeOutListener(infowindow) {
    return function() {
        infowindow.close();
    };
}

 

Tip
썸네일 생성 시 mqdefault 옵션을 사용하면 상하 여백 없이 썸네일을 생성할 수 있다.
ex) https://img.youtube.com/vi/LWKf1KFLf3g/mqdefault.jpg 

 

 

 

지도 중심 이동

지도 이동시키기 https://apis.map.kakao.com/web/sample/moveMap/

 

script.js

kakao.maps.event.addListener(
    marker, "click",
    makeOverListener(map, marker, infowindow, coords));

 

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
function makeOverListener(map, marker, infowindow, coords) {
    return function() {
        // 1. 클릭 시 다른 인포윈도우 닫기
        closeInfowindow();
        infowindow.open(map, marker);
        // 2. 클릭한 곳으로 지도 중심 옮기기
        map.panTo(coords)
    };
}

 

 

 

 

카테고리로 데이터를 분류하는 방법

 

 

카테고리 id 부여

 

index.html

<button class="category-item" id="korea">한식</button
><button class="category-item" id="china">중식</button
><button class="category-item" id="japan">일식</button
><button class="category-item" id="america">양식</button
><button class="category-item" id="wheat">분식</button
><button class="category-item" id="meat">구이</button
><button class="category-item" id="sushi">회/초밥</button
><button class="category-item" id="etc">기타</button>

 

 

script.js

setMap(dataSet);

 

//인자로 dataSet을 받게 함
async function setMap(dataSet)

 

//setMap 함수 for문 안에 작성
markerArray.push(marker);

 

/***********************************************
5. 카테고리 분류
*/

//카테고리 객체
const categoryMap = {
    korea: "한식",
    china: "중식",
    japan: "일식",
    america: "양식",
    wheat: "분식",
    meat: "구이",
    sushi: "회/초밥",
    etc: "기타"
};

const categoryList = document.querySelector(".category-list");
categoryList.addEventListener("click", categoryHandler);

function categoryHandler(event) {
    const categoryId = event.target.id;
    const category = categoryMap[categoryId];

    //데이터 분류
    let categorizedDataSet = [];
    for (let data of dataSet) {
        if(data.category === category) {
            categorizedDataSet.push(data);
        }
    }
    //기존 마커 삭제
    closeMarker();

    //기존 인포윈도우 닫기
    closeInfowindow();

    //카테고리 필터링
    setMap(categorizedDataSet);
}

let markerArray = [];
function closeMarker() {
    for(marker of markerArray) {
        marker.setMap(null);
    }
}