I'm developing a web application using spring boot and I'm trying to implement a map on the main application screen. The latitude and longitude are being picked up in the mobile application, so I'm doing a CartDTO to get submit the coordinates on my map, but I'm not able to make the request. As I am new to spring, I believe I am missing out on the communication between the API and the map js. Can someone 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><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyBaU8JcSdnkyoCsr1meMGFwm73Wvj0cYEE&callback=initMap">
</script>