Карта Google на вкладке Bootstrap

Ответ 1

Вы немного чрезмерно оптимистичны в том, насколько мощным является событие "resize". Из документация:

• изменить размер: разработчики должны инициировать это событие на карте, когда div изменяет размер: google.maps.event.trigger(map, 'resize')

Другими словами, изменение размера не будет делать ничего такого, как размер карты в окне, но будет только размер его в контейнере, в котором он находится, - в данном случае, div "map_canvas". Однако этот div не имеет размеров, поэтому карта имеет нулевой размер.

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

$("#map_canvas").css("width", 400).css("height", 400);

будет определять размер до 400x400. Вот пример, вы должны иметь возможность изменить его на все, что захотите.

Ответ 2

Обновленный ответ для Boostrap 3:

$("a[href='#my-tab']").on('shown.bs.tab', function(){
  google.maps.event.trigger(map, 'resize');
});

Обратите внимание, что вы выбираете ссылку на вкладку, а не вкладку.

Ответ 3

не использовать .tab-content > .tab-pane {display: none}
используйте это

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}

Ответ 4

Измените размер карты при отображении вкладок

http://jsfiddle.net/B4zLe/49/

 $('#myTab a[href="#profile"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
 });

Ответ 5

У меня проблема с Google Maps с Bootstrap 3, но я решил проблему с крошечной базой трюков в коде Andy B:

 var cl=0;
 $("a[href='#maptab']").on('shown.bs.tab', function(){
     cl++;
     if(cl == 1){   // this is to prevent map initialized twice or more
         initialize();
     }
     else{
        //do nothing        
     }
 });

хорошо.. по крайней мере его работа для меня:)

Ответ 6

var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
        $("#map_canvas").css("height", 400);
    });
});

Fiddle

Ответ 7

проблема сохраняется в 2016 году, удалите обработчик DOM google и вызовите функцию initialize() с помощью триггера show show jQuery, как уже написано выше. Затем карта загружается при нажатии кнопки TAB

google.maps.event.addDomListener(окно, 'load', initialize);

jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{   
    initialize();
});

Ответ 8

По-прежнему возникают проблемы с Bootstrap 3.3.7, jquery 1.11.3 и вкладками. Все работает нормально, пока вы не попытаетесь поместить карту в вкладку, которая сначала будет скрыта при загрузке. Затем вы загружаете карту и все должно работать, но вы видите только серое (или любую другую цветную, не уверенную) область карты. Вы можете сделать все, но вы не можете видеть карту. При перетаскивании внутри карты вы можете увидеть НЕКОТОРЫЕ вещи, но в целом - пустую карту.

Вариант 1 - вы можете увидеть карту при изменении размера окна. Но есть и поражение - как только вы меняете вкладку, она снова исчезает.

Вариант 2 - вы можете поместить карту на первую вкладку и сделать с ней.

Вариант 3 - вы можете просто сделать код для изменения размера карты (как показано ранее). НО там я столкнулся с проблемой - это не ВСЕГДА работает. По крайней мере, это не помогло мне:

.on("shown", function(){})
.on("shown.bs.tab", function(){});
.on("show.bs.tab", function(){});
...

В значительной степени любая вариация не работала. Мне удалось заставить его работать на вкладке "ПЕРВАЯ временная вкладка", используя ссылку ID, а не сравнение href, но как только я нажал на другую вкладку и обратно, снова появилась серая карта... Я был похож - серьезно!?

Наконец, я придумал решение: на этой конкретной вкладке нажмите (по id, я рекомендую), он делает все необходимое. Это означает следующее: каждый раз, когда вы нажимаете где-то еще (другие ссылки или вкладки) и обратно на вкладку карты, она перезагружает эту карту (а потому может быть медленной - зависит от интернета), но по крайней мере я получил карту, а не пустую серое изображение карт google.

Надеюсь, что это поможет кому-то еще в будущем.

Ответ 9

используйте ниже script

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

            init();

        });

Ответ 10

Абсолютно замечательное решение cevatasln. Я тоже использовал все возможные решения jQuery и Javascript, ни один не работает! Если вы хотите настроить таргетинг на специальную вкладку и используя динамическую галерею или что-то, это будет работать для вас

.tab-content > #tab5.tab-pane {
   display: block;
   height:0;
   max-height:0;
   overflow:hidden;
}

.tab-content > #tab5.active  {
   display: block;
   height:auto;
   max-height: 100%;
}