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.

[bechampion]

I'm experiencing the exact same problem .

[bechampion]

$scope.$apply() did the trick.

[coderdecoder]

Yup. But it should still work. I really think this is a bug.

Sent from my Samsung device

-------- Original message -------- From: bechampion notifications@github.com Date: 2015-11-01 12:58 PM (GMT-05:00) To: angular-ui/angular-google-maps angular-google-maps@noreply.github.com Cc: coderdecoder wallyo@hotmail.com Subject: Re: [angular-google-maps] Angular Data Binding Frozen Until I Move Map After Clicking Marker That Calls DirectionsService (#1550)

$scope.$apply() did the trick.

---

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

[nmccready]

I don't disagree, but I haven't had time to dig into this. apologies . If someone else can dig in and find a cleaner way I can accept a PR for it.

[nmccready]

Try against latest on master. #1714

[javier-jm]

This seems a bit old but I'm having the same issue with 2.4.0 in a really simple application during socket.io emit events.

[coderdecoder]

Have you tried scope. Apply()? The binding g should automatically update but is bugged and needs some help.

[javier-jm]

Yes, $scope.$apply() will fix it, just wanted to let everyone know this is still out there. Thanks!

On Sep 25, 2016 9:22 AM, "coderdecoder" notifications@github.com wrote:

Have you tried scope. Apply()? The binding g should automatically update but is bugged and needs some help.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular-ui/angular-google-maps/issues/1550#issuecomment-249424421, or mute the thread https://github.com/notifications/unsubscribe-auth/AMvMn8FjJG9nMCkeVAnwANw_vaZgZW5Pks5qtoOPgaJpZM4GKuWh .

[coderdecoder]

Yup. It should be fixed. But its open source so I understand. I didn't have time to dig in. But its a bug for sure.

Sent from my Samsung device

-------- Original message -------- From: javier-jimenez notifications@github.com Date: 2016-09-25 12:11 PM (GMT-05:00) To: angular-ui/angular-google-maps angular-google-maps@noreply.github.com Cc: coderdecoder wallyo@hotmail.com, Mention mention@noreply.github.com Subject: Re: [angular-ui/angular-google-maps] Angular Data Binding Frozen Until I Move Map After Clicking Marker That Calls DirectionsService (#1550)

Yes, $scope.$apply() will fix it, just wanted to let everyone know this is still out there. Thanks!

On Sep 25, 2016 9:22 AM, "coderdecoder" notifications@github.com wrote:

Have you tried scope. Apply()? The binding g should automatically update but is bugged and needs some help.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular-ui/angular-google-maps/issues/1550#issuecomment-249424421, or mute the thread https://github.com/notifications/unsubscribe-auth/AMvMn8FjJG9nMCkeVAnwANw_vaZgZW5Pks5qtoOPgaJpZM4GKuWh .

You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/angular-ui/angular-google-maps/issues/1550#issuecomment-249430203