I am using the Google Maps API to build an asset tracker. I need to pass the latitude and longitude through the callback initMap so the javascript can create the map properly.
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
the javascript...
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
window.initMap = initMap;
and this is my Controller. I'm trying to get the data in the GpsMessage from /addlocation into the javascript.
@Controller
public class GpsController {
@GetMapping("/greeting")
public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
model.addAttribute("name", name);
return "greeting";
}
@GetMapping("/map")
public String map(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
model.addAttribute("name", name);
return "map";
}
@PostMapping("/addlocation")
public boolean addLocation(@RequestBody GpsMessage message) {
System.out.println(message.toString());
return DbConnection.writeLocation(message);
}
@GetMapping("/readLocations")
public List<Double> readLocations() {
return DbConnection.readLocations();
}
}