[Web/Map] Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(1) - Marker

포스터는 다음과 같이 진행될 예정.

 

[Kakao 지도 API를 이용한 길찾기 웹 만들기]

(1) Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용

(2) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기 - Marker 𖦹현재 포스터𖦹 

(3) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기 - InfoWindow

(4) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기 - Polyline

(5) 길찾기 API ODsay, Python을 이용한 실시간 길찾기 데이터 불러오기

(6) 백엔드로 불러온 실시간 길찾기 데이터 지도에 polyline 찍어보기

 

 

동기들과 구현해본 길찾기 서비스에 대한 기록.

 

학부생 수준으로 진행한 것이라 메모리 사용량이든 디스크 사용량이든 정말 비효율적으로 만들어지긴 했는데,

지도를 입문하거나, 길찾기를 지도에 적용하고 싶은데 너무 막연하게 느껴진다면 도움은 될 것 같다.

 

 

[포스터 참고]

(1) Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용: https://hyewon-s-dev.tistory.com/16

[Web/Map] Kakao 지도 API 키 발급 및 HTML5 + Javascript 적용

 

(3) Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(2) - InfoWindow : https://hyewon-s-dev.tistory.com/18

[Web/Map] Javascript를 이용한 Kakao 지도 Marker, Polyline, InfoWindow 이용해보기(2) - InfoWindow

 

(4) Kakao 지도 Python API 공공데이터 활용해 Javascript로 Polyline 그리기 : https://hyewon-s-dev.tistory.com/22

[Web/Map] Kakao 지도 Python API 공공데이터 활용해 Javascript로 Polyline 그리기

 

 

+ 이상한 부분이나 틀린 부분, 피드백 대환영입니다.

 

 

 

---

흔히 길찾기 서비스를 이용하게 되면, 출발지와 도착지의 위치를 찍어주는 핀, 지도 위에서 출발지와 도착지를 연결해주는 색깔 선, 그리고 그 장소에 대해 설명해주는 말풍선 창이 뜨곤 한다. 여기서

 

출발지와 도착지의 위치를 찍어주는 핀 → 마커

지도 위에서 출발지에서 도착지까지 가는 경로를 그려준 색깔 선 → 폴리라인

출발지와 도착지 등 특정 장소에 대해 설명해주는 말풍선 창 → 인포윈도우

 

로, 이것들을 이용하고, 응용 해보고자 함

(1)번 포스터에서 언급한 vscode 에디터, HTML Live Server 확장자를 설치하면 실습에 따라오기 더 편할 것 같다.

베이스 코드도 (1)번 포스터 참고하면 좋을 것 같다.

 

1. 마커 생성하기

마커 생성은 간단하다. `kakao.maps.Marker` 모듈을 이용하면 된다.

`kakao.maps.Map` 을 통해 지도를 불러왔다면, 그 아래에 코드를 작성하면 된다.

// 마커의 위치
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

// 마커 생성
var marker = new kakao.maps.Marker({
    position: markerPosition
});

// 지도 위에 마커 표시
marker.setMap(map);

카카오 지도에서 position을 입력해야할 때에는 항상 `kakao.maps.LatLng` 모듈을 사용해 위도/경도를 지정해주면 된다고 생각하면 될 것 같다. (원하는 장소에 대한 위도/경도 찾는 방법은 (1)번 포스터를 참고하길 바람.)

이렇게 작성된 코드를 지도 위에 띄우기 위해, `setMap`을 이용한다.

(이해를 돕기 위한 모듈 구조. 뒤쪽가면 복잡해져서 규칙성 찾기 어려우실까봐 넣어둡니다 ..

└─kakao.maps.Marker
  └─position
    └─kakao.maps.LatLng

 

 

2. 다른 이미지로 마커 생성하기

이번에는 다른 이미지로 마커를 생성해보자. 이미지는 구글에서 보이는 핀 이미지를 다운로드해 가져왔다.

https://www.flaticon.com/free-icon/pin_149059

Pin free icons designed by Smashicons

 

이미지를 가져와 map을 불러오고 있는 html과 같은 폴더 경로 아래에 넣어준다.

마커 이미지는 `kakao.maps.MarkerImage` 모듈을 이용하여 Marker 모듈에 image의 value 값으로 넣어주면 됨.

`kakao.maps.MarkerImage` 에 필요한 값은 image url, image 크기 필요. 이미지 크기는 kakao.maps.Size 이용하면 됨

└─마커 틀(kakao.maps.Marker)
  ├─position: kakao.maps.LatLng
  │   ├─위도
  │   └─경도
  └─image: kakao.maps.MarkerImage
      ├─이미지 url
      └─kakao.maps.Size
        └─이미지 사이즈

마커 생성한 코드에서 추가해보자면

// 마커의 위치
var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

// 마커 이미지
var imageSrc = './pin.png'
var imageSize = new kakao.maps.Size(60, 60)
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

// 마커 생성
var marker = new kakao.maps.Marker({
    position: markerPosition
    image: markerImage
});

// 지도 위에 마커 표시
marker.setMap(map);

 

3. 마커 여러개 띄우기

공식 sample에서는 setMap을 사용하지 않고, 마커 안에 map을 지정해주고 있지만, 여러개 띄울때도 setMap을 이용해도 괜찮음. 다만 성능면에서는 어떤게 좋을지는 분석해봐야할 듯 함.

진짜 직관적으로 코드짜면 marker이라는 객체를 똑같이 생성해서 안에 넣어주면 되는거.

// 마커 이미지
var imageSrc = './pin.png'
var imageSize = new kakao.maps.Size(60, 60)
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);


var marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    image: markerImage
});
marker.setMap(map);


var marker1 = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(33.450701, 126.550667),
    image: markerImage
});
marker1.setMap(map);

위에서 상세하게 구조 설명한 이유가 이해만 한다면 코드는 작성하기 나름이라 ..

더 나아가서, 만약, 내가 원하는 장소에 대한 위도/경도를 데이터로 끌어와서 넣을 경우에는 for문 이용하면 될 것 같음.

예를 들면 내가 원하는 장소가 두 군대라고 했을 때 list 안에 값을 저장하고,

var myPositionList = [[33.450701, 126.570667], [33.450701, 126.550667]];

냅다 for문 돌리기

// 마커 이미지
var imageSrc = './pin.png'
var imageSize = new kakao.maps.Size(60, 60)
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

// myPositionList 안에 들어있는 위도/경도 마커 찍기
for (var i=0; i<myPositionList.length; i++) {
    // console.log(myPositionList[i]) // console에서의 확인용
    var marker = new kakao.maps.Marker({
        position: new kakao.maps.LatLng(myPositionList[i][0], myPositionList[i][1]),
        image: markerImage
    });
    marker.setMap(map);
}

이렇게 하면 위랑 동일하게 뜨는 것을 확인할 수 있음.

 

여기까지 전체 코드 👇👇👇

<!DOCTYPE html>
<html>
<head>
    <title>카카오 지도</title>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{javascript 키}}&libraries=services,clusterer,drawing"></script>
</head>
<body>
    <div id="map" style="width:500px;height:400px;"></div>
    <script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 7
            
		};

		var map = new kakao.maps.Map(container, options);


		var myPositionList = [[33.450701, 126.570667], [33.450701, 126.550667]];
		
		// 마커 이미지
		var imageSrc = './pin.png'
		var imageSize = new kakao.maps.Size(60, 60)
		var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);


		for (var i=0; i<myPositionList.length; i++) {
			// console.log(myPositionList[i])
			var marker = new kakao.maps.Marker({
				position: new kakao.maps.LatLng(myPositionList[i][0], myPositionList[i][1]),
				image: markerImage
			});
			marker.setMap(map);
		}

	</script>
</body>
</html>

 

 

4. 마커 지우기

마커 삭제는 공식 문서에 정리되어서 나온 건 없었음. `marker.setMap(null)` 을 사용하면 됨.

위에서부터 코드를 살펴보면, 여기서 marker은 우리가 지정한 마커였음. 그래서 위와같이 for문을 돌리게 되면, 

우리가 지도에 찍은 마커에 대한 정보가 사라짐. 그래서 이걸 list에 넣어놓고 삭제하는 등의 방법을 사용해야 함.

 

위 코드에서 일단 for문으로 돌아가는 marker의 정보를 list로 저장.

var markerList = []
for (var i=0; i<myPositionList.length; i++) {
    // console.log(myPositionList[i])
    var marker = new kakao.maps.Marker({
        position: new kakao.maps.LatLng(myPositionList[i][0], myPositionList[i][1]),
        image: markerImage
    });
    marker.setMap(map);

    markerList.push(marker);
}
console.log(markerList); // 확인용

아래에 console.log 를 통해 markerList에 marker 정보가 잘 저장되었는지 확인. Array 형태로 저장되었다면 잘 된거임.

마커 지우는 것을 확인해보기 위해, html에 버튼을 만들어, 그 버튼을 클릭했을 때 삭제해도록 구현해보자.

 

html에 input button 추가

<input type="button" id="rmMarker" value="button">

 

클릭했을 때, 마커 삭제

var rmMarker = document.getElementById('rmMarker');
rmMarker.onclick = function() {
    for (var i=0; i<markerList.length; i++) {
        markerList[i].setMap(null);
    }
}

이렇게 하면 아래와 같이 버튼 클릭하면 삭제되는 것을 확인할 수 있음

 

여기까지 전체 코드 👇👇👇

<!DOCTYPE html>
<html>
<head>
    <title>카카오 지도</title>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{javascript 키}}&libraries=services,clusterer,drawing"></script>
</head>
<body>
    <div id="map" style="width:500px;height:400px;"></div>
	<input type="button" id="rmMarker" value="button">
	
    <script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 7
            
		};

		var map = new kakao.maps.Map(container, options);


		var myPositionList = [[33.450701, 126.570667], [33.450701, 126.550667]];
		
		// 마커 이미지
		var imageSrc = './pin.png'
		var imageSize = new kakao.maps.Size(60, 60)
		var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

		var markerList = []
		for (var i=0; i<myPositionList.length; i++) {
			// console.log(myPositionList[i])
			var marker = new kakao.maps.Marker({
				position: new kakao.maps.LatLng(myPositionList[i][0], myPositionList[i][1]),
				image: markerImage
			});
			marker.setMap(map);

			markerList.push(marker);
		}
		console.log(markerList); // 확인용

		var rmMarker = document.getElementById('rmMarker');
		rmMarker.onclick = function() {
			for (var i=0; i<markerList.length; i++) {
				markerList[i].setMap(null);
			}
		}
	</script>
</body>
</html>

 

 

 

+ 마커로 할 수 있는 기능 생각나는대로 계속 업데이트 할 예정

 

 

[출처]

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