KSI일기장
(JavaScript,Java) GoogleMap(구글지도)사용3 - 마커클러스터링(마커 여러개) 본문
HTML은 이전에 했던 "사용2" 게시물과 거의 동일하나 body안 <script>부문만 바꿔주시면 됩니다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GoogleMap Test</title>
<script src = "https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script th:type="module" th:src = "@{/js/map.test/index.js}"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 650px;"></div>
<!--마커 여러개-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPo0ijDx0v5ghCUxvfPNDOAVBTq5n7afI&callback=initMap&v=weekly"
defer>
</script>
</body>
</html>
JavaScript
마커를 여러 개 나타내는 코드는 한개의 마커를 나타내는 코드와 다르기 때문에 수정해야할 부분이 꾀 있을것입니다.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: {lat: 37.48144, lng: 126.882652 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
//마커에 표시될 문자
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//지도에 마커 추가
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
//마커 클릭 시 정보 창 열기
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(map, marker);
});
//생성한 마커 지도에 추가
marker.setMap(map);
return marker;
});
}
//마커 위치 추가
const locations = [
{lat: 37.39814, lng: 126.673603},
{lat: 37.483301, lng: 126.707179},
{lat: 37.520234, lng: 126.852868},
{lat: 37.633114, lng: 127.058835},
{lat: 37.4962331, lng: 126.87091},
{lat: 37.372237, lng: 126.9434895},
];
window.initMap = initMap;
//lat - 위도 , lng - 경도
결과:
위와 같이 ABCD...와 같이 한 글자씩만 표시해줄 수도 있고 내용을 추가적으로 나타내고 싶으면
나타내고싶은 내용을 추가해 주시고 마커 클릭이벤트의 (marker.addEventListner("click", ()) 내용을 수정해줘야 합니다. 기존 labels는 지우고 markerInfo를 추가해주시면 됩니다.
//마커에 표시될 문자
const markerInfo = [
"A 클릭! 동막역",
"B 클릭! 백운역",
"C 클릭! 신정네거리역",
"D 클릭! 월계역",
"E 클릭! 구일역",
"F 클릭! 금정역"
];//마커 클릭 시 정보 창 열기
marker.addListener("click", () => {
infoWindow.setContent(markerInfo[i]);
infoWindow.open(map, marker);
});
JavaScript에서 위 부분을 수정&추가 해주시면 아래 이미지와 같은 결과가 나타날 것입니다.
'Spring' 카테고리의 다른 글
| SpringBoot Intellij 이용한 project 생성 (0) | 2024.03.15 |
|---|---|
| 인텔리제이 프로젝트 구조 설정 및 편집(깃 내려받고 프로젝트 실행 전 필수 작업) (0) | 2024.02.20 |
| (JavaScript,Java) GoogleMap(구글지도)사용2 -마커(maker)생성 (1) | 2024.02.16 |
| (JavaScript,Java) GoogleMap(구글지도) 사용1 -웹페이지 지도표출 (0) | 2024.02.16 |
| 인텔리제이 무료 라이센스 발급 및 등록 (0) | 2024.01.10 |
'Spring' Related Articles
more
