[네이버 지도 api (2)] 마커 클릭시 정보창 띄우기 - 스프링 + 자바스크립트

[네이버 지도 api (1)] 지도 생성 후 마커 이미지 넣기 - 스프링 + 자바스크립트 (tistory.com)

[네이버 지도 api (3)] 다중마커, 다중 정보창 - 스프링 + 자바스크립트 (tistory.com)

[네이버 지도 api (4)] 주소를 검색해서 지도 이동하기 Geocoding (tistory.com)

 

 

- 복사할 수 있는 소스코드는 하단부에 있습니다.

 

▶ 마커와 정보창을 담을 배열 생성하기

배열 생성

하단부의 소스는 지도를 생성하는 1탄에서 작성했던 소스코드입니다. 지도를 생성하기 전에 마커를 담아줄 배열과 정보창을 담아줄 배열을 선언해줍시다 !

 

 

▶ 정보창에 내용 담기

정보창의 내용 생성하기

 

그리고 지도와 마커를 생성했던 아래 소스코드에 정보창을 생성하는 소스코드를 작성했습니다. infoWindow라는 정보창 변수에 내용을 담고나서 

 

아까 선언했던 배열에 마커와 정보창을 각각 담아줍니다 !

 

 

 

▶ 마커 클릭핸들러 작성하기

마커 클릭시 정보창 나오기

클릭한 마커를 조회해서 해당 마커의 인덱스와 동일한 정보창을 찾아내서 띄워줍니다 !!

 

클릭한 마커의 인덱스가 getClickHandler을 타고 정보창을 띄워줍니다 ~

 

 

▶ 마커와 정보창 부분 소스코드

 

▶ 최종 소스코드

<script type="text/javascript"> $(function() { initMap(); }); function initMap() { let markers = new Array(); // 마커 정보를 담는 배열 let infoWindows = new Array(); // 정보창을 담는 배열 var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.552758094502494, 126.98732600494576), zoom: 15 }); var marker = new naver.maps.Marker({ map: map, title: "남산서울타워", position: new naver.maps.LatLng(37.552758094502494, 126.98732600494576), icon: { content: '<img src="<c:url value="/resources/img/chu.png"/>" alt="" style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; -webkit-user-select: none; position: absolute; width: 32px; height: 32px; left: 0px; top: 0px;">', size: new naver.maps.Size(32, 32), anchor: new naver.maps.Point(16, 32) } }); /* 정보창 */ var infoWindow = new naver.maps.InfoWindow({ content: '<div style="width:200px;text-align:center;padding:10px;"><b>서울남산타워</b><br> - 네이버 지도 - </div>' }); // 클릭했을 때 띄워줄 정보 입력 markers.push(marker); // 생성한 마커를 담는다. infoWindows.push(infoWindow); // 생성한 정보창을 담는다. function getClickHandler(seq) { return function(e) { // 마커를 클릭하는 부분 var marker = markers[seq], // 클릭한 마커의 시퀀스로 찾는다. infoWindow = infoWindows[seq]; // 클릭한 마커의 시퀀스로 찾는다 if (infoWindow.getMap()) { infoWindow.close(); } else { infoWindow.open(map, marker); // 표출 } } } for (var i=0, ii=markers.length; i<ii; i++) { console.log(markers[i] , getClickHandler(i)); naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i)); // 클릭한 마커 핸들러 } } </script>

 

최종 결과물

피카츄 마커를 클릭했을때 정보창이 나오는걸 확인할 수 있씁니다 

 

 

[네이버 지도 api (1)] 지도 생성 후 마커 이미지 넣기 - 스프링 + 자바스크립트 (tistory.com)

위에 링크를 참고하시면서 보시면 소스코드 이해에 도움이 될것같습니다. 주석 이외에 궁금하신점이 있으면 댓글 남겨주세요 ~^^

 

다음엔 다중마커와 다중정보창을 다뤄보겠습니다 !

 

 

[KeyWord]

네이버 지도 생성, 네이버 지도 api 연동, 네이버 지도 api, 네이버 지도 마커, 네이버 지도 api 마커, 네이버 지도 api 마커 이미지

네이버 지도 중복마커, 네이버 지도 주소검색, 네이버 지도 api geocoding, 네이버 지도 api 좌표 변환