Angular Data Binding Frozen Until I Move Map After Clicking Marker That Calls DirectionsService

[coderdecoder]

In angular 1.4.7 I have a click that I'm adding to a markers tag in my template as so:

    <ui-gmap-google-map ng-if="assessment.mapReady==true" center="assessment.map.center" pan="true"
                        zoom="assessment.map.zoom">
      <ui-gmap-markers models="assessment.markers" coords="'self'" icon="'icon'" click="click">
      </ui-gmap-marker>
        </ui-gmap-markers>
    </ui-gmap-google-map>

I'm adding them in as so:

        _.each(vm.sites, function(site,index) {
          vm.destinations.push((site.address.address1 || '') + ' ' + (site.address.address2 || '') + ' ' + (site.address.city || '') + ' ' + (site.address.province || '') + ' ' + (site.address.postalCode || '') + ' ' + (site.address.country || ''));

          //build marker
          var val= {idKey: index, latitude: site.address.latitude, longitude: site.address.longitude, title: site.name, icon:{url: 'assets/img/hospital-building.png'}, click: function() {selectSite(site);}};
          val["id"]= index;

          // add marker to markers 
          vm.markers.push(val);
        });

They are adding fine. The click calls selectSite which simply builds origin/destination LatLng points and sends them to calculateDirections. It hits the standard directions service `googleMaps.DirectionsService(); Then stores the steps from the first route of the first leg as so

' vm.directionsSteps=response.routes[0].legs[0].steps;

Here is the whole function for reference.

    function calculateDirections(origin, destination) {
      var request = {
        origin: origin,
        destination: destination,
        travelMode: vm.googleMaps.DirectionsTravelMode.DRIVING
      };

      vm.directionsService.route(request, function (response) {
        if (response.status === vm.googleMaps.DirectionsStatus.OK) {

          //set routes
          vm.directionsSteps=response.routes[0].legs[0].steps;
          console.log(vm.directionsSteps);

        }
      });
    }

In my template I simply have an ng-repeat on a

tag printing out the directionsSteps that I've just updated in my controller.

    <div id="directionsDiv" style="overflow-y: hidden; right:30px;">
      <p ng-repeat="wayPoint in assessment.directionsSteps" .instructions>
        {{wayPoint.instructions}}
      </p>
    </div>

That's it. Super basic. Very straight forward. The bug is that when I click my marker everything works fine. I log directionsSteps to the console and it has the updated values which have changed to the results from the google directions service.

But in my page my page databinding is frozen 'until' I grab and move the map or perform some other task that kicks off the dirty checking and updates my page with the recent information. Does anyone know what's going on?

[michal-bednarz]

Same here. I'm using InfoWindow to display distance from user position to marker. I have user position and then on marker click I open InfoWindow and call google.maps.getDistanceMatrix(). Then even if I've got response, InfoWindow still shows old (initial) value. But when I drag map value is refreshed.

Angular 1.4.6
Angular Google Maps 2.2.1

[nmccready]

Either one of you; please make the example in a plnkr all within one html file. That way I can simply cut and paste it to my examples to test it against master. Here is your starting point http://plnkr.co/edit/H4ZGU1?p=preview to fork.

[coderdecoder]

Yea, and I fully expected that response, heh. I spent a few hours trying to splice it out of my code today and gave up when I realized I had a meeting I was 5 minutes late for. :) I tried to give you pretty explicit examples in the code in any case.

My thusfar failed plnkr is here if you do want to take a look. Last thing I was debugging was a lodash issue... I'll take another look tomorrow.

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

[nmccready]

Cool; let me know when it is functional.

[coderdecoder]

Just an update. Still have not had time to get a plnk working, but I did notice that when you click a marker to freeze the binding, then unlock it by moving the map, a second click won't freeze anything but operate per expectations. However if you click a marker you have not yet clicked it will freeze again till you move the map.

Not sure if that inspires any light-bulbs while I try to recreate in plnk.

[coderdecoder]

Okay, I can't recreate that behaviour at all now. I'm not sure how I got it to work on the second click but it was before I reloaded the page. This is a weird issue.

[michal-bednarz]

Ok, sorry for confusion. I've wrote too fast - just seen same issue as I had on top of recently send issues.
For now I see that's not a problem with Angular Google Maps. In my case that was just $scope.$apply() case.

[coderdecoder]

Kulfon93... could you elaborate how you fixed this? I've tried calling $scope.$apply() and wrapping it in the func and it didn't seem to help with our without a 2000 ms wait.

I'm having trouble making the plnk work as well with the fork I made.

I'm trying to instantiate the DirectionsService the same way I do in my app as so:

```  $scope.directionsService = new $scope.map_instances.DirectionsService();

