CODEWITHSUNDEEP
angularjsgoogle-mapsgoogle-maps-api-3
Peter HIRT
Peter HIRT

Reputation: 741

Marker eventListener fails to give me the object I request

I am doing an app where when I click on a marker on a google.map triggers some action, specifically I want to get an object out of an array of objects to display the details of such object.

I use the controller defs like so

(function() {
 'use strict';

angular
   .module('gulpAngular')
   .controller('GeolocationController', GeolocationController);

/** @ngInject */
function GeolocationController(HouseList) {
....
}
})();

The HouseList is a service defined elsewhere and having a method called getHouses()

Inside my controller, I do besides other things this:

var vm = this;
vm.houses = HouseList.getHouses();

Then I define my marker on the map like

allMarkers = new google.maps.Marker({....});

and add an Listener to it like below. To make things simple, I assign vm.house = vm.houses[0]

allMarkers.addListener('click', function() {
    vm.house = vm.houses[0]
}

Now I suppose I should be able to use the vm.house object to display in my html block the attributes of this house object in the fashion of 

<h4>{{vm.house.bedrooms}}</h4>

HOWEVER, NOTHING GETS DISPLAYED. I should see my vm.house object be updated and this reflected on the DOM, correct? What do I miss?

Funny: When i add a simple button on the html and use a ng-click function on it without anything other than say console.log(vm.house), not only it does display the correct object, but also the refresh of the html is happening. I am lost

thanks Peter

Upvotes: 0

Views: 26

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

addListener is not an Angular function and will not trigger the digest loop. You need to do it manually.

For example:

allMarkers.addListener('click', function() {
    $scope.$apply(function () {
        vm.house = vm.houses[0]
    });
});

Note that you need to inject $scope for this.

ng-click triggers the digest loop, which is why using it will update the HTML.

Upvotes: 1

Related Questions