マーカーのアニメーションのリフレッシュ

Question

Googleマップには、クリックしたボタンに応じて表示または非表示にする複数のマーカーが含まれています。私は各マーカーを変数インスタンスにする必要があるので、私はそれらを私がGoogle Maps関数setMap（null）を実行するforループ内で呼び出す配列にすべてのインスタンスをプッシュしました。

私のコードは動作していますが、各ボタンの最初のクリックでのみ動作するマーカーにアニメーションを追加してから、アニメーション化しません。

ボタンをクリックするたびにアニメーションを繰り返すにはどうすればよいですか？

jsFiddle here

function init() { 
    var mapOptions = { 
    center: new google.maps.LatLng(4.7102000, -74.0308118), 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 


// Function that places, shows and hide markers 
function markerHelper(lat, lng) { 
     var self = this; 
     self.place = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat, lng), 
      animation: google.maps.Animation.DROP, 
      draggable: true 
     }); 

     self.show = function() { 
      self.place.setMap(map); 
     }; 

     self.hide = function() { 
      self.place.setMap(null); 
     }; 
    } 

    // Will store all arrays of markers 
    var allMarkers = []; 

    // Insert new instances of Markers into allMarkers array 
    function pushApply(arr2) { 
     allMarkers.push.apply(allMarkers, arr2); 
    } 


    // @arg is the data-map value 
    // arg[index].show() is an instance of markerHelper show function() 
    // There is an interval that delays marker placing 
    // This function will be executed inside clickBtn function 
    function showAll(arg) { 
     var index = 0; 
     var time = setInterval(function() { 
      arg[index].show(); 

      ++index; 
      if (index == arg.length) clearInterval(time); 
     }, 100); 
    } 

    // Run hide to all instances inside allMarkers array 
    // markerHelper (Hide = this.place.setMap(null)); 
    // This function will be executed inside clickBtn function 
    function hideAll() { 
     for (var key in allMarkers) { 
      allMarkers[key].hide(); 
     } 
    } 

    // When <li data-map> is clicked 
    // @btn: data-map value 
    // @ov: the array that contains the markers I want to show 
    function clickBtn(btn, ov) { 
     $(document).on('click', '[data-map="' + btn + '"]', function() { 
       hideAll(); 
       showAll(ov); 
      }); 
    }; 


    // # Marker Group 4 
    // We create the instances of the markers, and store each inside overlay_4 array 
    var ov_4_a = new markerHelper(4.710948481769617, -74.0315896406143), 
     ov_4_b = new markerHelper(4.709697447502667, -74.03232456588438), 
     ov_4_c = new markerHelper(4.710536816896051, -74.03155208968809), 
     ov_4_d = new markerHelper(4.710258809311084, -74.03160573386839); 
    var overlay_4 = [ov_4_a, ov_4_b, ov_4_c, ov_4_d]; 
    clickBtn(4, overlay_4); // When <li> has data-map of 4 
    pushApply(overlay_4); // stores these arrays into allMarkers array, which is used to macro hide all markers 

    // # Marker Group 5 
    // The same explanation for Marker Group 4 
    var ov_5_a = new markerHelper(4.710109112873151, -74.03126777553251), 
     ov_5_b = new markerHelper(4.70956378986245, -74.03231920146635), 
     ov_5_c = new markerHelper(4.709970109009067, -74.03097273254087); 
    var overlay_5 = [ov_5_a, ov_5_b, ov_5_c]; 
    clickBtn(5, overlay_5); 
    pushApply(overlay_5); 

    // # Marker Group 11 
    // The same explanation for Marker Group 4 
    var ov_11_a = new markerHelper(4.710258809311084, -74.03104783439329), 
    ov_11_b = new markerHelper(4.709980801614976, -74.0310853853195), 
    ov_11_b1 = new markerHelper(4.710119805476923, -74.03129459762266), 
    ov_11_b2 = new markerHelper(4.709788334683346, -74.03131069087675), 
    ov_11_c = new markerHelper(4.710820170666335, -74.03052212142637), 
    ov_11_d = new markerHelper(4.7096546770605965, -74.03197051429441), 
    ov_11_e = new markerHelper(4.710718591026117, -74.03111757182768), 
    ov_11_f = new markerHelper(4.711365492691726, -74.03219581985167), 
    ov_11_i = new markerHelper(4.7099754553120405, -74.03072060489347), 
    ov_11_k = new markerHelper(4.710258809311084, -74.03105319881132); 
    var overlay_11 = [ov_11_a, ov_11_b, ov_11_b1, ov_11_b2, ov_11_c, ov_11_d, ov_11_e, ov_11_f, ov_11_i, ov_11_k]; 
    clickBtn(11, overlay_11); 
    pushApply(overlay_11); 


    map.setMap(); 
} 

init(); 

Answer 1

marker.setAnimation()を使用すると、それをリセットすることができます：

self.show = function() { 
    self.place.setMap(map); 
    self.place.setAnimation(null); 
    self.place.setAnimation(google.maps.Animation.DROP); 
}; 

Modified JSFiddle