Map marker [] arrayにイベントリスナーを追加する方法

Question

私は、マップ上のピンを2つの関数呼び出しとマーカー[]配列を使って削除するGoogleマップ実装があります。

これはうまくいきますが、マーカー変数が明示的に定義されていないため、関数にonClickイベントや他のタイプのイベントリスナーを追加する方法を理解できません。私は、これはここで

google.maps.event.addListener(markers, 'click', function() { 
window.location.href = this.url;}; 

を?:ようなものを追加することができるだろう

は、私の基本的なマップコードと機能である：

var pinlocations = [ 
    ['1', {lat: 30.266758, lng: -97.739080}, 12, '/establishments/1111'], 
    ['2', {lat: 30.267178, lng: -97.739050}, 11, '/establishments/1222'], 
    ['3', {lat: 30.267458, lng: -97.741231}, 10, '/establishments/1333'], 
    ['4', {lat: 30.388880, lng: -97.892276}, 9, '/establishments/1444'] 
]; 

     var markers = []; 
     var map; 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: {lat: 30.267178, lng: -97.739050} 
     }); 

     } 

     function drop() { 
     clearMarkers(); 
     for (var i = 0; i < pinlocations.length; i++) { 
      var place = pinlocations[i]; 
      addMarkerWithTimeout(place[1], place[0], place[2], place[3], i * 200); 
     } 
     } 

     function addMarkerWithTimeout(position, title, zindex, url, timeout) { 
     window.setTimeout(function() { 
      markers.push(new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: title, 
      zIndex: zindex, 
      url: url, 
      animation: google.maps.Animation.DROP 
      })); 
     }, timeout); 
     } 

Answer 1

あなたは配列にイベントを追加していません、配列内の各要素に追加する必要があります。

// Iterate the markers array 
markers.forEach(function(marker){ 
    // Set up a click event listener for each marker in the array 
    marker.addListener('click', function() { 
    window.location.href = marker.url; 
    }); 
}); 

それとも、あなたは別のアプローチを取り、個々のマーカーが作成された時点でイベントを追加することができます。あなたは.forEach()アレイ法でこれを行うことができます。

function addMarkerWithTimeout(position, title, zindex, url, timeout) { 
    window.setTimeout(function() { 
     markers.push(new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: title, 
     zIndex: zindex, 
     url: url, 
     animation: google.maps.Animation.DROP 
     }).addListener('click', function() { 
     window.location.href = this.url; 
     }); 
    }, timeout); 
    }