구글맵 - 오버레이(마커) 애니메이션 효과 주기

애니메이션

마커를 애니메이션으로 표시하여 다양한 다른 상황에서 동적 움직임을 나타낼 수 있습니다. 마커가 애니메이션되는 방식은 마커의 animation 속성 내에google.maps.Animation 유형으로 지정합니다. 현재 다음 Animation 값이 지원됩니다.

• DROP은 마커가 처음 지도에 배치될 때 지도 맨 위로부터 떨어져 최종 위치에 놓여져야 함을 나타냅니다. 마커 배치가 완료되면 애니메이션이 중지되고animation이 null로 되돌아 갑니다. 이러한 유형의 애니메이션은 대개 Marker를 생성할 때 지정합니다.
• BOUNCE는 마커가 제자리에서 '통통 튀어야' 함을 나타냅니다. 통통 튀는 마커는 animation 속성이 명시적으로 null로 설정될 때까지 계속 튀어 오릅니다.

기존 마커의 경우 Marker 객체에서 setAnimation()을 호출하여 애니메이션을 시작할 수 있습니다.

다음 예는 DROP 애니메이션을 사용하여 스웨덴 스톡홀름에 마커를 만듭니다. 마커를 클릭하면 BOUNCE 애니메이션을 표시하거나 표시하지 않습니다.

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: stockholm
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: parliament
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

예 보기(marker-animations.html)

참고: 마커가 많은 경우 이 마커를 모두 동시에 지도에 떨어뜨리려 하지 않을 수 있습니다. 이 경우 setTimeout()을 활용하여 아래에 표시된 것과 같은 패턴을 사용함으로써 마커의 애니메이션 사이에 공간을 둘 수 있습니다.

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

예 보기(marker-animations-iteration.html)