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 l

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

 functioninitialize() {
      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 handlerattachTabClick();
  }

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

functionattachTabClick()
{

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

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

then call the function to resize the map:

functionresizeMap(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.