谷歌地图圆圈不渲染/显示

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>

Answer 1

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