0

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:

enter image description here

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

enter image description here

Please advice me the solution. It will be appreciable.

Community
  • 1
  • 1
Janty
  • 1,708
  • 2
  • 15
  • 29
  • 1
    try using maps resize method in dialog open callback. Any time map is hidden it can't calculate dimensions – charlietfl Dec 25 '14 at 12:49
  • I have used map resize trigger in controller. Please see http://stackoverflow.com/questions/27635634/google-map-fitbounds-not-working. – Janty Dec 25 '14 at 12:53
  • Sorry I have done map resize trigger in directive. – Janty Dec 25 '14 at 12:54
  • 1
    But that';s a different question and there is no resize shown in this question where you are asking about how to fix it. Would also likely have to make call to fit bounds also in same open callback – charlietfl Dec 25 '14 at 12:55
  • Thanks lots. @charlietfl. I have called fitbounds in same resize trigger in controller. working perfect..Thanks again. – Janty Dec 25 '14 at 13:10

1 Answers1

3

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.

Janty
  • 1,708
  • 2
  • 15
  • 29