1

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>
Karam Haj
  • 1,080
  • 2
  • 9
  • 20
  • 1
    Possible duplicate of [Adding an onclick event to google.map marker](https://stackoverflow.com/questions/16985867/adding-an-onclick-event-to-google-map-marker) – Pedram Dec 24 '17 at 12:23
  • I get a javascript error with the posted code: `Uncaught ReferenceError: marker is not defined`. You have a typo in the posted code: `showHazardDetails(marker, hazards[i]);` If I fix that (change it to `markerHzr`, it works for me (at least does what I expect)). – geocodezip Dec 24 '17 at 16:49
  • markerHzr is an image. – Karam Haj Dec 24 '17 at 16:56

1 Answers1

1

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.

SphynxTech
  • 1,799
  • 2
  • 18
  • 38