API Карт Google V3 не будет отображаться на вкладке с помощью Twitter Bootstrap

Ответ 1

Я тоже боролся с этой проблемой. Я использовал модальную форму, и она отображала карту, когда она была скрыта. Когда отображается вкладка, вам необходимо вызвать этот код:

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

Надеюсь, это сработает для вас. Если это не сработает, вот ссылка, где я нашел решение. Возможно, будет еще один полезный комментарий.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Ответ 2

Здесь много решений, и, откровенно говоря, они все ошибаются. Если вам нужно приветствовать стандартную функциональность вкладок Bootstrap, вы также можете не использовать вкладки Bootstrap. Если вы показываете только изменение размера после показа вкладки, у вас могут быть проблемы с интерфейсом GMaps (уровень масштабирования и т.д.). Вам просто нужно инициализировать карту после видимости вкладки.

var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};

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

В этом загрузочном примере вы можете увидеть рабочий пример: http://www.bootply.com/102241

Примечание:, если ваш интерфейс по-прежнему глючит, это может быть проблема: API Карт Google V3: странные сбои отображения пользовательского интерфейса (со снимком экрана)

Используя последние gmap api, вам просто нужно добавить это к вашему стилю:

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

Ответ 3

Работает для меня после тестирования разных задержек:

    $(window).resize(function() {
        setTimeout(function() {
              google.maps.event.trigger(map, 'resize');
           }, 300)            

});

Надеюсь, что это поможет.

Ответ 4

Я решил проблему, используя

google.maps.event.trigger(map, 'resize');

внутри функции show в bootstrap-tab.js означает, что во время показа окна вам нужно запустить событие изменения размера и будет работать.

Изменить: Я видел еще одну ссылку с тем же ответом Google Maps API v3, вкладки пользовательского интерфейса jQuery, карта не изменяет размер. Я видел эту ссылку после решения проблемы, чтобы выяснить причину, по которой все еще остается без ответа, что изменение размера события не срабатывает в событии кликов на вкладках, но работает на вкладке js

Ответ 5

это отлично работает для меня, я использую вкладки jquery

            setTimeout(function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(default_lat, default_lng));
            map.setZoom(default_map_zoom);
        }, 2000);

по этой ссылке https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Ответ 6

Чтобы показать карты google в скрытом div, div должен показать, пока карта не будет создана и не загружена. Ниже приведен пример:

<div  id="map_canvas" style="width:500px; height:500px"></div>

<script>
$(document).ready(function(){
  $('#button').click(function() {
    $('#map_canvas').delay('700').fadeIn();
    setTimeout(loadScript,1000);
  }); 
});

    function initialize() {
        var title= "Title";
        var lat = 50;
        var lng = 50;
        var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({
            position: myLatlng,
            title:artTitle
        });
        // To add the marker to the map, call setMap();
        marker.setMap(map);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }       
</script>

Ответ 7

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

Все, что мне нужно было сделать:

$(document).on("shown", "#eventModal", function(){
    bindMap(coordinates);
});

Вы можете сделать то же самое с вкладками, потому что они также имеют "показанное" событие.