How can I have multiple markers with different infowindows on googlemaps

Question

I'm trying to display infowindows on different markers, however it doesn't show up and when it does show up the infowindow displays the same information on every marker. How can I fix this?

    var locations = [
        ["Dispositivo 1", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg"],
        ["Dispositivo 2", "15/08/2019",38.817562, -8.941728, 36, "foto.jpg"],
        ["Dispositivo 3", "20/07/2019",38.487978, -9.004425, 90,"foto.jpg"],
        ["Dispositivo 4", "01/07/2019",37.045804, -8.898041, 12, "foto.jpg"]

    ];




    var i = 0; 
    var infoWindow = new google.maps.InfoWindow(), marker, i;



    function setMarkers(map) {

        for ( i = 0; i < locations.length; i++) {
            var fire = locations[i];

            var marker = new google.maps.Marker({
                position: { lat: fire[2], lng: fire[3] },
                map: map

            });



            google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infoWindow.setContent('<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<div id="bodyContent">' +
            '<p><b>Avaliação da Ocorrência:</b></p>' +
            '<p>Fotografias:' + fire[0] + '</p>' +
        '<p>Avaliação:</p>' +
        '<p>Data:</p>' +
        '</div>');
        infoWindow.open(map, marker);
    }
})(marker, i));

        }
    }

Answer 1

Try to replace fire[0] in the infowindow.setcontent() with locations[i][0]

this will do.

There is a similar topic in the link below:

Google Maps JS API v3 - Simple Multiple Marker Example

Best Regards.