Google map fitBounds not working

Question

I am creating a trip view using google map with angularjs directive. All works fine except the google map fitbound to a latitude longitude collection. I have tried all the way to use the fitbounds methods but failed.

Thanks,

Below is my code efforts.

Directive:

 <div class="trip-google-map" trip-map="" mapid="2" latitude="22.998673" longitude="72.514346"></div>

Directive Code:

app.directive('tripMap', function ($compile) {
    return {
        controller: function ($scope, $location, mapService) {
            this.registerMap = function (myMap) {
                mapService.setTripMap(myMap);

            };
        },
        link: function (scope, elem, attrs, ctrl) {


            var mapOptions,
                latitude,
                longitude,
                mapStyles,
                map;
            latitude = attrs.latitude;
            longitude = attrs.longitude;
            mapStyles =
                [
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#a2daf2"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.man_made",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#f7f1df"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#d0e3b4"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape.natural.terrain",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#bde6ab"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.medical",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "color": "#fbd3da"
                            }
                        ]
                    },
                    {
                        "featureType": "poi.business",
                        "elementType": "all",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#ffe15f"
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.stroke",
                        "stylers": [
                            {
                                "color": "#efd151"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#ffffff"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "black"
                            }
                        ]
                    },
                    {
                        "featureType": "transit.station.airport",
                        "elementType": "geometry.fill",
                        "stylers": [
                            {
                                "color": "#cfb2db"
                            }
                        ]
                    }
                ];



            mapOptions = {
                zoom: 12,
                disableDefaultUI: true,

                center: new google.maps.LatLng(latitude, longitude),

                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: mapStyles,
                mapTypeControl: true,

                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.BOTTOM_CENTER
                },
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                scaleControl: true,
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
            };
            /*
                        var mapOptions = {
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: false
                        };
                        */
            //google.maps.visualRefresh = true;
            var map = new google.maps.Map(elem[0], mapOptions);
            ctrl.registerMap(map);
            scope.InitializeTripdetailController();

            scope.$apply(function () {
                window.setTimeout(function () {
                    google.maps.event.trigger(map, 'resize');
                }, 100);
            });
        }

    };
});

Controller Code:

app.controller('tripdetailController', ['$scope', '$rootScope', '$timeout', 'mapService', 'ngDialog', function ($scope, $rootScope, $timeout, mapService, ngDialog) {
        $scope.tripPathPolylines = [];
        var trips = [];
        var insertTripLatlng = function (trip) {
            var isExists = false;
            for (var v in trips) {
                if (trips[v].hash == trip.hash) {
                    isExists = true
                    break;
                }
            }
            if (isExists == false) {
                trips.push(trip);
            }
        }
        function settrip() {
            var marker;
            var tripmap = mapService.getTripMap();
            var bounds = new google.maps.LatLngBounds();
            for (var j = 0; j < trips.length; j++) {
                var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
                bounds.extend(ltlng);

                marker = new google.maps.Marker({
                    position: ltlng,
                    map: tripmap
                });

            }
            tripmap.fitBounds(bounds);
        }
        $scope.InitializeTripdetailController = function () {
            var tripData = $scope.$parent.ngDialogData;
            for (var p = 0; p < tripData.messages.length; p++) {
                insertTripLatlng({ lat: tripData.messages[p].trackPoint.pos.lat, lng: tripData.messages[p].trackPoint.pos.lng, hash: tripData.messages[p].trackPoint.pos.lat + "-" + tripData.messages[p].trackPoint.pos.lng })
            }
            settrip();
        }
    }]);

FitBounds Code:

 var tripmap = mapService.getTripMap();
 var bounds = new google.maps.LatLngBounds();
 for (var j = 0; j < trips.length; j++) {
     var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
     bounds.extend(ltlng);
     marker = new google.maps.Marker({position: ltlng,map: tripmap});
  }
  tripmap.fitBounds(bounds);

The map looks like:

It should be after fitbounds as:

Update: css for map:

Update: The map is loaded in ngDialog popup.

 .trip-google-map {
     width: 100%;
     height: 450px;
  }

Answer 1

It was due to map is resized by ngDialog popup directive.

Solved by call fitbounds in map resize callback with as

           $scope.$apply(function () {
                window.setTimeout(function () {
                google.maps.event.trigger(tripmap, 'resize');
                    tripmap.fitBounds(bounds);
                }, 100);
            });

Thanks all for help.