CODEWITHSUNDEEP
angulargoogle-mapsionic-frameworkionic3ionic-native
frint
frint

Reputation: 881

Open popup when click on marker

I have this code :

popupIsOpen = false;
const marker: Marker = this.map.addMarkerSync(markerData);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(this.markerClick);

markerClick(params: any) {
        this.popupIsOpen = !this.popupIsOpen;
        const marker: Marker = params[1] as Marker;
}

The template :

<ion-content>
    <div id="map_canvas"></div>
</ion-content>
<div [ngClass]="{'overlay': popupIsOpen, 'hidden': !popupIsOpen}">
    <ion-card>
        <ion-card-content>
            <ion-button (click)="popupIsOpen=!popupIsOpen">close</ion-button>
             Content
        </ion-card-content>
    </ion-card>
</div>

The popup is not displayed when I click on marker. What I’m doing wrong ? Thx in advance.

Upvotes: 1

Views: 244

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

The google map API events are not monkey patched by zone.js and therefore are not running in the ngZone. You should manually re-enter the zone using ngZone.run():

constructor(private ngZone: NgZone) {}

markerClick(params: Marker[]) {
  this.ngZone.run(() => {
    this.popupIsOpen = !this.popupIsOpen;
    const marker: Marker = params[1] as Marker;
  });
}

There is also a possibility you are losing the this context, because you are not binding the events properly. There are several options, one is to use the anonymous arrow function notation when binding:

marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => this.markerClick(params));

Upvotes: 1

Related Questions