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:

enter image description here

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);

This is why I felt it was necessary to describe the usage of the panes. I thought maybe it would be an issue with those seeing as everything does work perfectly like you pointed out. Along with the fact that my local implementation works properly also upon resizing the window. I was thinking something with a javascript/style conflict between the maps and the wizard that someone may have experience dealing with. — adanot, Sep 30 '14 at 22:02
This is a common problem with hidden content. It has zero size when the map is initialized, you need to trigger the 'resize' event on the map after displaying the hidden content. [see these related questions](http://stackoverflow.com/search?q=%5Bgoogle-maps-api-3%5D+hidden+tab) — geocodezip, Sep 30 '14 at 22:22

MrUpsidown · Accepted Answer · 2014-10-01T18:43:01.957

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

edited Oct 01 '14 at 18:43

answered Oct 01 '14 at 11:17

MrUpsidown

21,592
15
77
131

This makes sense and I understand the issue now however I'm having an issue with the hidden map in tabs within the wizard. I assumed it would be conceptually the same but maybe not. http://jsfiddle.net/0ouvj788/ – adanot Oct 01 '14 at 16:29
See my edit above. The idea is the same but you need the right event: `shown.bs.tab` This event fires on tab show after a tab has been shown. – MrUpsidown Oct 01 '14 at 18:37
Ah that was easy, thanks! I also made an update here, http://jsfiddle.net/7ywLyp6w/, that makes the map keep it's position and zoom rather than resetting. Hopefully this will save someone some searching in the future. – adanot Oct 01 '14 at 19:02
The zoom will not change so you don't need the `setZoom`. For the center, you can just set the center after the resize `map.setCenter(new google.maps.LatLng(10, 10));` and forget about the map option: http://jsfiddle.net/upsidown/bcjn1roq/2/ – MrUpsidown Oct 01 '14 at 20:50

Google Map Not Displaying Entirely

1 Answers1