[Spring] 카카오 지도 / Kakao Map Web API 마커, 마커 인포윈도우, 마커 이미지 변경

지도 마커란?

마커는 지도에서 특정 위치를 나타내는 표기물로, 사용자가 지도에서 특정 위치를 손쉽게 볼 수 있고, 손쉽게 클릭할 수 있게 하는 도구이다.

 

보통 마커는 클릭 이벤트로, 해당 장소에 대한 정보를 제공해 준다.

 

 

https://apis.map.kakao.com/web/sample/basicMarker/

이 포스팅은 카카오 Map API 공식 가이드를 참고하여 제작하였다.

---

준비하기

카카오 지도 API 

본격적으로 마커를 표기하기에 앞서, 카카오 지도 API를 사용해 보지 않았다면 이 전 게시물을 참고하길 바란다.

 

https://olrlobt.tistory.com/38

[Spring] 카카오 지도 / Kakao Map Web API 사용해보기

 

 

 

구글 지도로 위도와 경도 알아보기

카카오 지도에서는 원하는 위치에 마커를 띄우기 위하여, 위도와 경도를 사용한다.

 

원하는 위치의 위도와 경도를 알아내는 방법에는 여러 가지 방법이 있지만, 가장 간단한 구글 지도를 이용해 보자.

 

https://www.google.com/maps/

Google Maps

 

1. 구글 지도에서 원하는 위치 검색

 

 

 

2. 원하는 위치에서 우클릭  후,  "이곳이 궁금한가요?" 선택 

우측 사진처럼, 회색 마커가 생성될 것이다.

 

 

3. 회색 마커를 선택하면,   파란색 좌표 마커가 생성됨

빨간 마커 뒤에 파란색 좌표 마커가 생성(좌측) / 아무곳이나 눌러 빨간 마커를 제거하면 파란 마커가 보인다(우측)

만약, 클릭한 장소가 이미 구글지도상에 등록이 되어 있다면, 좌측 사진처럼 빨간 마커 뒤편에 파란 마커가 생성될 것이다. 이 경우 마커가 아닌 배경을 클릭해 주면, 파란 마커가 위로 노출되게 할 수 있다.

 

빨간 마커가 표기되지 않는 지역들에서는 회색 마커를 클릭하면, 우측 사진과 같이 바로 좌표가 표기되게 된다. 이제 이 좌표를 카카오 지도에서 활용하면 된다.

 

---

마커 한 개 표기하기

기본 예제

카카오 지도 API에서는 마커를 위도와 경도를 활용하여 표기할 수 있다.

 

다음은 카카오 공식 홈페이지에서 제공하는 기본 예제이다.

		var container = document.getElementById('map'); 
		var options = { 
			center: new kakao.maps.LatLng(33.450701, 126.570667), 
			level: 3 
		};
		var map = new kakao.maps.Map(container, options);
		
// 위로는 지난 번 코드 //
     
        
		var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667);  // 마커가 표시될 위치 
		var marker = new kakao.maps.Marker({  // 마커를 생성한다
		    position: markerPosition
		});

		marker.setMap(map); // 마커가 지도 위에 표시되도록 설정한다

		// 아래 코드는 지도 위의 마커를 제거하는 코드이다
		// marker.setMap(null);

 

카카오 지도상에서의 위도와 경도를 LatLng 메서드를 이용하여 변수에 담은 후,

카카오 지도 Marker() 메서드의 position 속성으로 마커 위치를 넣어준다.

 

setMap()으로 지도를 재 설정하면 다음과 같은 결과가 나온다.

 

결과 

 

 

카카오 지도인 만큼, 기본 마커 예제에서 카카오 본사를 가리키고 있다.

 

위도 경도 변경하기

		var container = document.getElementById('map');
		var options = { 
			center: new kakao.maps.LatLng(37.402707, 126.922044),  // 안양역 위도,경도
			level: 3 //지도의 레벨(확대, 축소 정도)
		};
	
		var map = new kakao.maps.Map(container, options); 
		var markerPosition  = new kakao.maps.LatLng(37.402707, 126.922044);  // 안양역 위도,경도
		var marker = new kakao.maps.Marker({ 
		    position: markerPosition
		});

		marker.setMap(map);

