Google Maps Circle无法渲染/显示

Question

我正在使用Google Maps JS API在网站上呈现地图：此地图以特定点为中心 - 我想绘制一个以此点为中心的圆圈。我已经按照谷歌地图圈子和多边形的示例和文档进行操作 - 并且不知道我做错了什么。这可能是一个愚蠢的错误，但我不确定。我已经尝试了很多东西来解决这个问题。代替apiKey我有我的钥匙。

地图渲染得很好 - 这是不渲染的圆圈。

如果有人能指引我朝着正确的方向前进，我们将不胜感激。

这是我的代码：

    <div id="contractor__profile__map">
    </div>
    <script>
        function initContractorMap() {
            var centre = new google.maps.LatLng(57.276270031, -2.372935672);

            var mapOptions = {
                center: centre,
                zoom: 9,
                mapTypeId: 'terrain'
            };

            var newMap = new google.maps.Map(document.getElementById('contractor__profile__map'),
                mapOptions);

            var circleOptions = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                center: centre,
                radius: 840583700,
                map: newMap
            };

            var circle = new google.maps.Circle(circleOptions);
            circle.setMap(newMap);
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}s&callback=initContractorMap"></script>