Search code examples
angularjstwitter-bootstrapng-map

Use ngMap with tabset - only the first tab will be initiated


Only first tab is set.

<tabset>
    <tab heading="One"><map center="London"></map></tab>
    <tab heading="Two"><map center="Liverpool"></map></tab>
    <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/DZj5RkDUHk9C8oTvsjcf?p=preview

some advice?

------ EDIT ------

if use angular 1.3.15 and ui-bootstrap tpls-0.13.3 it works only pushing button

<button class="btn btn-primary" ng-click="reRednerMap()">reRender</button>

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

Some advice?


Solution

  • This solutions works fine.

    <tabset>
         <tab heading="One" select="reRenderMap()"><map center="London"></map></tab>
         <tab heading="Two" select="reRenderMap()"><map id="liverpool" center="Liverpool"></map></tab>
         <tab heading="Three">Three</tab>
     </tabset>
    

    in controller

     $scope.reRenderMap = function() {
                $timeout(function(){
                    angular.forEach($scope.maps, function(index) {
                        google.maps.event.trigger(index, 'resize');
                    });
                }, 500);
            }
    
            $scope.maps = [];
    
            $scope.$on('mapInitialized', function(evt, evtMap) {
                  $scope.maps.push(evtMap);
            });
    

    http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview