javascript - 谷歌地图没有完全显示

Question

我有两张使用 Google Maps API 的地图，为了设置场景，它们都包含在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

编辑：

要在选项卡更改时触发它，请使用shown.bs.tab：

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

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

JSFiddle demo