위의 기본 예제에서, 위도 경도만 수정해 준다.

 

나는 앞서 찾은 안양역의 위도와 경도를 넣어주었다.

 

결과 

 

안양역에 마커가 잘 찍혀있는 모습이다.

 

---

마커 여러 개 생성하기

마커를 여러 개 띄우기 위해서는, 마찬가지로 마커를 띄우고자 하는 각각 위치의 경도와 위도가 필요하고,

이를 json 형식으로 선언하여 활용할 수 있다.

 

HTML : 

<div id="map" style="width: 1000px; height: 800px;"></div>

JS :

	<script type="text/javascript">
		// <맵 생성>
		var container = document.getElementById('map'); 
		var options = { 
			center: new kakao.maps.LatLng(37.402707, 126.922044), 
			level: 4
		};
	
		var map = new kakao.maps.Map(container, options); 
		// </맵 생성>
		
		var positions = [
		    {
		        title: '안양역', 
		        latlng: new kakao.maps.LatLng(37.402707, 126.922044)
		    },
		    {
		        title: '안양역 주위 1', 
		        latlng: new kakao.maps.LatLng(37.400707, 126.920044)
		    },
		    {
		        title: '안양역 주위 2', 
		        latlng: new kakao.maps.LatLng(37.403007, 126.925044)
		    },
		    {
		        title: '안양역 주위 3',
		        latlng: new kakao.maps.LatLng(37.405707, 126.925044)
		    }
		];
		
		for (var i = 0; i < positions.length; i ++) {
		   
		    var marker = new kakao.maps.Marker({  // 마커 생성
		        map: map, // 마커를 표시할 지도
		        position: positions[i].latlng, // 마커를 표시할 위치
		        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시 됨
		    });
		}
	</script>

 

마찬가지로, 카카오 지도의 LatLng() 메서드를 이용하여, 각 위치를 나타내준 후,

반복문을 통하여 마커를 생성해 준다.

 

 

결과 

 

마우스를 마커 위에 위치하면, 해당 마커의 title을 볼 수 있다.

 

 

만약 지도를 축소 할때, 마커를 하나로 뭉쳐서 "클러스터러"로 보고 싶다면 아래 링크를 참고하자. 

https://olrlobt.tistory.com/40

[Spring] 카카오 지도 / Kakao Map Web API 여러개의 마커를 클러스터러로 표기해보기

---

마커를 보기 쉽게 만들기

 

앞서 만든 예시 마커들만 보더라도, 한 번에 어떤 곳을 가리키고 있는지, 알아보기가 쉽지 않다.

그렇다면 마커를 한 번에 알아보기 쉽게 만들기에는 어떤 방법이 있을까?

 

인포윈도우 표시하기

먼저, 인포윈도우를 표시하는 방법이 있다.

인포 윈도우(info window)란 말 그대로, 정보 창을 의미한다.

 

 

이렇게 간단히 말풍선을 띄워주는 것만으로도, 사용자는 마커가 무슨 의미인지 파악하기 쉬워질 것이다.

 

markers.map(function(o){  // markers = 마커들을 묶은 배열
	var infowindow = new kakao.maps.InfoWindow({
    		// position : o.N			// 인포윈도우 위치
   	 	content : '<div style="padding:5px;">' + o.Gb + '</div>' 	// 인포윈도우 안 내용
	});

	infowindow.open(map, o);	// 인포윈도우 표시
});

 

markers는 앞서 사용한 마커들의 집합을 의미하며, map()을 이용하여 요소를 하나씩 꺼내어 o라는 변수로 사용하였다.

 

kakao, maps.InfoWindow()를 이용하여 인포윈도를 선언해 준다.

안에 속성으로 들어가는 값으로는

