Spring + Thymeleaf - Display multiple markers from database (Longitude and latitude)

Question

I have written code to fetch data from the database displayed in a table. I want to fetch the longitude and latitude so I can display multiple markers via the Google Maps API. Currently I have a marker with a hardcoded longitude and latitude values. I assume a for loop will have to be used to fetch the latitude and longitude values in order to pass the data to the markers.

Here's the code I currently have for the map. I have hardcoded coordinates for the marker.

<div id="map"></div>

    <script th:inline="javascript">
    /*<![CDATA[*/
    function initMap() {
        // The location of the map
        var map = new google.maps.Map(document.getElementById('map'),
        {center:{ lat: 51.903614, lng: -8.468399 }, zoom: 12 });

        var marker = new google.maps.Marker({
        position: { lat: 51.903614, lng: -8.468399 },
        map: map,
        title: 'Hello World',
        animation: google.maps.Animation.BOUNCE,
        animation: google.maps.Animation.DROP
        });
    }
    /*]]>*/
    </script>

This is the table that I created to fetch all of the data that I have from the database.

<div>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Sample</th>
        <th>Longitude</th>
        <th>Latitude</th>
        <th>Sound Level</th>
    </tr>
    <tr th:each = "sample: ${samples}">
        <td th:text="${sample.id}"></td>
        <td th:text="${sample.sample}"></td>
        <td th:text="${sample.longitude}"></td>
        <td th:text="${sample.latitude}"></td>
        <td th:text="${sample.db}"></td>
    </tr>
</table>

score 0 · Answer 1 · answered Nov 17 '22 at 14:08

You can iterate through your Thymeleaf model variable in a JavaScript code block like this:

<script th:inline="javascript">
    
    function initMap() {
        // The location of the map
        var map = new google.maps.Map(document.getElementById('map'),
        {center:{ lat: 51.903614, lng: -8.468399 }, zoom: 12 });

        /*[# th:each="sample : ${samples}"]*/
            var marker = new google.maps.Marker({
                position: { lat: [[${sample.latitude}]], lng: [[${sample.longitude}]] },
                map: map,
                title: 'Hello World',
                animation: google.maps.Animation.BOUNCE,
                animation: google.maps.Animation.DROP
                });
  
        /*[/]*/

Thanks for the reply. That didn't work for me. It might be because I'm not sure what to do here - [# th:each="sample : ${samples}"]. — Chewie, Nov 19 '22 at 15:52
Did you check what HTML gets rendered? Is the iteration not happening? — Wim Deblauwe, Nov 21 '22 at 08:57

Spring + Thymeleaf - Display multiple markers from database (Longitude and latitude)

1 Answers1