Google Maps mit Thymeleaf verbinden

Wer schon einmal versucht hat Google Maps mit Thymeleaf zu verheiraten, wird sicher auf einige Probleme gestossen sein. Wenn man sich in der Dokumentation von Google umsieht findet man folgendes Codebeispiel.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}

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

Leider wird dieses Beispiel nicht sofort mit Thymeleaf funktionieren, sondern erst mal zu mehreren Fehlern führen. Man kann nun einfach async, defer und den callback entfernen und Thymeleaf wird das Beispiel ohne zu Meckern in HTML umwandeln. Jetzt muss man nur noch die JavaScript Funktion abändern, weil jetzt der Google Maps Code syn­chron geladen wird und schon wird auch die Karte angezeigt.

In der heutigen Zeit ist das synchrone Laden natürlich verpönt, wobei ich damit kein Problem habe. Man will also moderner Entwickler async, defer und den callback auch mit Thymeleaf nutzen. Dazu muss man das Script Tag nur etwas anpassen und schon funktioniert es genauso wie es soll.

<script async=”async” defer=”defer” th:src=”@{https://maps.googleapis.com/maps/api/js(key=${'googleMapsAPIKey'},callback=initMap)}"></script>