CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Karam Haj
Karam Haj

Reputation: 1250

Google maps, addlistener not working

I am using Google Maps in a project and I want to display some clickable markers on the map, each one of them is showing a Div with diffrent data, so this I started my code by getting the data form the database and works well, then i display it on map like this: 

    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, now I can see the markers on the map, when I click a marker somtimes the alert("click!!!") work but it's not showing my the Div that I want to see, and sometimes its not showing me even the alert.

I'll attach the part of HTML,CSS maybe they'll help

.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>

Upvotes: 1

Views: 1599

Answers (1)

SphynxTech
SphynxTech

Reputation: 1849

Your code crash because when the listener is calling, the value of mark and infowindow have already changed. You can try something like this (just change the showHazardDetails function):

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

Normally, the output will be always the same for mark and data.

In order to pass the real value of the marker, contentString and infowindow, you have to create an IIFE. Like this, the value of the variables will be copy inside the function:

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);
}

You may look how closures work.

Tell me if you have some questions.

Upvotes: 1

Related Questions