Quiero mostrar una ubicación en Google Maps cuyos datos se obtienen de una base de datos. Hasta ahora, he sido capaz de hacerlo. Sin embargo, todavía hay un problema al mostrar la ventana de información como se muestra a continuación.

Cuando hago clic en uno de los marcadores, puede abrir una ventana de información con datos de ese marcador.

Y cuando hago clic en otro marcador, también muestra datos de ese marcador. Pero la ventana de información aún se enfoca en el mismo marcador.

¿Como arreglarlo? el siguiente código que he hecho.

 <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>