Bom dia a todos. Eu estou estudando e não encontro solução para fazer o maps se integrar ao html do spring boot + thymeleaf. Vejam os problema:
2018-08-31 11:24:41.492 ERROR 8444 --- [nio-8080-exec-1] org.thymeleaf.TemplateEngine : [THYMELEAF][http-nio-8080-exec-1] Exception processing template "map": Exception parsing document: template="map", line 29 - column 100
2018-08-31 11:24:41.499 ERROR 8444 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: Exception parsing document: template="map", line 29 - column 100] with root cause
org.xml.sax.SAXParseException: A referência à entidade "callback" deve terminar com o delimitador ';'.org.xml.sax.SAXParseException: A referência à entidade "callback" deve terminar com o delimitador ';'.O código html :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<title>Find a Job</title>
</head>
<body>
<section id="filters">
<div class="container" id="expertise">
<form>
<!-- trocar por ícones de linguagens -->
<div class="form-row">
<div class="form-group col-md-3">
<select class="form-control form-control-sm" id="languages">
<option selected="selected">Choose your language</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="javascript">Javascript</option>
</select>
</div>
<div class="form-group col-md-3" id="programming_level">
<select id="level" class="form-control form-control-sm">
<option selected="selected">All</option>
<option>Junior</option>
<option>Mid</option>
<option>Senior</option>
</select>
</div>
</div>
</form>
</div>
<!-- aqui serão os locais das vagas -->
<div id="local" class="container form-row">
<button id="sp" type="button" class="btn btn-light">São
Paulo</button>
<button type="button" class="btn btn-light">Recife</button>
<button type="button" class="btn btn-light">Belo Horizonte</button>
<button type="button" class="btn btn-light">Porto Alegre</button>
</div>
</section>
<section class="container" id="jobs">
<table class="table table-hover">
<thead>
<tr>
<td>Linguagem de Programação</td>
<td>Senioridade</td>
<td>Salário</td>
</tr>
</thead>
<tbody>
<tr th:each="job : ${jobs}">
<td><span th:text="${job.programmingLanguage}"></span></td>
<td><span th:text="${job.level}"></span></td>
<td><span th:text="${job.salary}"></span></td>
</tr>
</tbody>
</table>
</section>
<section>
<div id="map"></div>
</section>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/map.js"></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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=MY_API_KEY&callback=initMap">
</script>
</body>
</html>Isso funcionou no flask. Alguém sabe qual é o problema?
