CODEWITHSUNDEEP
javascriptjquery
1mnumb1
1mnumb1

Reputation: 77

Google maps jquery tabs not loading

Google maps not loading when on hidden tab, only on first tab or if press tab before loads code it showing.

TABS
<script>
$(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})

</script>

https://jsfiddle.net/gc8putcs/

Upvotes: 0

Views: 35

Answers (1)

Lloyd Banks
Lloyd Banks

Reputation: 36638

The problem isn't in the adding or removing of the current class, but rather in the number of map objects you are initializing - which you are showing as code on the fiddle.

You need to initialize multiple instances of the map object:

function initialize(){

  var mapProp = {
    center:myCenter,
    zoom:17,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map = [];
  var mapElements = document.getElementsByClassName('googleMap');
  for(var i = 0; i < mapElements.length; i++){
      map[i] = new google.maps.Map(mapElements[i], mapProp);
  }

  for(var x = 0; x < map.length; x++){
    var marker=new google.maps.Marker({
      position:myCenter,
    });

    var marker=new google.maps.Marker({
      position:myCenter,
      animation:google.maps.Animation.BOUNCE
    });
    marker.setMap(map[x]);
    var infowindow = new google.maps.InfoWindow({
      content:"name"
    });
    infowindow.open(map[x],marker);
  }

}

There's also an known issue with Google Maps where you can't apply display: none to the container element. You'll need to change the CSS for that element to:

.tab-content:not(.current){
    position: absolute;
    left: -200%;
    padding: 2px;
}

.tab-content.current{
    display: block;     
}

Updated fiddle

Upvotes: 1

Related Questions