안녕하세요.~
이번시간에는 웹 프론트에서 Javascript와 구글맵 API를 이용해서 지도 클러스터링을 만들어 보겠습니다.
스틱코드 (stickode.com/mainlogin.html)
이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다.
스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고,
다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고,
좋은 코드가 쌓일수록 강력해지는 플러그인 입니다.
HTML 설정 <google_map.html>
스틱코드를 통해
HTML 코드를 설정해주도록 하겠습니다.
스틱코드를 사용하면
다음과 같이 코드가 완성됩니다.
(YOUR API KEY 부분에 구글API 키를 넣으시면 됩니다.)
HTML 전문입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="author" content='Suns'>
<meta name="description" content="..">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, nimimum-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="/stickcode/googleMap/google_map.css">
</head>
<body>
<div id="map"></div>
<input id="refreshMap" type="button" value="Refresh" style="display:none" /><br>
<!--js파일 호출 index.js -->
<script defer type="text/javascript" src="/stickcode/googleMap/google_map.js"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
</body>
</html>여기에 CSS를 입혀 보도록 하겠습니다.
CSS 설정 <google_map.css>
다시한번 스틱코드를 통해
CSS 코드를 설정해주도록 하겠습니다.
스틱코드를 사용하여
다음과 같이 코드가 완성됩니다.
CSS 전문입니다.
#map {
margin: 0 auto;
max-width: 942px;
height: 500px;
margin-top: 40px;
margin-bottom: 30px;
border: 1px solid rgba(0,0,0,.2);
box-shadow: 0 0 20px rgba(0,0,0,.2);
box-sizing: border-box;
position: relative;
}다음과 같이 지도가 나올 공간이 만들어졌습니다.
JS 설정 <google_map.js>
스틱코드를 통해
JS 코드를 설정해주도록 하겠습니다.
스틱코드를 사용하여
다음과 같이 코드가 완성됩니다.
좌표는 latlng_list에 임의 좌표 6개를 넣어두었습니다.
initMap() 함수는 html 하단에 callback 메소드 이름을 initMap 으로 설정해주어 맵이 불러와지면 실행됩니다.
아래의 부분에서 마커를 생성하고,
클러스터링 메소드에 map, markers(마커 리스트) 변수를 넣고 실행해 줍니다.
JS 전문입니다.
let map;
let markers = [];
let markerCluster;
let markersAmount;
// 마커 좌표 리스트
let latlng_list = [
{lat: 37.51932559999999, lng: 126.8371642},
{lat: 37.484085, lng: 126.782803},
{lat: 37.484085, lng: 126.882803},
{lat: 36.51932559999999, lng: 127.8371642},
{lat: 36.484085, lng: 127.782803},
{lat: 36.484085, lng: 127.882803}
]
// 구글맵 초기화
function initMap() {
const myLatLng = {
lat: 14.627527,
lng: 160.364443
}
map = new google.maps.Map(
document.getElementById("map"), {
center: myLatLng,
scrollwhell: false,
zoom: 1.9
}
);
refreshMap();
}
// 마커 생성함수
function createMarkers() {
// console.log('latlng_list')
// console.log(latlng_list)
for (let i = 0; i < latlng_list.length; i++) {
let mker = new google.maps.Marker({
position: latlng_list[i],
map,
animation: google.maps.Animation.DROP,
})
markers.push(mker);
}
// console.log('markers')
// console.log(markers);
// Add a marker clusterer to manage the markers.
// 클러스터링
markerCluster = new MarkerClusterer(map, markers,{
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 100
});
}
function refreshMap() {
if (markerCluster instanceof MarkerClusterer) {
// Clear all clusters and markers
markerCluster.clearMarkers()
}
markers = [];
createMarkers();
}
이제 완료되었고,
테스트를 진행해보도록 하겠습니다.
결과화면
클러스터링이 잘 적용된 것을 확인할 수 있습니다.
이렇게 스틱코드를 사용해 구글맵 클러스터링을 구현해보았습니다.
이 예제에서 사용된 스틱코드
출처 : stickode.com/detail.html?no=2202 - JavaScript 구글맵 API 클러스터링
감사합니다.
'JavaScript' 카테고리의 다른 글
| [Javascript]TOP버튼 눌러 화면상단으로 스무스 하게 이동하기 (0) | 2021.09.20 |
|---|---|
| [JavaScript] 스탑워치 만들기 (2) | 2021.09.16 |
| [JavaScript] 빠르게 To Do 리스트 만들기 (0) | 2021.07.08 |
| [JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 (0) | 2021.06.26 |
| [JavaScript] summernote 빨리 구현하기 (0) | 2021.06.25 |
