как бороться с картой Google внутри скрытого div (обновленная картинка)

Question

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

Я пытался запустить этот код после щелчка:

    map0.onResize();

или:

  google.maps.event.trigger(map0, 'resize')

любые идеи.вот изображение того, что я вижу после показа div со скрытой картой в нем.

Answer 1

используйте эту строку кодов, когда хотите показать карту.

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

Answer 2

Мне не понравилось, что карта будет загружаться только после того, как скрытый div станет видимым. Например, в карусели это не работает.

Это мое решение - добавить класс к скрытому элементу, чтобы отобразить его и вместо этого скрыть с абсолютным положением, затем отобразить карту и удалить класс после загрузки карты.

Проверено в Bootstrap Carousel.

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

JS

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

Answer 3

Мое решение было:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas