迁移至新版Google Places API自动完成功能失败，仍调用旧API端点的问题求助

我正在维护一个带有距离计算器的网站，页面上有两个文本输入框，原本是用Google的自动完成功能来选择地点的。现在我想把它迁移到新版Place API，同时给自动完成功能启用会话（session）机制。

之前我了解到，只要使用Google的JS组件，应该会自动调用新版Places API，但实际情况却不是这样。我的HTML代码如下：

<input type="text" id="punto_inicio" name="origen" value="" onFocus="geolocate()"  class="formc full-width input-text" data-live-search="true" data-toggle="tooltip" data-placement="top" required>

<input type="text" id="punto_final" name="destino" value="" class="formc full-width input-text" data-live-search="true" data-toggle="tooltip" data-placement="top"  required>

<script src="https://maps.googleapis.com/maps/api/js?key={{ googlemapsAPIkey }}&libraries=places&callback=initAutocomplete&language=es-ES&v=weekly" async defer></script>

（我特意加了v=weekly参数，想强制Google加载最新版本的组件，但不管加不加这个参数，结果都一样。）

我的JS代码是这样的：

function initAutocomplete() {       
    var sessionTokenInicio = new google.maps.places.AutocompleteSessionToken();
    var sessionTokenFinal = new google.maps.places.AutocompleteSessionToken();
    
    var autocompleteInput = document.getElementById('punto_inicio');
    autocomplete = new google.maps.places.Autocomplete(autocompleteInput, 
            {
            fields: ["address_components", "geometry", "formatted_address", "name", "url", "website"],
            componentRestrictions: { country: ["es", "fr", "pt"] }
            }
        );
    autocomplete.setOptions({ sessionToken: sessionTokenInicio });

    var autocomplete2Input = document.getElementById('punto_final');
    var options2 = { componentRestrictions: { country: ['es', 'fr', 'pt'] } };
    autocomplete2 = new google.maps.places.Autocomplete(autocomplete2Input, 
            {
            fields: ["address_components", "geometry", "formatted_address", "name", "url", "website"],
            componentRestrictions: { country: ["es", "fr", "pt"] }
            }       
        );
    autocomplete2.setOptions({ sessionToken: sessionTokenFinal });


    autocomplete.addListener('place_changed', function() {
        fillInAddress(autocomplete, "", sessionTokenInicio);
        sessionTokenInicio = new google.maps.places.AutocompleteSessionToken();
        autocomplete.setOptions({ sessionToken: sessionTokenInicio });          
    });

    autocomplete2.addListener('place_changed', function() {
        fillInAddress(autocomplete2, "2"), sessionTokenInicio;
        sessionTokenFinal = new google.maps.places.AutocompleteSessionToken();
        autocomplete2.setOptions({ sessionToken: sessionTokenFinal });
    });         

}

function fillInAddress(autocomplete, unique, sessionToken) {

    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        if (!!document.getElementById(component + unique)) {
            document.getElementById(component + unique).value = '';
        }
    }

   var service = new google.maps.places.PlacesService(document.createElement('div'));
    service.getDetails(
        {
            placeId: place.place_id,
            sessionToken: sessionToken,
            fields: ["address_components", "geometry", "name", "formatted_address"] // Limit fields to reduce cost
        },
        function (placeDetails, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                // Update fields with place details
                document.getElementById('name' + unique).value = placeDetails.name || "";
                document.getElementById('latlng' + unique).value = placeDetails.geometry?.location || "";
                //document.getElementById('url' + unique).value = placeDetails.url || "";
                //document.getElementById('web' + unique).value = placeDetails.website || "";

                if (placeDetails.address_components) {
                    for (var i = 0; i < placeDetails.address_components.length; i++) {
                        var addressType = placeDetails.address_components[i].types[0];
                        if (componentForm[addressType] && document.getElementById(addressType + unique)) {
                            var val = placeDetails.address_components[i][componentForm[addressType]];
                            document.getElementById(addressType + unique).value = val || "";
                        }
                    }
                }

                if (document.getElementById('latlng' + unique).value !== '') {
                    document.getElementById('ok' + unique).checked = true;
                    document.getElementById('sel' + unique).innerHTML = placeDetails.formatted_address || "";
                }
            } else {
                console.error("Failed to fetch place details:", status);
            }
        }
    );
}


function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
      });
    }
}

尽管做了以上这些设置，当我加载页面时，还是发现它在调用旧版Places API的端点：

https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictions

为了验证这一点，我创建了一个新的API密钥，并且限制它只能调用新版Places API，结果现在页面直接加载失败，报错：Google Maps JavaScript API error: ApiTargetBlockedMapError。这说明不管我怎么设置，它都在尝试调用旧版API。

有没有大佬能帮我看看问题出在哪？

备注：内容来源于stack exchange，提问作者PaulJ