Ionic Push in map marker event click not working - google map

Ionic Framework ionic-v3
1

Hi,

I tried to navigate to a new page when user click a map marker in Ionic2. Below is my code

addInfoWindow(marker, content){
        
        let infoWindow = new google.maps.InfoWindow({
            content: content
        });

        google.maps.event.addListener(marker, 'click', function() {
            //infoWindow.open(this.map, marker);
            this.nav.push(InfoPage);
        });

    }
2

The problem is that you are in a different context inside that function, and I believe even outside the Angular 2 zone.

(Read this for more: https://medium.com/@MertzAlertz/what-the-hell-is-zone-js-and-why-is-it-in-my-angular-2-6ff28bcf943e#.ek6m8m8g2 )

But basically, try:

google.maps.event.addListener(marker, 'click', () => {
  //infoWindow.open(this.map, marker);
  this.nav.push(InfoPage);
});
3

Awesome.Yes my bad, Thanks for your help.

Cheers,

4

Ao basically what You are saying is that its is totally impossible to invoke navigation push from inside inFoWindow. hmm. thats really bad.

5

so could you find a solution for that problem

6

Thank you @nanexcool .
This worked for me.

7

I just tested here using your tip, but I got the following error:
Can not read property ‘push’ of undefined…

And using as in the link talks about the zone.js … also the ionic does not identify the zone within the scope of this.

Can anybody help me?

8

Hello, when using this command “google.maps.events … etc” it does not have runtime, but when it is testing, as soon as it enters this error method does not parameter ‘bookmark’ - message
:
“bookmark is not set”

and soon after the following error: Unable to read ‘undefined’ push property …
Can anybody help me?

9

Hello ,

I tried syntax that you given.
But not working in my project

It gave me error like “show_details() is not a function”

function createMarker(latlng, title, content, map) 
        {
            google.maps.event.addListener(marker, 'click',() =>
            {
                if(title == 'start')
                {
                    this.is_origin = 1;
                    this.is_current_truck = 0;
                    this.is_destination = 0;
                    this.show_details(1,0,0);
                }
                if(title == 'end')
                {
                    this.is_origin = 0;
                    this.is_current_truck = 0;
                    this.is_destination = 1;
                    this.show_details(this.is_origin,this.is_current_truck,this.is_destination);
                }
                if(title == 'current vehicle')
                {
                    this.is_origin = 0;
                    this.is_current_truck = 1;
                    this.is_destination = 0;
                    this.show_details(this.is_origin,this.is_current_truck,this.is_destination);
                }
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });
        }


    show_details(origin,current_vehicle,destination)
    {
        this.is_origin = origin;
        this.is_current_truck = current_vehicle;
        this.is_destination = destination;
    }