Google map is not load properly in tab 2 and tab 3. How to create refresh tabs?

问题

I have 3 shop location that I wanted to show in google map. I have separate it into 3 tab and 3 google map. It was working fine at the 1st tab. But the 2nd tab and 3rd tab is not load properly. It was working fine without the tabs. I found some blog that tabs require to refresh? I am not sure how to do so but i tried and getting error. Anyone can help me out ? Thanks

Here below is my tab code:-

    <div class="tabbable" id="tabs-331065">
    <div class="tab-content">
                <div class="tab-pane active" id="panel-127823">
                    <p>
                        <div id="map-city" ></div>
                    </p>
                </div>
                <div class="tab-pane" id="panel-737549">
                    <p>
                        <div id="map-box"></div>
                    </p>
                </div>
                <div class="tab-pane" id="panel-737589">
                    <p>
                        <div id="map-forest"></div>
                    </p>
                </div>
            </div>
            <ul class="nav nav-tabs" id="map-tabs">
                <li class="active" id="map-tab1">
                    <a href="#panel-127823" role="tab" data-toggle="tab">CITY</a>
                </li>
                <li id ="map-tab2">
                    <a href="#panel-737549" role="tab" data-toggle="tab">BOX HILL</a>
                </li>
                <li id="map-tab3">
                    <a href="#panel-737589" role="tab" data-toggle="tab">FOREST HILL</a>
                </li>
            </ul>

        </div>

Google map function : -

<script>

    function initialize() {
      var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
      var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
      var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
      var mapOptions1 = {
        zoom: 17,
        center: myLatlng1
      }
      var mapOptions2 = {
        zoom: 17,
        center: myLatlng2
      }
      var mapOptions3 = {
        zoom: 17,
        center: myLatlng3
      }
      var map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
      var map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
      var map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);

      var marker1 = new google.maps.Marker({
          position: myLatlng1,
          map: map1,

      });
       var marker2 = new google.maps.Marker({
          position: myLatlng2,
          map: map2,

      });
       var marker3 = new google.maps.Marker({
          position: myLatlng3,
          map: map3,

      });
    }


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



        </script>

回答1:

The reason is because the map is not visible for tab 2 and tab 3 (e.g. tab one is active) when you create them so they will not resize properly.

What you need to do do is in activating a tab - You need to call map resize to let the map redraw. it will then resize based on its container.

Do something like this when you activate a tab ten pass in the map for that tab or get the correct map in the function:

First change your initialize function so you don't declare the maps inside it:

// declare your maps outside of the functions like this and remove 
// your var where you create them.
var map1, map2,map3;

 function initialize() {
      var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
      var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
      var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
      var mapOptions1 = {
        zoom: 17,
        center: myLatlng1
      }
      var mapOptions2 = {
        zoom: 17,
        center: myLatlng2
      }
      var mapOptions3 = {
        zoom: 17,
        center: myLatlng3
      }

      // Note I removed the var
      map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
      map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
      map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);

      var marker1 = new google.maps.Marker({
          position: myLatlng1,
          map: map1,

      });
       var marker2 = new google.maps.Marker({
          position: myLatlng2,
          map: map2,

      });
       var marker3 = new google.maps.Marker({
          position: myLatlng3,
          map: map3,

      });

     // attach the tab click handler
     attachTabClick();
  }

Then attach a tab activate function on document ready or at the bottom of your initialize function:

function attachTabClick()
{

   $('.nav-tabs').bind('click', function (e) 
   {
      // e.target is the link
      // so use its parent to check which map to show

      var tabId = e.target;      

      //check the ID and only call the resize you need - 
      if(tabId == 'panel-127823')
      {
         resizeMap(map1)
      }
      else if(tabId == 'panel-737549')
      {
         resizeMap(map2);
      }
      else if(tabId == 'panel-737589')
      {
         resizeMap(map3)
      }           
    });
}

then call the function to resize the map:

function resizeMap(map)
{
   setTimeout(function()
   {
       var center = map.getCenter();
       google.maps.event.trigger(map, "resize");
       map.setCenter(center);
   },50);
}

UPDATE:

Here is a working fiddle: http://jsfiddle.net/loanburger/fzhgjfrb/

1. Note I added a slight timeout before resizing as I found that the div needed time to show properly.
2. Secondly I am calling resize for all map - you need to check the right ID and only call the resize for the map which will be visible.

来源：https://stackoverflow.com/questions/28404179/google-map-is-not-load-properly-in-tab-2-and-tab-3-how-to-create-refresh-tabs