Home IT/WEB 카카오맵(kakao maps) 여러개 마커(marker) 만들기

카카오맵(kakao maps) 여러개 마커(marker) 만들기

카카오맵 API 를 이용하여 지도에 여러개 마커를 만드는 방법에 대해서 알아보겠습니다.

inline ad

카카오맵 API 는 아래에 공식문서를 확인하셔서 참고하시면 됩니다.
http://apis.map.kakao.com/web/sample/multipleMarkerImage/

우선 http://apis.map.kakao.com/ 사이트에 들어가셔서 API 키 를 발급 받으셔야 합니다.

<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키삽입"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.250141, 126.414340), // 지도의 중심좌표
        level: 6 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
 
// 마커를 표시할 위치와 title 객체 배열입니다 
var positions = [
    {
        title: '제주여미지식물원', 
        latlng: new kakao.maps.LatLng(33.252596, 126.414348)
    },
    {
        title: '중문색달해변', 
        latlng: new kakao.maps.LatLng(33.244993, 126.411661)
    },
    {
        title: '퍼시픽랜드 수조관', 
        latlng: new kakao.maps.LatLng(33.244221, 126.417223)
    },
    {
        title: '천재연폭포',
        latlng: new kakao.maps.LatLng(33.250542, 126.416746)
    }
];

// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://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 // 마커 이미지 
    });
}
</script>

구글지도를 이용해서 위도, 경도 찾기

우선 지도의 중심좌표를 바꾸면 되는데 구글지도를 활용하여 위도, 경도를 찾을 수 있습니다.
구글 지도 : https://www.google.co.kr/maps

원하는 위치를 오른쪽 마우스를 클릭하면 아래에 위도 경도의 위치를 확인할 수 있습니다. 이 위치 값을 지도의 중심좌표 값을 변경하면 됩니다.

구글지도에서 위도, 경도 찾기

mapOption = {
center: new kakao.maps.LatLng(33.250141, 126.414340), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};

그리고 var positions 변수에 마커를 표시할 위치와 TITLE 을 변경해주면 됩니다. 저의 집 근처에 있는 중문 관광지를 입력해봤습니다. 그리고 지도의 확대 레벨을 조절해가면서 전체 마커가 다 보이는지 확인하시면 됩니다.

마커 이미지를 변경하고자 하시면 var imageSrc 변수에 이미지 URL 을 입력하시면 됩니다.

아래는 카카오 맵 API 를 활용하여 여러개 마커가 보이는 걸 확인하실 수 있습니다.

RECENT POSTS

[vscode]이 시스템에서 스크립트를 실행할 수 없으므로 nest.ps1 파일을 로드할 수 없습니다.

nest : 이 시스템에서 스크립트를 실행할 수 없으므로 C:UsersmarkettradersAppDataRoamingnpmnest.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1 이 오류는 PowerShell 실행 정책 관련...

[nest.js]nest.js, node.js, 프로젝트 생성 방법

Node.js 설치 Node.js의 공식 웹사이트(nodejs.org)에서 Windows용 인스톨러를 다운로드합니다. 다운로드한 인스톨러를 실행하여 설치합니다. Node Version Manager(NVM)을 사용하는 경우 nvm install node # 최신 버전 설치 nvm install 14 #...

[광주]위파크 더 센트럴 분양주택 분양안내

기본정보 공급위치: 광주광역시 서구 풍암동 10-12번지 일원 공급번호: 2023000351 공급규모: 625세대 분양/입주: 분양 2023-08-04 / 입주 2026-08 건설사: (주)호반건설 (주)라인건설 분양문의: 1670-5676 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.wepark-central.co.kr/ 모집공고문 보기 청약일정 모집공고일: 2023-08-04 청약접수: 2023-08-14...

[강원]힐스테이트 속초 분양주택 분양안내

기본정보 공급위치: 강원특별자치도 속초시 금호동 622-40 일원 공급번호: 2023000337 공급규모: 925세대 분양/입주: 분양 2023-07-21 / 입주 2026-05 건설사: 현대엔지니어링(주) 분양문의: 033-947-0925 분양정보: 분양정보 자세히보기 홈페이지 주소: http://www.hillstate-sokcho.co.kr 모집공고문 보기 청약일정 모집공고일: 2023-07-21 청약접수: 2023-07-31 ~...