인터랙티브 맵은 사용자에게 지리적 정보나 위치 데이터를 시각적으로 제공할 수 있는 강력한 도구입니다. 보통 구글 맵, 오픈스트리트맵(OpenStreetMap) 등의 외부 서비스와 자바스크립트 라이브러리를 통해 구현되지만, 기본 HTML, CSS, JavaScript만으로도 간단한 인터랙티브 맵을 제작할 수 있습니다.
1. 인터랙티브 맵 설정하기 – 기본
HTML과 CSS만으로도 맵의 기본 레이아웃과 스타일을 쉽게 설정할 수 있습니다. 먼저 HTML을 통해 맵이 위치할 영역을 생성하고 CSS로 맵의 기본 크기, 배경색 등을 설정해 보겠습니다.
<div id="map-container">
<div class="map" id="myMap">
<div class="marker" id="marker"></div>
</div>
</div>
- <div id=”map-container”>는 전체 맵을 감싸는 컨테이너로, 맵에 스타일을 적용하거나 중앙에 정렬하는 데 사용할 수 있습니다.
- .map은 맵 자체의 영역으로 설정하여 지도 배경이 될 영역을 나타냅니다.
- .marker는 위치를 나타낼 마커입니다. 사용자가 이동하거나 특정 지점에 고정할 수 있는 스타일 요소입니다.
#map-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 400px;
}
.map {
width: 90%;
height: 100%;
background-color: #e5e5e5;
position: relative;
}
.marker {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
위 CSS는 .map 영역을 회색 배경으로 지정해 지도와 같은 효과를 주며, .marker는 사용자가 위치를 시각적으로 표시할 수 있도록 빨간색으로 설정되었습니다.
2. 마커 위치 조정 및 클릭 이벤트 추가하기
마커는 사용자가 클릭하거나 드래그하여 위치를 변경할 수 있도록 JavaScript를 통해 이벤트를 추가할 수 있습니다. 마커의 위치를 조정하려면 다음과 같은 방식으로 JavaScript 코드를 작성할 수 있습니다.
const map = document.getElementById("myMap");
const marker = document.getElementById("marker");
map.addEventListener("click", function(event) {
const rect = map.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
marker.style.left = `${x}px`;
marker.style.top = `${y}px`;
});
- map.addEventListener(“click”, function(event) {…}: 맵을 클릭할 때마다 클릭한 위치에 마커를 이동시키는 이벤트입니다.
- const x = event.clientX – rect.left;: 마커의 새로운 X 좌표를 계산합니다.
- const y = event.clientY – rect.top;: 마커의 새로운 Y 좌표를 계산합니다.
이 코드는 맵을 클릭할 때마다 마커가 그 위치로 이동하여 사용자가 원하는 위치를 표시할 수 있도록 해 줍니다.
3. 줌(Zoom) 기능 추가하기
맵을 확대하거나 축소하여 더 세밀하게 관찰할 수 있도록 하기 위해 CSS와 JavaScript를 활용해 간단한 줌 기능을 추가할 수 있습니다. CSS transform과 scale 속성을 사용하여 맵을 확대할 수 있습니다.
.zoomed {
transform: scale(1.5);
transition: transform 0.3s ease;
}
- .zoomed 클래스는 맵이 확대될 때 적용됩니다.
- transform: scale(1.5);은 맵을 1.5배 확대합니다.
JavaScript를 통해 클릭할 때마다 .zoomed 클래스를 추가하거나 제거하여 확대/축소를 구현할 수 있습니다.
map.addEventListener("dblclick", function() {
map.classList.toggle("zoomed");
});
이 코드는 더블클릭 이벤트가 발생할 때마다 맵의 크기를 확대/축소할 수 있도록 해줍니다. toggle 메서드는 클래스가 없으면 추가하고, 있으면 제거하는 역할을 합니다.
4. 드래그 기능 구현하기
맵을 드래그하여 사용자가 원하는 영역을 탐색할 수 있도록 JavaScript를 통해 드래그 기능을 추가할 수 있습니다. 드래그 기능은 mousedown, mousemove, mouseup 이벤트를 조합하여 구현할 수 있습니다.
let isDragging = false;
let startX, startY;
map.addEventListener("mousedown", (event) => {
isDragging = true;
startX = event.clientX - map.offsetLeft;
startY = event.clientY - map.offsetTop;
});
map.addEventListener("mousemove", (event) => {
if (isDragging) {
const x = event.clientX - startX;
const y = event.clientY - startY;
map.style.transform = `translate(${x}px, ${y}px)`;
}
});
map.addEventListener("mouseup", () => {
isDragging = false;
});
- mousedown 이벤트로 드래그가 시작되면 isDragging 플래그를 true로 설정하고 시작 좌표를 저장합니다.
- mousemove 이벤트에서는 드래그 중일 때마다 새로운 좌표를 계산하여 transform을 업데이트합니다.
- mouseup 이벤트에서는 드래그를 종료합니다.
5. 간단한 정보 창 (Info Window) 추가하기
사용자가 특정 위치를 클릭했을 때 추가 정보를 표시하는 작은 팝업 창을 만들어 줄 수 있습니다. 이는 정보 창을 나타내는 div를 추가하고, 클릭 이벤트에 따라 해당 위치로 표시되도록 설정하는 방식으로 구현할 수 있습니다.
<div class="info-window" id="infoWindow" style="display: none;">You clicked here!</div>
.info-window {
position: absolute;
background: #fff;
padding: 5px;
border: 1px solid #000;
font-size: 12px;
border-radius: 3px;
}
map.addEventListener("click", function(event) {
const rect = map.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const infoWindow = document.getElementById("infoWindow");
infoWindow.style.left = `${x}px`;
infoWindow.style.top = `${y}px`;
infoWindow.style.display = "block";
infoWindow.innerText = `Location: (${x}, ${y})`;
});
인터랙티브 맵은 JavaScript 라이브러리 없이 HTML, CSS, JavaScript만으로도 다양한 인터랙티브 맵 기능을 구현할 수 있습니다. 이러한 방식으로 맵을 구현하면 외부 라이브러리에 의존하지 않아 로딩 속도가 빨라지고, 사용자가 원하는 기능만 맞춤 설정할 수 있는 장점이 있습니다.
