CODEWITHSUNDEEP
htmlangulartypescriptionic-frameworkionic2
Baptiste
Baptiste

Reputation: 399

Ionic 2 - Live data binding

I'm trying to do my own info window from a Google Maps marker. When I click on the marker, I have a div which is displayed, but the infos inside the div are not updated. The event.title is still the old value. I must click wherever I want then the div is displayed. How can I update the view/data without any click ? Thanks

<div [style.display]="choice == 'maps' ? 'block' : 'none'" style="height: 100%; position: relative;">
  <div #map id="map" style="width: 100%; height: 100%;">
  </div>
  <div id="over_map" class="infos" padding>
    <h4 style="color: white;">{{ event.title }}</h4>
  </div>
</div>

The addMarker function is called each time I want a new marker shown on my map. 

addMarker(object: any) {
  var myLatlng = new google.maps.LatLng(object.latitude, object.longitude);
  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: myLatlng
  });
  this.addInfoWindow(marker, object);
}

addInfoWindow(marker, object){
  google.maps.event.addListener(marker, 'click', () => {
    this.event = {
      title: object.title,
      content: object.description
    }
    $("#over_map").slideToggle("slow");
  });
}

Upvotes: 0

Views: 102

Answers (1)

kevobt
kevobt

Reputation: 156

I had similar problems. This must be a problem with Angulars Change Detection. import NgZone from @angular/core, inject it and try running the callback inside a Zone like this:

google.maps.event.addListener(marker, 'click', () => {
    this.zone.run(() => {
        this.event = {
            title: object.title,
            content: object.description
        }
        $("#over_map").slideToggle("slow");
    });
});

Upvotes: 3

Related Questions