Using addDomListener with broken googlemaps

Question

I built tokens for googlemap by querying the database in php, then sending the data to the addMarker function.

For each marker, there is 0 to an unknown number of "violations". I put the violations for each marker in an array (called violations) and sent it also to the addMarker function.

I would like to have a link to every violation. When you click on the link, you see the details (table) for this violation.

The table first displays: none. But when you click on the link, I would like the display to lock and the link disappear.

I would like to use jquery to accomplish this task, but I am having trouble implementing it.

I am trying to use addDomListener, but it just does not work for me - it crashes the page without an explicit error message. Can someone tell me how to use addDomListener correctly, please, or should I use 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

There seems to be a problem with $ ("# thisDesc") [0] looking for an element in infowindow. This will not exist in the DOM and will be available until the infowindow "domready" event begins. Place the jQuery code inside the function that fires in the infowindows "domready" event.

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