Así que tengo un botón de búsqueda que muestra dinámicamente los hoteles. Quiero junto a ellos Quiero mostrar un mapa. Por el momento tengo la misma latitud y longitud para todos los hoteles, así que espero ver el mismo mapa. Sin embargo, actualmente solo veo un mapa generado para el primer hotel. El resto están en blanco. ¿Qué estoy haciendo mal?

Aquí está el código:

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script> <script th:inline="javascript"> function initMap() { fetch('http://localhost:8080/accommodations') .then(response => { return response.json() }) .then((data) => { console.dir(data) data.forEach(function (hotel) { console.log(hotel); const coords = { lat: parseFloat(hotel.lat), lng: parseFloat(hotel.lng) }; console.log(coords); const map = new google.maps.Map( document.getElementById('map'), {zoom: 15, center: coords}); const marker = new google.maps.Marker({position: coords, map: map}); }) }) } </script>

 <script type="text/javascript" th:inline="javascript"> document.getElementById('showAll').addEventListener('click', showAll); function showAll() { // window.addEventListener('DOMContentLoaded', (event) => { fetch('http://localhost:8080/accommodations') .then(response => { return response.json() }) .then((data) => { console.dir(data) let output = '<h2 style="padding-left: 27px"> Search Results </h2>' data.forEach(function (hotel) { console.dir(hotel) initMap(); output += ` <div class="col-lg-3 px-0" id="map"></div> `; }); document.getElementById('output').innerHTML = output }) }