Mapa nao aparece na consulta dos alunos | Java e MongoDB: integre uma webapp Java com um banco NoSQL

Pessoal, preciso de ajuda com esse curso, na reta final tive alguns problemas alguns consegui resolver, pois houve algumas mudanças na forma como usar o materialize, pórem mesmo assim estou com um problema, o mapa não aparece, não retorna nenhum erro no console, parece que o back esta ok. O frront esta difrente da aula, mas sem esse js ele não funciona o Select-menu.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link type="text/css" rel="stylesheet" href="../css/main.css"/>
  <title>EscolAlura</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript" src="../js/googlemaps.js"></script>
</head>
<body class="grey lighten-3">
<div id="formularioGeolocalizacao" class="container">
  <h3 class="main-title center">Visualizar Aluno</h3>
  <form class="col s12" action="/geolocalizacao/pesquisar" method="get">
    <div class="row">
      <div class="input-field col s12">
        <select name="alunoId" id="alunoId">
          <option th:each="aluno : ${alunos}" th:value="${aluno.id}"
                  th:text="${aluno.nome}">Nome do Aluno
          </option>
        </select> <label for="aluno">Alunos</label>
      </div>
    </div>
    <div th:if="${alunosProximos} != null">
      <div class="row">
        <div id="map" class="mapa"></div>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12 center">
        <button class="btn waves-effect waves-light" type="submit">Pesquisar</button>
      </div>
    </div>
  </form>
  <script th:inline="javascript">
    /*<![CDATA[*/
    var alunos = [[${alunosProximos}]];
    /*]]>*/
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKMdBUqBIYmszofcUrgs5zHVF0WxrMLIs&amp;callback=initMap" async="async" defer="defer"></script>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function () {
    $('select').formSelect();
  });
</script>
</body>
</html>