[네이버 지도 api (3)] 다중마커, 다중 정보창

-- 복사할 수 있는 소스코드는 하단부에 아래 첨부했습니다

▶ 네이버지도 api 연동 및 제이쿼리 CDN

▶ .jsp 지도 div 작성

width 100%

height 75vh

▶ 자바스크립트 initMap() 작성

- 지역과 위/경도 데이터 담기

areaArr() 에 지역과 위/경도를 담는다.

location 은 지역명, lat는 위도, lng는 경도

원하는 지역이나 위치를 담아보면 된다.

DB와 연동해서 컨트롤러에서 list 에 담아서 응용해보는 것도 좋다.

▶ 자바스크립트 initMap() 작성

- 마커와 정보창 배열 선언

- 지도 생성

여러 개의 마커 정보와 정보창을 담아야 하는 배열을 생성해준다 !

그리고 지도 생성 !

▶ 자바스크립트 initMap() 작성

- 마커 정보 담기

- 정보창 정보 담기

아까 areaArr 에 담은 지역 수만큼 마커를 만들어보자 !

for문이 돌면서 areaArr[i].location 은 지역, 즉 marker의 타이틀에는 지역명을 넣어주고

포지션에는 각각 areaArr[i].lat , areaArr[i].lng 를 넣어 해당 위/경도에 마커가 찍히도록 작성 !

그러면 marker 의 정보는 작성완료

그러면 해당 marker에 대한 정보창을 작성해보자.

정보창의 내용엔 areaArr[i].location 으로 넣어주면 된다.

그외 다른 정보를 더 넣고 싶다면 areaArr에 키값을 추가해서 응용해보면 될것 !

그런 후 아까 생성했던 markers 와 infoWindows 배열에 넣어주면 for문이 돌면서 모든 정보가 다 삽입됩니다 !!

그러면 마커와 정보창이 맵핑이 되면서 같은 시퀀스를 가지게 되겠죠???????

▶ 자바스크립트 initMap() 작성

- 클릭 이벤트

해당 마커를 클릭했을 때 정보창을 띄어주는 클릭핸들러까지 작성해주면 끝!

▶ 서울 지도위에 만들었던 지역들의 마커들이 표출된다

▶ 소스코드

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트 아이디 작성"></script> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body>  <div id="map" style="width:100%;height:75vh; margin: 0 auto;"></div> </body> <script type="text/javascript"> $(function() { initMap(); }); function initMap() { var areaArr = new Array(); // 지역을 담는 배열 ( 지역명/위도경도 ) areaArr.push( /*지역구 이름*/ /*위도*/ /*경도*/ {location : '강남' , lat : '37.4959854' , lng : '127.0664091'}, // 강남구 중심좌표 {location : '강동' , lat : '37.5492077' , lng : '127.1464824'}, // 강동구 중심좌표 {location : '강북' , lat : '37.6469954' , lng : '127.0147158'}, // 강북구 중심좌표 {location : '강서' , lat : '37.5657617' , lng : '126.8226561'}, // 강서구 중심좌표 {location : '관악' , lat : '37.4603732' , lng : '126.9536086'}, // 관악구 중심좌표 {location : '광진' , lat : '37.5574120' , lng : '127.0796211'}, // 광진구 중심좌표 {location : '구로' , lat : '37.4954856' , lng : '126.858121' }, // 구로구 중심좌표 {location : '금천' , lat : '37.4600969' , lng : '126.9001546'}, // 금천구 중심좌표 {location : '노원' , lat : '37.6377533' , lng : '127.0754623'}, // 노원구 중심좌표 {location : '도봉' , lat : '37.6658609' , lng : '127.0317674'}, // 도봉구 중심좌표 {location : '동대문' , lat : '37.5838012' , lng : '127.0507003'}, // 동대문구 중심좌표 {location : '동작' , lat : '37.4965037' , lng : '126.9443073'}, // 동작구 중심좌표 {location : '마포' , lat : '37.5676507' , lng : '126.8854549'}, // 마포구 중심좌표 {location : '서대문' , lat : '37.5820369' , lng : '126.9356665'}, // 서대문구 중심좌표 {location : '서초' , lat : '37.4769528' , lng : '127.0378103'}, // 서초구 중심좌표 {location : '성동' , lat : '37.5506753' , lng : '127.0409622'}, // 성동구 중심좌표 {location : '성북' , lat : '37.606991' , lng : '127.0232185'}, // 성북구 중심좌표 {location : '송파' , lat : '37.5177941' , lng : '127.1127078'}, // 송파구 중심좌표 {location : '양천' , lat : '37.5270616' , lng : '126.8561534'}, // 양천구 중심좌표 {location : '영등포' , lat : '37.520641' , lng : '126.9139242'}, // 영등포구 중심좌표 {location : '용산' , lat : '37.5311008' , lng : '126.9810742'}, // 용산구 중심좌표 {location : '은평' , lat : '37.6176125' , lng : '126.9227004'}, // 은평구 중심좌표 {location : '종로' , lat : '37.5990998' , lng : '126.9861493'}, // 종로구 중심좌표 {location : '중구' , lat : '37.5579452' , lng : '126.9941904'}, // 중구 중심좌표 {location : '중랑구' , lat : '37.598031' , lng : '127.092931' } // 중랑구 중심좌표 ); 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 }); for (var i = 0; i < areaArr.length; i++) { // 지역을 담은 배열의 길이만큼 for문으로 마커와 정보창을 채워주자 ! var marker = new naver.maps.Marker({ map: map, title: areaArr[i].location, // 지역구 이름 position: new naver.maps.LatLng(areaArr[i].lat , areaArr[i].lng) // 지역구의 위도 경도 넣기 }); /* 정보창 */ var infoWindow = new naver.maps.InfoWindow({ content: '<div style="width:200px;text-align:center;padding:10px;"><b>' + areaArr[i].location + '</b><br> - 네이버 지도 - </div>' }); // 클릭했을 때 띄워줄 정보 HTML 작성 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> </html>

다중마커와 다중 윈도우창 표출하기였습니다.

궁금하신점은 댓글주세요~~~

[KeyWord]

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

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

네이버 지도 api 다중 정보창, 네이버 지도 api infowindows

'스프링 웹 개발' 카테고리의 다른 글

[Java] 자바 모바일 여부 체크하기 _ Mobile Check (0)	2022.05.04
[Java] URLEncoder , URLDecoder 예제 _ UnsupportedEncodingException (0)	2022.05.04
[네이버 지도 api (2)] 마커 클릭시 정보창 띄우기 - 스프링 + 자바스크립트 (1)	2021.06.29
[네이버 지도 api (1)] 지도 생성 후 마커 이미지 넣기 - 스프링 + 자바스크립트 (12)	2021.06.22
[Double Submit 방지] ajax, submit 더블 써밋 방지_ 자바스크립트 (1)	2021.06.15

배추잠자리 개발 RPG

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

'스프링 웹 개발' 카테고리의 다른 글

댓글

티스토리툴바

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

'스프링 웹 개발' 카테고리의 다른 글

관련글

댓글

티스토리툴바