Нарисуйте разницу широты и долготы, используя тимили и карты Google

Question

Я получаю кратные широту и долготу, и я пытаюсь нарисовать в Google Maps, но я не знаю точно, как это сделать, я думаю, что моя проблема в HTML.

Вот мой Java код с использованием Spring:

``

@RequestMapping("/mapausuarios") //controlador que controla lo que viene a la raíz
public String mapausers(Model model) throws ParseException {

        tablausuario tu = new tablausuario();
        ArrayList<usuario> user = tu.listausuarios();
        Collections.sort(user, (o1, o2) -> o2.getCreatedAt().compareTo(o1.getCreatedAt())); //tabla ordenada
        model.addAttribute("TodosLosUsuarios", user);

    return "mapausers";

}

Я могу извлечь де широты и долготы в таблицу, используя это:

                    <tbody  th:each="usuariosTotales: ${TodosLosUsuarios}" >
                        <tr>
                        <td th:text=" ${usuariosTotales.getLatitude()} " ></td>
                        <td th:text=" ${usuariosTotales.getLongitude()} " ></td>
                        </tr>
                    </tbody>

Но я не знаю, как мне l oop и рисовать в своем сценарии:

       <div id="map"></div>
       var geocoder;
       var map;

       <script>
           // Initialize and add the map
           function initMap() {
               // The location of Uluru
               var uluru = {lat: 40.416775, lng: -3.703790};
               // The map, centered at Uluru
               var map = new google.maps.Map(
                       document.getElementById('map'), {zoom: 4, center: uluru});
               // The marker, positioned at Uluru
               var marker = new google.maps.Marker({position: uluru, map: map});
           }
       </script>
       <script async defer
               src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
       </script>

Помогите, пожалуйста!

Answer 1

<script th:inline="javascript">
  var user = ${TodosLosUsuarios} ;

   function plotUser(user) {
       // The location of Uluru
       var uluru = {lat: user.latitude, lng: user.longitude};
       // The map, centered at Uluru
       var map = new google.maps.Map(
               document.getElementById('map'), {zoom: 4, center: uluru});
       // The marker, positioned at Uluru
       var marker = new google.maps.Marker({position: uluru, map: map});
   }

  function loadUsers()
   {
        var user = ${TodosLosUsuarios} ;
        for(var i=0;i<users.length;i++)
        {
            plotUser(users[i]);
        }           
   }

<script async defer
   src="https://maps.googleapis.com/maps/api/js?key=***********&callback=loadUsers">

Для того, чтобы нанести пользователей на график, вам необходимо сохранить данные пользователей на внешнем интерфейсе. Это одно из решений. Я надеюсь, что это сработает для вас