jquery - using addDomListener with googlemaps not working

Question

I've built markers for a googlemap by querying a database in php, then sending the data to an addMarker function.

For each marker, there are 0 to an unknown number of "violations." I've put the violations for each marker into an array (called violations) and sent it to the addMarker function as well.

What I'd like to do is have a link for each violation. When you click the link, you see the details (a table) for that violation.

The table initially is display:none. But when you click the link, I'd like the display to go to block and the link to disappear.

I'd like to use jquery to accomplish this task, but I'm having trouble implementing it.

I've been trying to use addDomListener, but it just isn't working for me--it breaks the page without a clear error message. Can anyone tell me how to properly use addDomListener, please, or should I be using something else?

function addMarker(point, name, violations, map) {
            var marker=new google.maps.Marker({
              position:point,
              icon:'circle.png'
              });

            marker.setMap(map);


            var markerhtml = "";
            markerhtml += "<div class='table-responsive'><table class='table-condensed'><tr><th colspan='2'>" + name + "</th></tr>";

            markerhtml += "</table>";
            vCount = violations.length/6; //6=number of fields per violation; vCount = number of violations
            if (violations.length > 0) {
                markerhtml += "<p><strong>Violation";
                if (violations.length > 6) {
                    markerhtml += "s"; //make it 'violationS' if there are more than one violation
                }
                markerhtml += "</strong></p>";
                for (var j=0; j<vCount; j++) {
                    vIncidentDate = violations[0+(j*6)];
                    vFineDate = violations[1+(j*6)];
                    vFineAmount = violations[2+(j*6)];
                    vLeadPermit = violations[3+(j*6)];
                    vViolationDescription = violations[4+(j*6)];

                    markerhtml += "<div class='desc' id='desc" + j + "'>" + vViolationDescription + "</div>";
                    var thisDesc = document.getElementById("desc"+j);
                    google.maps.event.addDomListener($("#thisDesc")[0], 'click', 
                                 function(){ 
                                    $(thisDesc).fadeOut();
                                    $('#tblViolations'+j).fadeIn('slow');
                                 });    
                    vResponse = violations[5+(j*6)];

                    markerhtml += "<table id='tblViolation" + j + "' class='table-responsive table-condensed tblViolation'><tr class='nDesc'><td>Incident date:</td><td>" + vIncidentDate + "</td></tr>";
                    markerhtml += "<tr><td>Fine date:</td><td>" + vFineDate  + "</td></tr>";
                    markerhtml += "<tr><td>Fine amount:</td><td>" + vFineAmount;

                    markerhtml += "</td></tr>";
                    markerhtml += "<tr><td>Description:</td><td>" + vViolationDescription + "</td></tr>";
                    markerhtml += "<tr><td>Response:</td><td>" + vResponse + "</td></tr>";


                }
                markerhtml += "</table></div>";

            }



            google.maps.event.addListener(marker, 'click', function() {
                                      currentCenter=map.getCenter();
                                      infowindow.setContent(markerhtml);
                                      infowindow.setPosition(point);
                                      infowindow.open(map);
            }); 


            google.maps.event.addListener(infowindow, 'closeclick', function() {
                                         map.setCenter(new google.maps.LatLng(41.0342375, -77.3066405));
            });

Answer 1

Looks to be a problem with $("#thisDesc")[0] looking for an element in the infowindow. That won't exist in the DOM and be findable until after the infowindow 'domready' event fires. Put your JQuery code inside the function that runs on the infowindows 'domready' event.

google.maps.event.addListener(infowindow, 'domready', function() {
  // code here
});