but it doesn't seem to be there? I'm still learning how this plugin works so thanks for your patience. :)

It's here if you want to look.

http://plnkr.co/edit/kbdRm1

[nmccready]

Has anyone tried disabling chunking?
On Oct 9, 2015 15:35, "coderdecoder" notifications@github.com wrote:

Kulfon93... could you elaborate how you fixed this? I've tried calling
$scope.$apply() and wrapping it in the func and it didn't seem to help with
our without a 2000 ms wait.

I'm having trouble making the plnk work as well with the fork I made.

I'm trying to instantiate the DirectionsService the same way I do in my
app as so:

but it doesn't seem to be there? I'm still learning how this plugin works
so thanks for your patience. :)

It's here if you want to look.

http://plnkr.co/edit/kbdRm1

—
Reply to this email directly or view it on GitHub
https://github.com/angular-ui/angular-google-maps/issues/1550#issuecomment-146968843
.

[coderdecoder]

Hmm... excuse my ignorance but I'm not sure how to do that exactly. Is there documentation? I didn't find anything like that in the API docs.

[nmccready]

In markers chunk="false"

[michal-bednarz]

So how you @coderdecoder asked, I'll try to help. I've tried with plnkr but failed.

Maybe that will help you.

My target was to have InfoWindow which will pop up with proper data on marker click. Inside I wanted to show my user how far clicked marker is from her/him.

my index.html partial with map:

<ui-gmap-google-map center='mapOptions.center' zoom='mapOptions.zoom' id="map-canvas">
    <ui-gmap-window coords="dataInfoWindow.coords" show="dataInfoWindow.show" templateUrl="dataInfoWindow.templateUrl" templateParameter="dataInfoWindow.templateParameter" isIconVisibleOnClick="dataInfoWindow.isIconVisibleOnClick" closeClick="dataInfoWindow.closeClick" options='dataInfoWindow.options'></ui-gmap-window>

    <ui-gmap-markers models="dataMarkers" coords="'self'" idKey="'id'" events="markerEvents"></ui-gmap-markers>
    <ui-gmap-marker idKey="'userMarker.id'" coords="userMarker.coords"></ui-gmap-marker>
</ui-gmap-google-map>

then part of my controller where I set up model for markers:

$scope.markerEvents = {
    click: function(gMarker, eventName, model) {
        // I've just cut off some code from here to be more clear
        // so don't blame for bad usage of google api ;)
        distanceService.getDistanceMatrix({
            origins: [new google.maps.LatLng($scope.userPosition.coords.latitude, $scope.userPosition.coords.longitude)],
            destinations: [new google.maps.LatLng(model.latitude, model.longitude)],
            travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
            if(status == google.maps.DistanceMatrixStatus.OK) {
                $scope.$apply(function() { //that was solution in my case
                    model.distance = response.rows[0].elements[0].distance.text;
                });
            }
        });

        $scope.dataInfoWindow.show = true;
        $scope.dataInfoWindow.coords = { latitude: model.latitude, longitude: model.longitude };
        $scope.dataInfoWindow.templateParameter = model;

    }
};

Then that's my info window template

<div class="data-info-window">
    <i class="fa fa-map-marker"></i><span><strong>{{ parameter.distance }}</strong> from you</span>
</div>

I think thats all. If I can help you any other way let me know :)

[coderdecoder]

I just added chunk="false" to the ui-gmap-markers tag and it didn't change anything. If I get some time later tonight I will attempt to get the plnk going and take a look at the above work around as well.

Cheers,

Walter.

[coderdecoder]

Hmm... thanks a bunch @Kulfon93 . I attempted to use your method and it did work. I still kind of feel this is a bug however.

Here's my function using $scope.apply...

        if (response.status === vm.googleMaps.DirectionsStatus.OK) {

  //vm.directionsDisplay.setDirections(response);
  //vm.directionsDisplay.setMap(vm.map.control.getGMap());
  //vm.directionsDisplay.setPanel(vm.map.control.getGMap());

//alert('wait');
          //set routes
          $scope.$apply(function(){

    vm.directionsSteps = response.routes[0].legs[0].steps;
  });
  console.log(vm.directionsSteps);

}

});
}

But it seems to me that this is a bit extraneous. Or maybe I'm using this incorrectly to get my directions? In any case I feel like getting distances from a click should not be freezing the binding.

@nmccready if you don't know what's causing this and feel like there's a potential bug involved let me know and I can attempt to make the plnk work.

Cheers,

Walter.