Google map clear specific marker help（JS）

Question

firebaseとgoogle maps APIの組み合わせを使ってマップ上にインタラクティブなマーカーを作成しようとしています。

私はマーカーを生成することができますが、マーカーを削除する方法を探したいと思います。

私は苦痛を感じることができるボタンを含むアドレスのリストを生成します。プッシュされた場合、ボタンはsetMapをnullに設定してマーカーを削除します。 clearItem機能で自分のマーカーを参照するとき

しかし、それはEMSにエラーを与える

すべてのヘルプ「を未定義のてsetMapを参照することができませんか」？

のような配列を使用します。var markerArray = [];

firebase.database().ref().on('value', function(snapshot) 
{ 
    var pointerLocations = document.getElementById("locations"); 
    var databaseKeys = snapshot.val(); //Returns one object of many object attributes 

    var list=""; 

    if(databaseKeys == null){ 
     console.log("Error handled"); 
    } 

    else{ 

     for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){ 
      list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>"; 
      list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>"; 
      var keyString = Object.keys(databaseKeys)[i].toString(); 
      list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>" 
      //Calls google map 

      codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, map,i); 

     } 
    } 
    pointerLocations.innerHTML = list; 
} 
); 


function codeAddress(address,mapGlobl,i) { 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 

     if (status == 'OK') { 
     // map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     markers.push(marker); 



     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 


function clearItem(databaseID,position){ 
    firebase.database().ref(databaseID).remove(); 
    markers[i].setMap(null); 
} 

EDIT：代わりに配列

firebase.database().ref().on('value', function(snapshot) 
{ 
    var pointerLocations = document.getElementById("locations"); 
    var databaseKeys = snapshot.val(); //Returns one object of many object attributes 

    var list=""; 

    if(databaseKeys == null){ 
     console.log("Error handled"); 
    } 
    else{ 

     for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){ 
      list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>"; 
      list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>"; 
      var keyString = Object.keys(databaseKeys)[i].toString(); 
      list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>" 
      //Calls google map 

      codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, databaseKeys[Object.keys(databaseKeys)[i]].name, map,i); 

     } 
    } 
    pointerLocations.innerHTML = list; 
} 
); 

function codeAddress(address, name, mapGlobl,i) { 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 

     if (status == 'OK') { 
     // map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 

     latLongObj[i] = {lat : results[0].geometry.location.lat(), lng : results[0].geometry.location.lng(), add: address, name : name}; 

     console.log("Placing Market at " + i); 
     markers['marker'+i] = marker; 



     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 


function clearItem(databaseID,position){ 


    console.log(markers); 

    console.log("Removing at position: "+ position); 

    firebase.database().ref(databaseID).remove(); 

    markers['marker'+position].setMap(null); 

    delete markers['marker'+position]; 

    console.log(markers); 
} 

Answer 1

問題のオブジェクトを使用する変数iを使用して

コメントへの対応はgeocoder.geocode()機能が非同期であるということです。 Google Maps APIドキュメントから：

Google Maps APIは外部サーバーを呼び出す必要があるため、ジオコーディングサービスへのアクセスは非同期です。そのため、要求の完了時に実行するコールバックメソッドを渡す必要があります。

あなたのmarkers.push(marker);はそのコールバック関数内で起こっています。非同期なので、いつ呼び出されるかは保証されません。 push()関数は、次に利用可能な配列インデックスを使用して配列にマーカーを追加しますが、関数呼び出しの間に渡している値iに基づいてすべてを行います。 Google Maps APIに問題が発生し、コールバック関数が呼び出されたり、遅れて呼び出されたりすると（ネットワーク待ち時間のためなど）、マーカー配列に順序が乱れたり、配列インデックスにギャップが追加される可能性があります。

最も簡単な解決策は、これは、それはあなたが期待しているインデックス付きのマーカー配列に追加されることを保証し（と、それはその<button>要素のi値と一致するまで）markers.push(marker);markers[i] = marker;に変更することです。