ionic 2/ Angular 2 - Fail to pass data from Google Maps InfoWindow to page

Question

I am trying to pass data from Google Map InfoWindow to Info Page. I am able to pass and access the data. However, every time when the infoWindow is being reopen, the page will fire i+1, overlaying each other.

For example first time InfoWindow opened, Apply button clicked , it will go to Info Page. Closing the InfoWindow and reopen it, click the Apply button again, it will open the Info Page twice and carry on incrementing by 1 if repeating the process.

Process:

Map -> markers created -> set content variable -> create infoWindow-> set marker to open infoWindow when clicked -> infoWindow appear with the content -> click APPLY on infoWindow -> direct to InfoPage ONCE-> close InfoPage -> direct back to Map with infoWindow and content opened. (Click Apply will go to InfoPage again but only ONCE) -> close infoWindow -> Click on marker -> infoWindow shown. -> Click “APPLY in info window-> direct to “InfoPage” TWICE -> close go back to first InfoPage -> close go back to map with infoWindow -> close info window , show map with markers. -> click on marker repeats, InfoPage appear thrice.

Basically every time the InfoWindow being closed and reopen again, the InfoPage will increment by 1.

What I seen form console.log is that it will create another array when the InfoWindow is reopened because the click eventlistener is trigged. I had tried to use oneTime function,run event once,and other methods but all failed.

Feel free to comment on the problem. Any suggestions are appreciated. 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

Manage to solve by using 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);

});