title: ionic 2/ Angular 2 - Fail to pass data from Google Maps InfoWindow to page
body: <p>I am trying to pass data from <code>Google Map InfoWindow</code> to <code>Info Page</code>. I am able to pass and access the data.
  However, every time when the infoWindow is being reopen, the page will fire <code>i+1</code>, overlaying each other. </p>
  
  <p>For example first time InfoWindow opened, <code>Apply button</code> clicked , it will go to <code>Info Page</code>. <strong>Closing the InfoWindow and reopen it</strong>, click the <code>Apply button</code> again, it will open the <code>Info Page</code> twice and carry on incrementing by 1 if repeating the process.</p>
  
  <p>Process: </p>
  
  <p>Map -> markers created -> set <code>content</code> variable -> create infoWindow-> set marker to open infoWindow when clicked -> infoWindow appear with the content -> click <code>APPLY</code> on infoWindow -> direct to <code>InfoPage</code> <strong>ONCE</strong>-> close InfoPage -> direct back to Map with infoWindow and content opened. (Click <code>Apply</code> will go to <code>InfoPage</code> again but only <strong>ONCE</strong>) -> <strong>close infoWindow</strong> -> Click on marker -> infoWindow shown. -> Click “<code>APPLY</code> in info window-> direct to “InfoPage” <strong>TWICE</strong> -> close go back to first <code>InfoPage</code> -> close go back to map with infoWindow -> close info window , show map with markers. -> click on marker repeats, <code>InfoPage</code> appear <strong>thrice</strong>.</p>
  
  <p>Basically every time the <code>InfoWindow</code> being closed and reopen again, the <code>InfoPage</code> will <code>increment by 1</code>.</p>
  
  <p>What I seen form <code>console.log</code> is that it will create another array when the <code>InfoWindow</code> is reopened because the <code>click eventlistener</code> is trigged. I had tried to use <code>oneTime</code> function,run event once,and other methods but all failed.</p>
  
  <p>Feel free to comment on the problem. Any suggestions are appreciated. Thanks in advance :)</p>
  
  <p><strong>GoogleMapProvider.ts</strong></p>
  
  <pre><code>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 =&gt; res.json())
    .subscribe(Idata =&gt; {
  
      let infoData = Idata;
  
        let content = "&lt;ion-item&gt;" + 
       "&lt;h2 style='color:red;'&gt;" + infoData['0'].ListingTitle + "&lt;/h2&gt;" + 
       "&lt;p&gt;" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingTime + "&lt;/p&gt;" +
       '&lt;p id="' + infoData['0'].ListingID + '"&gt;Apply&lt;/p&gt;'
       "&lt;/ion-item&gt;";    
  
   let infoWindow = new google.maps.InfoWindow({
   content: content
   });
  
    google.maps.event.addListener(infoWindow, 'domready', () =&gt; {
  
    let goInfoPage = document.getElementById(infoData['0'].ListingID);
  
    goInfoPage.addEventListener('click', () =&gt; {
  
      let pushData = infoData['0'];
  
      let nav = this.app.getActiveNav();
  
      nav.push('InfoPage',{'record':pushData});
  
     })
  });
  
  google.maps.event.addListener(marker, 'click', () =&gt; {
  
  infoWindow.open(this.map, marker); 
  
    });
  
  });
  
  }
  </code></pre>
  
  <p><strong>Info.ts</strong></p>
  
  <pre><code>ionViewDidLoad()
  {
       this.selectEntry(this.NP.get("record")); //getting the record
  }
  </code></pre>