addEventListener not showing information window on click (JavaScript)

Question

I'm working on a web application for a disaster management lab assignment that is using the Google Places and Maps JavaScript API. The goal is to have markers on the map which are attached to an event listener which is supposed to show an information window with the data about a disaster report. However, the window is not showing up when I click on the marker. The pointer finger icon shows when I hover over a point, yet no information window appears when I click on the marker. There are zero errors in the dev console when I run it through IntelliJ and Tomcat, and I tried changing addListener to addEventListener but it still doesn't work. I will post my code below but let me know if you need anything else to help. For security reasons, I have replaced my API key with MY_API_KEY, so I guess you will have to have access to the Google API's yourself in order to help so I apologize for that. Thanks!

P.S. When I tried creating the snippet it came up with the following error which I'm unsure where the error is coming from because there is no line 302 in the JS code: { "message": "Uncaught SyntaxError: Unexpected end of input", "filename": "https://stacksnippets.net/js", "lineno": 302, "colno": 5 }

Here's what the information window is supposed to look like:

//loadform.js
function onSelectReportType(ele) {
  var form = $(ele).parent().parent();
  var label = $(form).find(".additional_msg");
  var select = $(form).find(".additional_msg_select");

  switch (ele.value) {
    case "donation":
    case "request":
      label.text("Resource Type:");
      select.find('option').remove();
      select.append($("")
        .attr("value", "")
        .text("Choose the resource type"));
      selectValues = ['water', 'food', 'money', 'medicine', 'cloth',
        'rescue/volunteer'
      ];
      $.each(selectValues, function(index, value) {
        select.append($("")
          .attr("value", value)
          .text(value));
      });
      break;
    case "damage":
      label.text("Damage Type:");
      select.find('option').remove();
      select.append($("")
        .attr("value", "")
        .text("Choose the damage type"));
      selectValues = ['polution', 'building damage', 'road damage', 'casualty',
        'other'
      ];
      $.each(selectValues, function(index, value) {
        select.append($("")
          .attr("value", value)
          .text(value));
      });
      break;
    default:
      $(form).find(".additional_msg_div").css("visibility", "hidden");
      return;
  }
  $(form).find(".additional_msg_div").css("visibility", "visible");


  //loadmap.js
  var map;
  var infowindow = new google.maps.InfoWindow();

  function initialization() {
    showAllReports();
  }

  function showAllReports() {
    $.ajax({
      url: 'HttpServlet',
      type: 'POST',
      data: {
        "tab_id": "1"
      },
      success: function(reports) {
        mapInitialization(reports);
      },
      error: function(xhr, status, error) {
        alert("An AJAX error occured: " + status + "
Error: " + error);
      }
    });
  }

  function mapInitialization(reports) {
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    };

    // Render the map within the empty div
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();

    $.each(reports, function(i, e) {
      var long = Number(e['longitude']);
      var lat = Number(e['latitude']);
      var latlng = new google.maps.LatLng(lat, long);

      bounds.extend(latlng);

      // Create the infoWindow content
      var contentStr = 'Report Details
';
      contentStr += '' + 'Disaster' + ': ' + e['disaster'] + '';
      contentStr += '' + 'Report Type' + ': ' + e['report_type'] +
        '';
      if (e['report_type'] == 'request' || e['report_type'] == 'donation') {
        contentStr += '' + 'Resource Type' + ': ' +
          e['resource_type'] + '';
      } else if (e['report_type'] == 'damage') {
        contentStr += '' + 'Damage Type' + ': ' + e['damage_type'] +
          '';
      }
      contentStr += '' + 'Timestamp' + ': ' +
        e['time_stamp'].substring(0, 19) + '';
      if ('message' in e) {
        contentStr += '' + 'Message' + ': ' + e['message'] + '';
      }

      // Create the marker
      var marker = new google.maps.Marker({ // Set the marker
        position: latlng, // Position marker to coordinates
        map: map, // assign the market to our map variable
        customInfo: contentStr,
      });

      // Add a Click Listener to the marker
      google.maps.event.addEventListener(marker, 'click', function() {
        // use 'customInfo' to customize infoWindow
        infowindow.setContent(marker['customInfo']);
        infowindow.open(map, marker); // Open InfoWindow
      });

    });

    map.fitBounds(bounds);

  }


  //Execute our 'initialization' function once the page has loaded.
  google.maps.event.addDomListener(window, 'load', initialization);

html,
body {
  background-color: #f5f5f5;
}

body {
  padding-top: 50px;
}

.container-fluid,
.row {
  background-color: #f5f5f5;
}

.sidebar {
  padding: 12px;
  background-color: #f5f5f5;
}

form {
  padding-top: 12px;
}

#map-canvas {
  height: 100%;
  position: absolute;
  right: 0;
}





  
  Web Project

  
  

  
  
  

  
  
  

  
  



  
    Disaster Management Portal
  

  
    
      

        
        
          Create Report
          Query
        

        
        
          
          
            
              First Name: 
              Last Name: 
              
                 Male
                 Female
              
              Age: 
              Blood Type:
                
              
              Tel: 
              Email: 
              Contact's First Name: 
              Contact's Last Name: 
              Contact's Tel: 
              Contact's Email: 
              Report Type:
                
              
              
                
              
              Disaster Type:
                
              
              Address:
                
              
              Comment: 
              
            
          

          
          
            
              Report Type:
                
              
              
                
              
              Disaster Type:

user_16538252 · Answer

Thank you Randy for the solution! I had to modify the example from the Google Maps documentation to match what the lab wanted but I figured it out. I included the infowindow.setContent(marker['customInfo']); from my original code and changed my code to match the syntax from the documentation.

Here's the working code for the Click Listener:

        // Add a Click Listener to the marker
        marker.addListener('click', () => {
            infowindow.setContent(marker['customInfo']);
            infowindow.open({
                anchor: marker,
                map,
                shouldFocus: false,
            });
        });

addEventListener not showing information window on click (JavaScript)

1 Answers