Google map fitbounds not working with angularjs ng-dialog

Question

I am using ng-Dialog module of angularjs for vehicle trip view map. My angularjs directive for trip-map is working fine and map is loaded with fitbounds in the complete window (not in ng-dialog model popup) but it does not work in ng-dialog popup.

In ng-dialog, the googlemap is loaded but the map is not in fitbounds.

Earlier I thought that the issue was due to googe map fitbound not working fine, So I posted the below question. You can find more detail of my efforts here.

Google map fitBounds not working

---

ng-dialog call code in controller:

    ngDialog.open({
       template: 'Views/Main/tripdetail.html',
       className: 'ngdialog-theme-plain',
       controller: 'tripdetailController',
       scope: $scope
    });

Map fitbound code:

    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);
        //   if (j == 0 || j == trips.length - 1) {
        marker = new google.maps.Marker({
            position: ltlng,
            map: tripmap
        });
        //  }
    }
    $scope.Bounds = bounds;
    tripmap.fitBounds(bounds);

---

In window it look well as:

In ng-dialog modal popup, it moves to top left corner as:

Please advice me the solution. It will be appreciable.

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.