Push to a page onclick on google maps infowindow


#1

Hello, i have a googlemap, i wanna push to homepage using this.navCtrl.push(HomePage);
Here’s my code:

   var infowindow = new google.maps.InfoWindow({
      content:"<input type='button' id='clickableItem'value='consulter profile'>"

    });

      
    google.maps.event.addListener(infowindow, 'domready', () => {
      //now my elements are ready for dom manipulation
      document.getElementById('clickableItem').addEventListener("click",kebbab);
   
      function kebbab(){

        this.navCtrl.push(HomePage);
      }
      
    });

i tried to make an alert("azz"); instead of this.navCtrl.push(HomePage); and it worked, but its not working with this.navCtrl.push(HomePage);
Is there anyway to do that?


#2

Firstly, I would say to you that you have many other options to achieve this in an “Angular way”.

But, as you asked for help in your way, I will try to help.
It looks like this will be undefined when you you’ll click on the button.
Why? Because kebab isn’t binded to this.
So 2 options:

  1. use ngZone.run(() => { } )
  2. bind the function to this.

The Angular way is by far the best solution you could have instead of import * as “google” from …
And the angular way is to provide components, injectables, pipes and templates: https://angular-maps.com just like Ionic do :slight_smile:


#3

@izio38 so what i should do is use

 google.maps.event.addListener(infowindow, 'domready', () => {

	  var clickableItem = document.getElementById('clickableItem');
      clickableItem.addEventListener('click', () => {
			this.navCtrl.push(HomePage);
		});
      
    });

#4

not sur it will works while the domready event will be triggered asynchronously from the actual context.
But try it btw, I’m not sure on this one because arrow function should be executed in the called context…

If it doesn’t work, try ngZone :slight_smile:


#5

It worked with previous method but its kinda buggy, can you help me a bit with ngZone im not familiar with this, im i correct here ?

google.maps.event.addListener(infowindow, 'click', () => {

	  this.ngZone.run(() => {
        this.navCtrl.push(HomePage);
      });
      
    });

#6

Yes.
Also instead of asking, just try :wink:


#7

I tried but its not working im realy not familiar with this ngZone thing, sorry for my English btw im french x)))