Googlemap apiのgeocodeで、Thymeleafから渡された変数が表示できない

したいこと

住所を入力して、その値をgeocodeで緯度経度に変換し、ピンを立てクリックすると吹き出しが出るという処理を書いています。
入力した住所の位置にピンが立ち、クリックしたときに吹き出しが出るのですが、InfoWindowのcontentに書いた変数が表示されずエラーになります。

調査したところ、geocoder.geocode({'address': detail[i].address}, function(result, status) { このなか}で処理した場合、Thymeleafから取得してきた値が表示できませんでした。

例　detailはThymeleafから取得してきた値になります。
１．
console.log(detail[0].address); 　　

２．　　　
infoWindow = new google.maps.InfoWindow({
content: <a href=/detail/${id}>${detail[i].name}</a>
});

両方ともエラーになります。
値を表示させる方法を教えていただけないでしょうか。
すみませんが、よろしくお願いいたします。

コード

html
1<html xmlns:th="http://www.thymeleaf.org">
2<head>
3    <meta charset="UTF-8">
4    <title>ホームページ</title>
5    <link rel="stylesheet" th:href="@{/css/header.css}">
6    <link rel="stylesheet" th:href="@{/css/map.css}">
7
8</head>
9<body>
10    <div th:replace="fragment :: header-fragment"></div>
11    <main class="l-main" id="main">
12        <div id="overallmap"></div>
13    </main>
14    <script th:inline="javascript">
15        const detail = /*[[${address}]]*/"detail";
16    </script>
17    <script type="text/javascript" th:src="@{/js/map.js}"></script>
18    <script async defer
19    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA20kAulqzYMKK83_1_pH3JyuqI_5R52HU&callback=init">
20    </script>
21</body>
22</html>

js
1let map;
2let marker;
3let latlng;
4let infoWindow;
5let i;
6let geocoder;
7let flag = false;
8
9function init(){
10    map = new google.maps.Map(document.getElementById('overallmap'), {
11        zoom: 13,
12        center: {lat:35.625609144511955, lng:139.66240382522528},
13        mapTypeId: 'roadmap'
14    });
15    var geocoder = new google.maps.Geocoder();
16    for(i=0;i<detail.length;i++){
17        geocoder.geocode({'address': detail[i].address}, function(result, status) {
18            if (status === google.maps.GeocoderStatus.OK) {
19                latlng = result[0].geometry.location;
20                marker = new google.maps.Marker({
21                    position: latlng,
22                    map: map
23                });
24                infoWindow = new google.maps.InfoWindow({
25                    content: `<a href=/detail/1>${detail[i].name}</a>`
26                });
27                markerEvent(marker);
28            };
29        });
30        console.log(detail[i].name);
31    }
32    function markerEvent(marker){
33        marker.addListener('click', function() {
34            if(flag){
35                infoWindow.close();
36            }
37            infoWindow.open(map, marker);
38            flag = true;
39            google.maps.event.addListener(map, "click", function () {;
40                infoWindow.close();
41            });
42        });
43    }
44}
45

エラー

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at map.js:25:61
    at geocoder.js:7:1026
    at geocoder.js:3:419
    at Fya (geocoder.js:2:218)
    at $ha.e [as Rz] (geocoder.js:3:338)
    at Object.c [as _ascb69] (common.js:115:253)
    at GeocodeService.Search?4s%E6%9D%B1%E4%BA%AC%E9%83%BD%E4%B8%96%E7%94%B0%E8%B0%B7%E5%8C%BA%E5%A4%AA%E5%AD%90%E5%A0%82&7sUS&9sja&callback=_xdc_._ascb69&key=AIzaSyA20kAulqzYMKK83_1_pH3JyuqI_5R52HU&token=89396:1:28