Google Maps、addlistener not working

Question

私はプロジェクトでGoogle Mapsを使用しています。地図上にいくつかのクリック可能なマーカーを表示したいのですが、それぞれが異なるデータを持つDivを表示しています。 （「クリックし、アラートをsomtimes私はマーカーをクリックしたときに

showHazardsOnMap(result); 

    function showHazardsOnMap(hazards) { 
    var imgHzr = { 
     url: "images/hazardPointer.png", // url 
     scaledSize: new google.maps.Size(60, 60), // scaled size 
     origin: new google.maps.Point(0, 0), // origin 
     anchor: new google.maps.Point(0, 0) 
    }; 

    setMapOnAll(null); 
    for (var i = 0; i < hazards.length; i++) { 
     markerHzr = new google.maps.Marker({ 
      position: { lat: hazards[i].Hazard_Lat, lng: hazards[i].Hazard_Long  }, 
      map: map, 
      icon: imgHzr, 
      animation: google.maps.Animation.DROP 
     }); 
     showHazardDetails(marker, hazards[i]); 
     } 
     } 
    } 

    function showHazardDetails(mark, data) { 
     google.maps.event.addListener(mark, 'click', function() { 
      alert("clicked!!!!!!!!!!!!!!!!"); 
      $("#hazardID").html(data.Hazard_ID); 
      $("#hazardImgInfo").attr("src", data.Hazard_Image); 
      $("#pDate").html(data.Hazard_DateTime); 
      $("#pDes").html(data.Hazard_Description); 
      $(".hazardInfo").fadeIn(1000); 
     }); 
    } 

[OK]を、今私は、地図上のマーカーを見ることができます!!!：データは、データベースを形成し、うまく機能し、その後、私はこのような地図上に表示します"）は働いているが、私が見たいと思っている私のDivを見せていない。

私は多分、彼らはリスナーがmarkとinfowindowの値が既に変更されている、呼び出しているときので

.hazardInfo { 
width: 80%; 
height: 80%; 
background-color: #f5821f; 
z-index: 2000; 
position: fixed; 
top: 10%; 
right: 10%; 
opacity:0.9; 
text-align: center; 
display: none; 
border: none; 
border-radius: 10px;  
} 


<div class="hazardInfo"> 
    <p id="hazardID"></p> 
    <img src="images/backbtn.png" class="backButton" /><br> 
    <p id="pDate" style="font-size:18px; margin-top:11%;"></p><br> 
    <img src="images/156.jpg" id="hazardImgInfo" style="height: 40%; width: 90%; border-radius:15px;"><br> 
    <p id="pDes" style="font-size:17px; margin-top:4%; margin-right:4%; width:90%;"></p><br> 
    <div id="thumbsUp">הוסף לרשימה</div> 
</div> 

Answer 1

あなたのコードのクラッシュをお手伝いしますHTML、CSSの一部を添付します。あなたは（ちょうどshowHazardDetails機能を変更）このような何かを試すことができます。

function showHazardDetails(mark, data) { 
    google.maps.event.addListener(mark, 'click', function() { 
     alert("clicked!!!!!!!!!!!!!!!!"); 
     console.log (mark); 
     console.log (data); 
    }); 
} 

通常は、出力は常にmarkとdata同じになります。

マーカcontentStringとinfowindowの実際の値を渡すには、IIFEを作成する必要があります。このように、変数の値は、関数の内部でコピーされます。

function showHazardDetails(mark, data) { 
    (function (zmark, zdata) { 
    google.maps.event.addListener(zmark, 'click', function() { 
     alert("clicked!!!!!!!!!!!!!!!!"); 
     $("#hazardID").html(zdata.Hazard_ID); 
     $("#hazardImgInfo").attr("src", zdata.Hazard_Image); 
     $("#pDate").html(zdata.Hazard_DateTime); 
     $("#pDes").html(zdata.Hazard_Description); 
     $(".hazardInfo").fadeIn(1000); 
    }); 
    })(mark, data); 
} 

あなたはhow closures workて見える場合があります。

質問がありましたら教えてください。