Google Map Not Displaying Entirely

Question

I have two maps using the Google Maps API and, to set the scene, they are both contained in a FuelUX Wizard, on separate panes.

The map on the first pane works perfectly, however on the second map on the other pane, it displays like this:

This is obviously wrong. However, If I resize the window it pops in to the proper display.

Here is the main Javascript that initializes the maps.

    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

You need to trigger a map resize when the tab is shown. You have an available event in FuelUX: changed.fu.wizard that fires when the step changes and displays to the user.

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

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

JSFiddle demo

Edit:

To trigger it on tab change, use the shown.bs.tab:

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

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

JSFiddle demo