ループを使用してマーカーを追加すると、Leafletjsマップオーバーレイが機能しなくなる

Question

手動で緯度と経度を入力すると.addTo(layer)。右上のオーバーレイメニューが表示され、マーカーをフィルタリングできます。

しかし、緯度と経度のマーカーのJSONリストを渡して、繰り返してマーカーを作成してから.addTo(layer)を作成します。オーバーレイメニューは消えますが、マーカーは正しく生成されます。

Leafletjsスクリプト（手動で緯度と長い入力された）：https://jsfiddle.net/kdu2woLb/1/

var cities = new L.LayerGroup(); 
    L.marker([40.7864742, -73.9393257], {icon: citiesIcon}).bindPopup('Job Title: ').addTo(cities); 
    L.marker([40.8561684, -73.89659800000001], {icon: citiesIcon}).bindPopup('Job Title: ').addTo(cities); 

var jobs = new L.LayerGroup(); 
    L.marker([40.7127837, -74.0059413], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs); 
    L.marker([40.7348796, -73.86348939999999 ], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs); 

（マーカーを生成するために、ループを使用して）Leafletjsスクリプト：https://jsfiddle.net/8qmk33kp/2/

var cities = new L.LayerGroup(); 
    for (var i=0; i < markers.length; ++i) 
    { 
    L.marker([markers[i].latitude, markers[i].longitude], {icon: jobIcon}) 
     .bindPopup(markers[i].title+ '<br/>' + 'Address: ' + markers[i].address + '<br />' + 'Salary range: ' + '$' + markers[i].min_salary + ' - ' + '$' + markers[i].max_salary) 
     .addTo(cities); 
    } 

    var jobs = new L.LayerGroup(); 
    L.marker([40.7127837, -74.0059413], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs); 
    L.marker([40.7348796, -73.86348939999999 ], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs); 

なぜ私は本当に理解していませんループでオーバーレイが分割されます。コードを見ると、各マーカーが作成されてオーバーレイに追加されているようです。だからそれは生成され、フィルタに渡される必要がありますか？なぜマーカーは正しく生成されますが、オーバーレイメニューは消えますか？

洞察が役立ちます。ありがとう！

---

UPDATE：作業オーバーレイと非稼働オーバーレイの両方にjsfiddleのリンクを追加しました。私のJSONリストと間違って何か、私は3-4のマーカー以外のすべてを削除する場合、オーバーレイが再び動作があるように見える... https://jsfiddle.net/qm5vd6k4/1/

Answer 1

は、1596年にあなたの記録1592を参照してください含ま：更新

//i = 1592 
{ 
    "title": "PRINCIPAL ADMINISTRATIVE ASSOC", 
    "latitude": null, 
    "longitude": null 
} 
//i = 1593 
{ 
    "title": "PUBLIC HEALTH ADVISER", 
    "latitude": null, 
    "longitude": null 
} 
//i = 1594 
{ 
    "title": "COMMUNITY COORDINATOR", 
    "latitude": null, 
    "longitude": null 
} 
//i = 1595 
{ 
    "title": "ADMINISTRATIVE PUBLIC HEALTH N", 
    "latitude": null, 
    "longitude": null 
} 
//i = 1596 
{ 
    "title": "FAMILY PUB HEALTH NURSE (HMH)", 
    "latitude": null, 
    "longitude": null 
} 

をJSFiddle：https://jsfiddle.net/8qmk33kp/3/