Javascript 谷歌地图圆圈不呈现/显示

我正在使用Google Maps JS API在站点上渲染地图： 这张地图以一个特定的点为中心-我想画一个以这个点为中心的圆。 我遵循了谷歌地图圆形和多边形的示例和文档，不知道我做错了什么。这可能是一个愚蠢的错误，但我不确定。我尝试了很多方法来解决这个问题。 我有钥匙代替钥匙

贴图渲染良好-不渲染的是圆

如果有人能把我引向正确的方向，我将不胜感激

这是我的密码：

    <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>

函数initContractorMap（）{
var center=new google.maps.LatLng（57.276270031，-2.372935672）；
变量映射选项={
中心:中心,，
缩放：9，
mapTypeId:'地形'
};
var newMap=new google.maps.Map（document.getElementById（'contractor\u profile\u Map'），
地图选项）；
变量循环次数={
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
中心:中心,，
半径：840583700，
地图：新地图
};
var circle=新的google.maps.circle（circleOptions）；
circle.setMap（newMap）；
}

问题是将map div中的任何内容设置为最大宽度为100%。

我运行了您的代码，在我的示例中，渲染了一个环绕英国、一直延伸到挪威的巨大红色圆圈