Ionic 2 / Angular 2 - Failed to transfer data from Google Maps InfoWindow to the page

Question

I am trying to transfer data from a Google Map InfoWindow to an Info Page . I can transfer and access data. However, every time the info window opens, the page fires i+1 , overlapping each other.

For example, when you first open the InfoWindow, Apply button , it will go to the Info Page . Having closed InfoWindow and opened it again , click the Apply button again, it will open the Info Page twice and continue to increase by 1 if it repeats the process.

Process:

Map → created markers → set content variable → create infoWindow-> set marker to open infoWindow when pressed → content information → press APPLY on infoWindow → directly on InfoPage ONCE → close InfoPage → go back to the map with infoWindow and content opened. (Press APPLY again to return to InfoPage , but only ONCE ) → close infoWindow → Click on marker → infoWindow. → Click " APPLY in the info window-> directly to" InfoPage " TWICE → close go back to the first InfoPage → close go back to the map using infoWindow → close the info window, show the map with markers. → click on marker repeats, InfoPage will appear three times .

Basically, every time InfoWindow closes and reopens, InfoPage will increment by 1 .

What I saw in the console.log form is that it will create another array when InfoWindow is opened again, because click eventlistener will click eventlistener . I tried to use the oneTime function, fire the event once and other methods, but everything failed.

Feel free to comment on the issue. Any suggestions are welcome. Thanks in advance:)

GoogleMapProvider.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; import { App } from 'ionic-angular'; constructor( public http: Http, public app:App, ) { } addMarker(lat: any, lng: any , listingID:any): void { let latLng = new google.maps.LatLng(lat, lng); let marker = new google.maps.Marker({ map: this.map, animation: google.maps.Animation.DROP, position: latLng, }); this.markers.push(marker); this.addInfoWindow(marker,listingID); } addInfoWindow(marker,listingID){ this.http.get('http://localhost/infoWindow.php?id=' + listingID) .map(res => res.json()) .subscribe(Idata => { let infoData = Idata; let content = "<ion-item>" + "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingTime + "</p>" + '<p id="' + infoData['0'].ListingID + '">Apply</p>' "</ion-item>"; let infoWindow = new google.maps.InfoWindow({ content: content }); google.maps.event.addListener(infoWindow, 'domready', () => { let goInfoPage = document.getElementById(infoData['0'].ListingID); goInfoPage.addEventListener('click', () => { let pushData = infoData['0']; let nav = this.app.getActiveNav(); nav.push('InfoPage',{'record':pushData}); }) }); google.maps.event.addListener(marker, 'click', () => { infoWindow.open(this.map, marker); }); }); } 

Info.ts

 ionViewDidLoad() { this.selectEntry(this.NP.get("record")); //getting the record } 

Answer 1

Remove with removeEventListener

  google.maps.event.addListener(infoWindow, 'domready', () => { let goInfoPage = document.getElementById(infoData['0'].ListingID); const onClick = () => { let pushData = infoData['0']; let nav = this.app.getActiveNav(); nav.push('InfoPage',{'record':pushData}); goInfoPage.removeEventListener('click', onClick); } goInfoPage.addEventListener('click',onClick); });