Google Maps Circle не отображается / отображается

Question

Я использую API Карт Google JS для рендеринга карты на сайте: эта карта центрирована в определенной точке - я хотел бы нарисовать круг с этой точкой в ​​качестве центра.Я следовал примеру и документации для кругов и полигонов Карт Google - и понятия не имею, что я делаю неправильно.Это может быть глупой ошибкой, но я не уверен.Я пробовал большое количество вещей, чтобы решить эту проблему.Вместо 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%.