Google Maps v3 частично загружается в верхнем левом углу, событие изменения размера не работает

Ответ 1

У меня тоже была эта проблема, и я исправил ее, ожидая состояния "бездействия" карты (т.е. после ее завершения), а затем вызывая изменение размера:

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

Ответ 2

Я думаю, что ваша карта скрыта во время ее создания: там display:none на div #summary-content, что карта вложена внутри.

Вам следует попробовать запустить событие resize после того, как div станет видимым вместо инициализации.

Фактически, вы могли бы просто вызвать свое событие функции initializeMap() в то время, когда div станет видимым, а не вызвать его в вашей функции .ready().

Ответ 3

У меня возникла проблема со всеми картами, отличными от первой загруженной карты, отображаемой в верхнем левом углу, а остальная часть карты не была загружена и поэтому отображается серым цветом.

Некоторое время царапал мне голову, но мне удалось решить ее:

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

Это было простое решение благодаря Яну Девлину и д.раеву и просто хотел поблагодарить и поделиться кодом, который решил его для меня, потому что я не могу комментировать или голосовать до сих пор!

Я назвал это после создания карты с помощью:

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

поэтому, если у вас есть эта проблема, поставьте ее прямо под тем, где вы создаете свою карту тоже!

Ответ 4

Карты Google плохо работают с Bootstrap. Попробуйте добавить следующий CSS к вашему элементу карты

#map-canvas img {
  max-width: none;
}

Twitter Загрузочный CSS-код, влияющий на Карты Google

Ответ 5

У меня появилась аналогичная проблема (карта, загруженная в контейнер, расширенная анимацией)

Как @Ian Devlin часть решения, это запустить событие resize, когда все будет видно.
Вторая часть - зафиксировать центр (как правило, в верхнем левом углу):

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});

Ответ 6

Я знаю, что это относительно старый вопрос, однако, сегодня я столкнулся с этой проблемой и нашел решение. Он может (не может) быть полезным для людей, однако, если вам требуется показать Google Карты onclick, то если вы вызываете функцию initilise() внутри этого события и задерживаете ее, как видно из моего кода ниже.

Функция API Карт Google - initialise();

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

Мой вызов события jQuery

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });

• '# map-load' - это экран предварительного загрузчика для начальной загрузки карты.
• '# maps-container' - это контейнер для Карты Google (#googleMap)

Ответ 7

Используйте событие showhow с указанным форматом. Это сработало для меня.

$(document).on('pageshow', '[data-role = "page" ] # mapPage', function() {
инициализации(); });