Rendering map using spring boot API

Question

I am developing a web application using spring boot and am trying to implement a map on the main screen of the application. The latitude and longitude are being picked up in the mobile app, so I’m making a cart to pick up the coordinates on my map, but I’m not able to make the request. As I’m new to spring, I believe I’m missing the communication between the API and the map js. Can anyone help me?

API to generate the map.

@RestController
@RequestMapping("/api")
public class RestApiController {
@Autowired
CarrinhoService carrinhoService;

//------------------Markers Maps-------------------------------------------------

@RequestMapping(value = "/marcadores", method = RequestMethod.POST)
public ResponseEntity<List<CarrinhoDTO>> marcadores() {


    List<CarrinhoDTO> vdtos = new ArrayList<CarrinhoDTO>();
    List<Carrinho> carrinhos = carrinhoService.findByStatus("ENVIAR");


    for (Carrinho carrinho : carrinhos) {
        vdtos.add(new CarrinhoDTO(new Double(carrinho.getLatitude()), new Double(carrinho.getLongitude())));
    }

    return new ResponseEntity<List<CarrinhoDTO>>(vdtos, HttpStatus.OK);
}
}

My DTO class:

package com.bigboss.comprafacil.models;

public class CarrinhoDTO {

public double lat;
public double lng;

public CarrinhoDTO(double lat, double lng) {
    super();
    this.lat = lat;
    this.lng = lng;
}

}

My HTML, where the map will be displayed.

<div class="row">

    <div class="col-lg-12" sec:authorize="hasRole('ROLE_USER')">
        <div class="col-md-12" id="map" style="height: 700px"></div>
    </div>

</div>
<script>
function initMap() {
    $.ajax({
        type: "POST",
        url: "/RestApiController/marcadores",
        dataType: "json",
        success: function (response) {

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: {lat: -6.111754, lng: -38.203973}
            });

            // Crie uma série de caracteres alfabéticos usados ​​para rotular os marcadores..
            var caracteres = '12345678910111211314';

            // Adicione alguns marcadores ao mapa.
            // Nota: O código usa o método JavaScript Array.prototype.map () para
            // criar uma série de marcadores com base em uma dada matriz de "locais"..
            // O método do mapa () aqui não tem nada a ver com a API do Google Maps.
            var markers = response.map(function (location, i) {
                return new google.maps.Marker({
                    position: location,
                    label: caracteres[i % caracteres.length]
                });
            });

            // Adicione um marcador de marcador para gerenciar os marcadores.
            var markerCluster;
            markerCluster = new MarkerClusterer(map, markers, {
                  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'
            });
        },
    });
}
</script>
<script
    src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">

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

</script>

Answer 1

In your javascript you are consuming the following url: url: "/Restapicontroller/markers"

But in your control you have : /api/markers

@RestController
@RequestMapping("/api")
public class RestApiController {
@Autowired
CarrinhoService carrinhoService;
@RequestMapping(value = "/marcadores", method = RequestMethod.POST)
public ResponseEntity<List<CarrinhoDTO>> marcadores(@RequestBody CarrinhoDTO carrinhoDTO) { ... }
 .
 .
 .
 }

Maybe the error could be in the url call.