Карта Google не отображается полностью

Question

У меня есть две карты с использованием API Карт Google и, чтобы установить сцену, они оба содержатся в FuelUX Wizard на отдельных панелях.

Карта на первой панели прекрасно работает, однако на второй карте на другой панели, она показывает, как это:

Это, очевидно, не так. Однако, если я изменил размер окна, он появится на соответствующем дисплее.

Вот главный Javascript, который инициализирует карты.

function initialize() { 
       var markers = []; 
       var map = new google.maps.Map(document.getElementById('map-canvas'), { 
       zoom: 5, center: new google.maps.LatLng(30.2500, -97.7500), 
       mapTypeId: google.maps.MapTypeId.HYBRID 
       }); 
       var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), { 
       zoom: 5, center: new google.maps.LatLng(30.2500, -97.7500), 
       mapTypeId: google.maps.MapTypeId.HYBRID 
       }); 


     // Create the search box and link it to the UI element. 
     var input = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input')); 
     var input2 = /** @type {HTMLInputElement} */(
     document.getElementById('pac-input-2')); 


     var searchBox = new google.maps.places.SearchBox(
     /** @type {HTMLInputElement} */(input)); 
     var searchBox2 = new google.maps.places.SearchBox(
     /** @type {HTMLInputElement} */(input2)); 

     // Listen for the event fired when the user selects an item from the 
     // pick list. Retrieve the matching places for that item. 
     google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 
    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
      var marker = new google.maps.Marker({ 
      map: map, 
      icon: image, 
      title: place.name, 
      position: place.geometry.location 
      }); 

      markers.push(marker); 

      bounds.extend(place.geometry.location); 
     } 

     map.fitBounds(bounds); 
     }); 


     //Map 2 

     google.maps.event.addListener(searchBox2, 'places_changed', function() { 
    var places = searchBox2.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 
    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    // For each place, get the icon, place name, and location. 
    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
      var marker = new google.maps.Marker({ 
      map2: map2, 
      icon: image, 
      title: place.name, 
      position: place.geometry.location 
      }); 

      markers.push(marker); 

      bounds.extend(place.geometry.location); 
     } 

     map2.fitBounds(bounds); 
     }); 


     // Bias the SearchBox results towards places that are within the bounds of the 
     // current map's viewport. 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = map.getBounds(); 
     searchBox.setBounds(bounds); 
     }); 
     google.maps.event.addListener(map2, 'bounds_changed', function() { 
     var bounds = map2.getBounds(); 
     searchBox2.setBounds(bounds); 
     }); 

    } 

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

Answer 1

Нужно вызвать изменение размера карты при отображении вкладки. У вас есть доступное событие в FuelUX: changed.fu.wizard, которое срабатывает, когда шаг изменяется и отображается пользователю.

$('#myWizard').on('changed.fu.wizard', function() { 

    // Trigger a map resize 
    google.maps.event.trigger(map, 'resize'); 
}); 

JSFiddle demo

Edit:

Чтобы вызвать его на изменение вкладки, используйте shown.bs.tab:

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

    // Trigger a map resize 
    google.maps.event.trigger(map, 'resize'); 
}); 

JSFiddle demo