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


i trying pass data google map infowindow info page. able pass , access data. however, every time when infowindow being reopen, page fire i+1, overlaying each other.

for example first time infowindow opened, apply button clicked , go info page. closing infowindow , reopen it, click apply button again, open info page twice , carry on incrementing 1 if repeating process.

process:

map -> markers created -> set content variable -> create infowindow-> set marker open infowindow when clicked -> infowindow appear content -> click apply on infowindow -> direct infopage once-> close infopage -> direct map infowindow , content opened. (click apply go infopage again once) -> close infowindow -> click on marker -> infowindow shown. -> click “apply in info window-> direct “infopage” twice -> close go first infopage -> close go map infowindow -> close info window , show map markers. -> click on marker repeats, infopage appear thrice.

basically every time infowindow being closed , reopen again, infopage increment 1.

what seen form console.log create array when infowindow reopened because click eventlistener trigged. had tried use onetime function,run event once,and other methods failed.

feel free comment on problem. suggestions appreciated. in advance :)

googlemapprovider.ts

import { injectable } '@angular/core'; import { http } '@angular/http'; import 'rxjs/add/operator/map'; import { app } 'ionic-angular';    constructor(   public http: http,   public app:app,    ) {   }   addmarker(lat: any, lng: , 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 record } 

manage solve 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);  });  

Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -