[javascript] 지도에서 원하는 스타일의 토글 기능 추가하기

22 Nov 2023

javascript

지도 API를 사용하여 지도를 표시할 때, 종종 특정 스타일을 토글하는 기능을 추가해야 할 때가 있습니다. 이번 블로그 포스트에서는 JavaScript를 사용하여 지도에서 원하는 스타일을 토글하는 기능을 추가하는 방법에 대해 알아보겠습니다.

지도 생성하기

먼저, 지도를 생성하는 JavaScript 코드를 작성해야 합니다. 다음은 Kakao 지도 API를 사용하여 지도를 생성하는 예시 코드입니다.

// Kakao 지도 API 초기화
Kakao.init('YOUR_API_KEY');

// 지도 생성
var map = new kakao.maps.Map(document.getElementById('map'), {
  center: new kakao.maps.LatLng(37.5665, 126.9780), // 서울시청 좌표
  level: 13 // 확대 레벨
});

YOUR_API_KEY 부분은 사용자가 발급 받은 Kakao 지도 API의 키로 바꿔야 합니다.

스타일 토글 기능 추가하기

이제 원하는 스타일을 토글하는 기능을 추가해보겠습니다. 예를 들어, 지도의 배경색을 검은색과 흰색으로 번갈아가며 변경해보겠습니다.

var mapContainer = document.getElementById('map');
var toggleButton = document.getElementById('toggle-button');

// 초기 스타일
var currentStyle = 'black';

// 토글 버튼 클릭 이벤트 핸들러
toggleButton.addEventListener('click', function() {
  // 스타일 변경
  if (currentStyle === 'black') {
    mapContainer.style.backgroundColor = 'white';
    currentStyle = 'white';
  } else {
    mapContainer.style.backgroundColor = 'black';
    currentStyle = 'black';
  }
});

위 코드에서 toggle-button는 토글 버튼의 ID입니다. mapContainer는 지도를 감싸는 요소의 ID입니다.

우선, 초기 스타일을 ‘black’로 설정하고, 토글 버튼이 클릭되었을 때 배경색 스타일을 번갈아가며 변경하도록 합니다.

마무리

이제 원하는 스타일의 토글 기능이 추가된 지도를 웹 페이지에 적용할 수 있습니다. 위의 예시 코드를 참고하여 원하는 스타일과 토글 기능을 추가하십시오.

더 많은 Kakao 지도 API 기능을 알아보려면 Kakao 지도 API 문서를 참고하시기 바랍니다.