position : 인포윈도우의 위치를 의미한다. 하지만, 마지막에 infowindow.open으로 마커를 지정해 줄 경우, 무의미한 속성이다.

content : 인포윈도우의 내용을 의미한다. HTML 태그를 문자열로 넘겨 구현이 가능하다.

 

선언이 끝난 infowindow는 open()을 이용하여 지도에 표기해 준다.

첫 번째 인자로는 지도를 가리키는 변수를,

두 번째 인자로는 인포윈도우가 표기되는 마커를 의미하며, 두 번째 인자를 생략할 경우, position에 지정한 위치에 따라 인포윈도우가 생성된다.

 

 

 

 

마커 이미지 바꾸기

 

기본 마커의 경우, 어떤 지역인지 한 번에 알아보기 힘들 수 있다.

하지만, 아래의 경우라면 어떨까?

 

야구공이 그려져 있는 마커를 사용함으로써, 야구에 관련된 장소라는 것을 한눈에 알 수 있게 된다.

 

 

다른 예시로, 위와 같이 한눈에 봐도 버스 정류장이라는 것을 알 수 있게 된다.

 

// 마커이미지의 주소 (해당 주소는 야구공 모양)
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png';
var imageSize = new kakao.maps.Size(64, 69); // 마커이미지의 크기
var imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)

var markers = positions.map(function(position) {  // 마커를 배열 단위로 묶음
    return new kakao.maps.Marker({
        position : new kakao.maps.LatLng(position.lat, position.lng),
        title : position.title,
        image : markerImage
    });
});

 

카카오 지도의 Maker()를 이용하여 마커를 만드는 과정에서, image: 속성을 추가해 준다.

이때 makerImage 변수는 kakao.maps.MakerImage() 메서드를 이용하여 생성되며,

MakerImage()의 인자로는, 마커 이미지의 주소, 마커 이미지의 크기, 마커 이미지의 옵션 값이 필요하다.

 

해당 예제의 마커 이미지의 주소는, 카카오 공식 홈페이지에서 사용 중인 주소로, 위의 그림 중 야구공 그림에 해당한다.

 

마커 이미지 크기의 경우는, 역시 카카오 예제 그대로 64,69를 사용했다.

 

이제, 이 이미지 크기를 토대로 이미지 옵션의 offset을 설정해 주어야 한다.

var imageOption = {offset: new kakao.maps.Point(0, 0)}; // 마커이미지의 옵션.

 

만약 offset이 위처럼 (0,0)으로 설정이 되어 있다면, 아래 그림처럼 마커가 표기 되게 된다.

 

별로 이상한 것을 못 느끼실 수도 있지만, 자세히 보면 마커 이미지가 변경되면서, 지정한 위치가 아닌, 다른 위치를 가리키고 있음을 알 수 있다.

 

이는 마커 이미지가 지정된 점(point)를 기준으로 우측하단으로 생성되기 때문인데

이를, offset을 적절히 설정 해 줌으로 이를 해소해야 한다.

 

offset: new kakao.maps.Point(0, 0)

첫 번째 인자 : X 좌표로 이동 ( 왼쪽이 +)

두 번째 인자 : Y 좌표로 이동 ( 위쪽이 + )

 

예를 들어

offset: new kakao.maps.Point(27, 69) 라면,

위의 그림에서 왼쪽으로 27만큼, 위쪽으로 69만큼 이동하여 출력된다.

 

따라서 위 야구공 이미지의 경우,

이미지의 세로 사이즈가 69이기 때문에, 두 번째 인자 값이 69가 되며,

첫 번째 인자 값의 경우 왼쪽으로 절반만 이동하면 되기 때문에 32라고 생각할 수 있지만,

야구공 이미지를 자세히 보면, 그림자까지 그림에 포함되어 있기 때문에 좌우 대칭이 아닌 것을 알 수 있다.

 

따라서 27의 값이 들어간다.

 

결과

 

마커가 정확한 위치에 표기되고 있음을 알 수 있다.