카카오 지도 생성기 WEB API : 여러 개 마커가 있는 지도 생성, 확인 후 임베드 하기 - 여행 경로 용도

Kakao Map Maker Type.A

Kakao Map API : 여러개 마커가 있는 지도 생성 후 임베드하기 - 여행 일정 짜기 도구 및 기타

티스토리나 웹페이지에

여러 개 마커가 있는 지도 쉽게 만들기 위해 Kakao Map API를 사용하여 생성한 코드를 공유

합니다. 지도 미리보기는 최대 5개까지 지원하도록 만들었습니다. 이 코드를 사용하기 위해서는 KakaoMAP API 키를 발급받아야 합니다.

 

사전 안내 사항

Kakao Map API

이 코드는 Kakao Map API를 사용합니다. 이 코드를 웹사이트나, 티스토리와 같은 블로그에서 사용하기 위해서 KaKaoMap API키를 받으셔야 합니다. API 키를 받는 방법은 아래의 링크를 참조해주세요.

Kakao Maps API Key 받는 방법 및 시작하기

맵 스타일, 기능

이 포스트에서 생성하는 지도는 아래와 같은 스타일입니다. 이런 스타일이 필요하시면 계속해서 참고부탁드립니다. 

• 지도/스카이뷰 변경을 지원합니다.
• 초기화면버튼을 지원합니다.
• 마커 또는 오버레이를 선택하면, 새창으로 선택된 장소가 카카오맵으로 연동됩니다.

지도 예시

부탁드립니다.

생성된 지도에는 하단에 이 포스트의 링크가 포함되어 있습니다. 이 링크는 좋은 컨텐츠와 유용한 정보를 올리기 위한 힘이될 수 있으니 삭제하지 말아주시길 부탁드립니다.

저는 개발자가 아니고, 제가 사용할 필요성이 있어 어거지로 코드를 작성하였습니다. 제가 예상하지 못하는 문제가 많을 수 있으니, 문제점을 발견하거나 요구사항이 있으시면 댓글로 안내부탁드립니다. 가능한 한도내에서 반영하고자 합니다. 

 

나만의 지도 만들기

키워드 입력하기

키워드를 입력하실 때 장소의 고유명사를 사용하시길 추천드립니다. 고유명사로 검색이 어려운 경우 아래와 같이 지역 + 장소 이름을 검색하면 쉽게 원하는 지도 형태를 얻을 수 있습니다. 

• 예시
  • 서울시청(O)
  • 맥도날드(X)
  • 수내동 맥도날드(O)

키워드를 입력 후 지도 불러오기 버튼을 클릭하면, 지도 미리보기가 생성됩니다. 원하는 결과가 맞는지 확인하고, 결과가 다른 경우 키워드를 수정해보세요.

👉 키워드1  

👉 키워드2  

👉 키워드3  

👉 키워드4  

👉 키워드5  

👉 키워드6  

 

지도 미리보기

원하는 지도형태가 맞는지 확인해주세요. 다른 장소가 선택 된 경우 키워드를 조정해주세요.

초기화면으로

👉 Get Custom KakaoMap Code -> Click

공유 코드

키워드 선정이 완료되었으면 아래의 코드의 4번 줄의 inputData 배열의 키워드를 위에서 검색한 키워드로 수정하시면 됩니다. 키워드는 따옴표로 묶어 주셔야 합니다. 코드 수정이 완료되면 HTML로 해당 코드를 입력하시면 됩니다.

• 예시
  • var inputData = ['서울역', '부산역', '대전역']

<div id="mapwrap" style="overflow:hidden;"><div id="map" style="position:relative; width: 100%; height: 350px;"><p class="btn-init" onclick="setBounds()" style="position: absolute;right: 7px;bottom: 7px;
color: #666666;z-index: 10;font-size: 12px;font-weight: bold;background: white;box-shadow: 1px 1px 1px 1px #AAAAAA;padding: 0px 7px;border-radius: 4px;cursor: pointer;">초기화면으로</p></div><div style="width: 100%;background-color: #CCCCCC;"><p style="text-align: right;margin-top: 0px;"><a href="https://juahnpop.tistory.com/255" target="_blank" style="color: #751278;font-size: 14px;font-weight: bold;padding-right: 8px;">👉 Get Custom KakaoMap Code -&gt; Click</a></p></div></div>
<script>
    var inputData = ['지역1', '지역2', '지역3', '지역4', '지역5']
    var mapContainer = document.getElementById('map'),
        mapOption = {
            center: new kakao.maps.LatLng(37.54699, 127.09598),
            level: 3
        };
    var map = new kakao.maps.Map(mapContainer, mapOption);  
    var count = 0;
    var ps = new kakao.maps.services.Places();
    var bounds = new kakao.maps.LatLngBounds();
    var mapTypeControl = new kakao.maps.MapTypeControl();
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
    var imageSrc =
        "https://tistory2.daumcdn.net/tistory/3056305/skin/images/map-marker-red.png",    
        imageSize = new kakao.maps.Size(35, 35),
        imageOption = {
            offset: new kakao.maps.Point(17, 40)
        };
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)
    if (inputData != null) {
        kewwordSearch(inputData[count]);
    }
    function kewwordSearch(keword) {
        ps.keywordSearch(keword, placesSearchCB);
        count = count + 1;
    }
    function placesSearchCB(data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
            displayMarker(data[0]);
            bounds.extend(new kakao.maps.LatLng(data[0].y, data[0].x));
            if (count < inputData.length) {
                kewwordSearch(inputData[count])
            } else if (count == inputData.length) {
                setBounds();
                applyStyle();
            }
        }
    }
    function displayMarker(place) {
        var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
            image: markerImage
        });
        kakao.maps.event.addListener(marker, 'click', function () {
            var position = this.getPosition();
            var url = 'https://map.kakao.com/link/map/' + place.id;
            window.open(url, '_blank');
        });
        var content =
            '<div class="customoverlay" style="position: relative;bottom: 76px;border-radius: 6px;border: 1px solid #ccc;border-bottom: 2px solid #ddd;float: left;">' +
            '  <a href="https://map.kakao.com/link/map/' + place.id + '"' +
            ' target="_blank" style="display: block;text-decoration: none;color: #666666;text-align: center;border-radius: 6px;font-size: 14px;font-weight: bold;overflow: hidden;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;">' +
            '    <span class="title" style="display: block;text-align: center;background: #fff;margin-right: 35px;padding: 8px 10px;font-size: 13px;font-weight: bold;">' +
            count + '. ' + place.place_name + '</span>' +
            '  </a>' +
            '</div>';
        var customOverlay = new kakao.maps.CustomOverlay({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
            content: content,
            yAnchor: 0.11
        });
    }
    function setBounds() {
        map.setBounds(bounds, 90, 30, 10, 30);
    }
</script>

끝까지 읽어 주셔서 감사합니다.^^

관련포스트

🤞 카카오맵 API 관련글 목록 보기

🤞 카카오맵 생성기 목록 보기