I want to display a location on google maps whose data is fetched from a database. So far, I've been able to do it. But, there is still a problem when displaying the infowindow as shown below.

When I click on one of the markers, it can bring up an infowindow with data from that marker.

And when I click on another marker, it also displays data from that marker. But the infowindow still focuses on the same marker.

How to fix it? the following code that I have made.

<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 10,
            center: { lat: -6.261493, lng: 106.810600 },
    });
    
    setMarkers(map);
    }
    
    const locations = @php print_r(json_encode($markers)) @endphp;
    
    function setMarkers(map) {
    
    for (let i = 0; i < locations.length; i++) {
        
        const location  = locations[i];

        let html = "";
        html += `<div id="content-${location[0]}">`;
        html += `<div id="siteNotice">`;
        html += `</div>`;
        html += `<h1 id="firstHeading" class="firstHeading">${location[1]}</h1>`;
        html += `<div id="bodyContent">`;
        html += `<p>${location[2]}</p>`;
        html += `<a href="reports/show/${location[0]}" class="btn btn-dark btn-sm">Detail</a>`;
        html += `</div>`;
        html += `</div>`;

        const infowindow = new google.maps.InfoWindow({
            content: html,
        });

        marker = new google.maps.Marker({
        position: { lat: parseFloat(location[4]), lng: parseFloat(location[5]) },
        map,
        title: location[3]
        });

        marker.addListener("click", () => {
            infowindow.open({
            anchor: marker,
            map,
            shouldFocus: true,
            });
        });

        console.log(location);
    
        }
    }
</script>