HTML5 구글 지도 마커에 페이드 효과와 애니메이션 적용하기

구글 지도(Google Maps) API는 기본적으로 마커(marker)의 투명도를 조절하거나 페이드 인·아웃 같은 애니메이션 효과를 직접 적용할 수 있는 방법을 제공하지 않습니다. 하지만 커스텀 오버레이(Custom Overlay)를 활용하면 이러한 한계를 우회하여 마커에 다양한 시각 효과를 구현할 수 있습니다.

왜 커스텀 오버레이가 필요한가?

기본 마커는 내부적으로 최적화되어 렌더링되기 때문에 DOM 요소로 직접 접근하기 어렵습니다. 반면 커스텀 오버레이는 일반적인 HTML 요소(주로 div)로 구성되므로, 자바스크립트나 jQuery를 통해 opacity, transition 등 CSS 속성을 자유롭게 제어할 수 있습니다.

커스텀 오버레이 구현 방법

커스텀 오버레이를 만들려면 google.maps.OverlayView 클래스를 상속받아 다음 세 가지 핵심 메서드를 구현해야 합니다.

onAdd(): 오버레이가 지도에 추가될 때 호출되며, 여기서 DOM 요소를 생성하고 오버레이 창(overlay pane)에 부착합니다.
draw(): 화면에 요소를 그릴 때 호출되며, 지도 좌표를 화면 픽셀 좌표로 변환하여 위치를 지정합니다.
onRemove(): 오버레이가 지도에서 제거될 때 호출되며, 생성한 DOM 요소를 정리합니다.

예제 코드

function FadeMarker(map, position, image) {
  this.map_ = map;
  this.position_ = position;
  this.image_ = image;
  this.div_ = null;
  this.setMap(map);
}

FadeMarker.prototype = new google.maps.OverlayView();

FadeMarker.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  div.style.opacity = '0'; // 초기 투명도 0으로 설정
  div.style.transition = 'opacity 1s ease-in-out'; // 페이드 효과 추가

  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  div.appendChild(img);

  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
};

FadeMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var point = overlayProjection.fromLatLngToDivPixel(this.position_);

  var div = this.div_;
  div.style.left = point.x + 'px';
  div.style.top = point.y + 'px';
};

FadeMarker.prototype.onRemove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

페이드 효과 적용하기

오버레이가 준비되면 jQuery나 순수 자바스크립트로 투명도를 조절하여 페이드 효과를 만들 수 있습니다.

// jQuery를 이용한 페이드 인 예시
$('.custom-marker').fadeIn('slow');

// 또는 CSS transition을 활용한 방식
document.querySelector('.custom-marker').style.opacity = '1';

기본 마커 이미지 선택 팁

만약 기본 마커의 이미지를 대상으로 작업해야 한다면, 마커에 optimized: false 옵션을 설정해야 합니다. 이 옵션을 사용하면 마커가 개별 DOM 이미지 요소로 렌더링되어 선택자(selector)로 접근할 수 있게 됩니다.

var newmarkerimg = $('#map_canvas img[src*="iconmarker"][class!="imageadjust"]');

위 코드처럼 jQuery 선택자를 활용하면 특정 아이콘 경로를 가진 마커 이미지를 찾아내어 투명도 변경 등의 효과를 적용할 수 있습니다.

정리

구글 지도 API는 마커 페이드 효과를 공식적으로 지원하지 않습니다.
google.maps.OverlayView를 상속한 커스텀 오버레이로 마커를 대체하면 됩니다.
오버레이 내부의 div 요소에 대해 CSS와 자바스크립트로 투명도 및 애니메이션을 제어합니다.
기본 마커를 DOM에서 제어하려면 optimized: false 옵션이 필요합니다.

이 방식을 응용하면 단순한 페이드 효과뿐 아니라 바운스, 펄스(pulse), 강조 하이라이트 등 다양한 마커 애니메이션을 자유롭게 구현할 수 있습니다.