2014-09-08 3 views
1

Правильно, у меня есть 2 вкладки и внутри есть 2 карты. Когда я загружаю страницу, первая карта в порядке, но когда я нажимаю на другую вкладку, карта не загружает все.Загрузочные вкладки и карты Google не работают

После прочтения онлайн, я попробовал это, но он не будет работать. Вот js

function initialize() 
    { 
     var latlng = new google.maps.LatLng(51.386199,0.189108); 
     var latlng2 = new google.maps.LatLng(51.133802,-0.179009); 
     var myOptions = 
     { 
      zoom: 13, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var myOptions2 = 
     { 
      zoom: 13, 
      center: latlng2, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 


     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2); 

     var image = 'images/marker.png'; 

     var myMarker = new google.maps.Marker(
     { 
      position: latlng, 
      map: map, 
      title:"Head Office" 
     }); 

     var myMarker2 = new google.maps.Marker(
     { 
      position: latlng2, 
      map: map2, 
      title:"Crawley & Accounts Office" 
     }); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

$(document).ready(function() { 
$('#tablist a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
    resetMap(map); 
}); 
function resetMap(m) { 
    x = m.getZoom(); 
    c = m.getCenter(); 
    google.maps.event.trigger(m, 'resize'); 
    m.setZoom(x); 
    m.setCenter(c); 
} 
}); 
+1

Я думаю, что это та же проблема, как здесь http://stackoverflow.com/q/24679156/2454790, за исключением того, что это не модальный вкладка ... Ответ почти то же самое, за исключением того, что вам нужно запустить событие show.bs.tab .... Удачи – pbenard

ответ

2

Вы пытались повторно инициализировать карту на своей новой вкладке, когда она открывается?

$(document).ready(function() {  
     $('#tablist a').click(function(e) {  
     e.preventDefault(); 
     $(this).tab('show'); 
     initialize(); //Initialize map function 
     resetMap(map); 
     }); 

вы должны повторно инициализировать карту в новой вкладке, которая была ранее скрытой и displayd после нажатия на #tablist.

0

попытка повторной инициализации карту на

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

      initialize(); 

     }); 
Смежные вопросы