複数の情報ウィンドウを間隔で更新する

Question

ajaxリクエストの後、すべての情報ウィンドウを開いていても更新したい、map api v3を使用しています。私はマーカと位置を更新できますが、infoWindowではなく、thisのアプローチにも従っています。あなたは私のコードを以下で確認することができます。現在のスニペットも各ウィンドウで同じ内容を設定していますので、情報ウィンドウが開いたら確認してから「更新」ボタンをクリックしてください。

var locations = [ 
 
    [ 
 
     "New Mermaid", 
 
     36.9079, 
 
     -76.199, 
 
     1, 
 
     "Georgia Mason", 
 
     "", 
 
     "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", 
 
     "coming soon" 
 
    ], 
 
    [ 
 
     "1950 Fish Dish", 
 
     36.87224, 
 
     -76.29518, 
 
     2, 
 
     "Terry Cox-Joseph", 
 
     "Rowena's", 
 
     "758 W. 22nd Street in front of Rowena's", 
 
     "found" 
 
    ], 
 
    [ 
 
     "A Rising Community", 
 
     36.95298, 
 
     -76.25158, 
 
     3, 
 
     "Steven F. Morris", 
 
     "Judy Boone Realty", 
 
     "Norfolk City Library - Pretlow Branch, 9640 Granby St.", 
 
     "coming soon" 
 
    ], 
 
    [ 
 
     "A School Of Fish", 
 
     36.88909, 
 
     -76.26055, 
 
     4, 
 
     "Steven F. Morris", 
 
     "Sandfiddler Pawn Shop", 
 
     "5429 Tidewater Dr.", 
 
     "found" 
 
    ] 
 
    ] 
 
    var markers = []; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 12, 
 
     // center: new google.maps.LatLng(-33.92, 151.25), 
 
     center: new google.maps.LatLng(36.8857, -76.2599), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
      icon: { 
 
       url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png', 
 
       size: new google.maps.Size(60, 60) 
 
      }, 
 
      map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
      return function() { 
 
       infowindow.setContent(locations[i][0], locations[i][6]); 
 
       infowindow.open(map, marker); 
 
      } 
 
     })(marker, i)); 
 
     markers.push(marker); 
 
    } 
 
    $(document).ready(function() { 
 

 
     function updateMarkers(m) { 
 
      $.each(m, function (i, mkr) { 
 
       pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng()); 
 
       mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png'); 
 
       mkr.setPosition(pos); 
 
       infowindow.setContent('<div>Update:'+locations[i][7]+'</div>');/**/ 
 
      }); 
 
     }; 
 
     $('#update').click(function() { 
 
      updateMarkers(markers); 
 
     }) 
 
    });

#update{ 
 
    font-family:arial; 
 
    background:#fff; 
 
    padding:10px; 
 
    border-radius:5px; 
 
    display:inline-block; 
 
    margin:10px; 
 
    cursor:pointer; 
 
    box-shadow:0 0 3px rgba(0,0,0,.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><a id="update">UPDATE</a> 
 
</div> 
 
    <div id="map" style="width: 500px; height: 400px;"></div> 
 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
</div>

Answer 1

あなたは4つのマーカーの配列が、唯一つの情報ウィンドウを持っています。したがって、updateMarkersに電話をすると、4回ループして1つのインフォボックスの内容を設定します。結局、情報ウィンドウは配列の最後の項目の内容しか持たない。

ただし、マーカーのクリックイベントリスナーのsetContentは、インフォウィンドウに設定した可能性のあるコンテンツを上書きします。また、updateMarkersを呼び出すときにそのイベントリスナーを削除する必要があります。

マーカーのクリックイベントリスナーを独自の関数に移動し、最初にマーカーを作成したときとマーカーを更新するときの両方で呼び出すことができます。

もう少しような何か：

var openMarker; 

function updateInfowindow(marker, content) { 
    marker.addListener('click', (function (marker, content) { 
     return function() { 
      infowindow.setContent(content); 
      infowindow.open(map, marker); 
     } 
    })(marker, content)); 
} 



for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     icon: { 
      url: 'http://map.vegan.london/wp-content/uploads/map-marker-blue.png', 
      size: new google.maps.Size(60, 60) 
     }, 
     map: map, 
     index: i 
    }); 

    updateInfowindow(marker, locations[i][0] + ', ' + locations[i][6]); 

    marker.addListener('click', function() { 
     openMarker = this.index; 
    }); 

    markers.push(marker); 
} 

$(document).ready(function() { 
    function updateMarkers(m) { 
     $.each(m, function (i, mkr) { 
      pos = new google.maps.LatLng(mkr.position.lat() + .010, mkr.position.lng()); 
      mkr.setIcon('http://kallyaswp.hogashstudio.netdna-cdn.com/demo/wp-content/uploads/2015/08/map-marker.png'); 
      mkr.setPosition(pos); 
      updateInfowindow(mkr, '<div>Update:'+locations[i][7]+'</div>'); 

      if (openMarker == i) { 
       google.maps.event.trigger(mkr, 'click'); 
      } 
     }); 
    }; 
    $('#update').click(function() { 
     updateMarkers(markers); 
    }) 
}); 

更新：おそらくマーカーが最後にクリックされていますこれを追跡するために、グローバル変数を使用することができます。各マーカーにカスタムの 'インデックス'プロパティを追加しました。マーカーを更新したら、それぞれをチェックしてマーカーが開いているかどうかを確認します。その場合は、クリックをもう一度トリガーして、情報ウィンドウを再度開く必要があります。私はこれがうまくいくと思います。