Handle click event from class

Ionic Framework ionic-v3
1

Hey guys,

I’m trying to open a Popover page, but it’s always showing at the middle of the screen. I think it’s because the button I click isn’t an ion component in the html file, but a Google maps marker in my ts file.

google.maps.event.addListener(friendMarker, 'click', (event) => {
    that.presentPopover(event, friendMarker, oneFriend)
});

So, I listen to the click event on my Maps marker, and when I click on it, I open my Popover page, just like this:

presentPopover(ev, friendMarker, oneFriend) {
    this.map.panTo(friendMarker.position);
    let popover = this.popoverCtrl.create(ContactPopoverPage, {friend: oneFriend});
    popover.present({
        ev: ev
    });
}

Unfortunately, I think my event isn’t the one the Popover page is waiting for… Because the popover just pop without the arrow and is always right in the middle of the screen.

So the question is : Do you guys know how to pass the right event to my Popover page from my ts file ?

Thanks mates !

2

Hi @AdamGelineau

Reading a little bit Google Maps documentation. https://developers.google.com/maps/documentation/javascript/events

I think you should fire the Popover element on Marker click event callback.

Something like this:

  marker.addListener('click', function(event) {
    that.presentPopover(event, this, oneFriend);
  });

Regards.
Irving.

3

Yeah, nice idea, I’ll try this on Monday though !
Thanks, I’ll give feedback soon :wink:

4

So, after trying your solution, unfortunately it doesn’t work :confused:

Let me show you what i tried:

let friendMarker = new google.maps.Marker({
              position: position,
              title: 'friend',
              icon: {
                url: url,
                scaledSize: new google.maps.Size(42, 42), // scaled size
              },
              optimized: false
            });

friendMarker.addListener('click', function(event) {
     that.presentPopover(event, oneFriend);
});

When I click on my Maps marker, my Popover still appears in the middle of the page, and not on my marker.

5

Finally found out a solution which is ok to me, I’m using Google Maps InfoWindow instead of Ionic Popover component.

Thanks anyway for helping me though :wink: Appreciate