good morning from Indonesia. 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>
Thank you