Ionic 2 - Push a new page when I click on a google maps info window

Question

I'm using the google maps api in my ionic 2 project. I have a service for creating the markers and cluster them. I'm creating a info window for each marker like this:

content = "<h4>Title</h4><p onclick=\"callFunctionFromServiceHere()\">Go to new page</p>";
var infoWindow = new google.maps.InfoWindow({
    content: content
});

I want to push a new page if I click on "Go to new page". How is that possible? Because I think the HTML of the info windows does not have access to my ionic 2 service.

Please see [this](http://stackoverflow.com/questions/43128921/custom-google-maps-infowindow-using-ionic-2/43181306#43181306) solution. This solution should help you. — Math10, Apr 25 '17 at 17:35

score 4 · Accepted Answer · edited May 23 '17 at 12:02

You can add an eventListener to catch a click on your infowindow.

Here for example :

google.maps.event.addListener(infoWindow, 'domready', () => {
  //now my elements are ready for dom manipulation
  var clickableItem = document.getElementById('clickableItem');
  clickableItem.addEventListener('click', () => {
    this.goToProductPage(product);
  });
});

You just have to add another Listener to wait until the dom is ready, otherwise your elements will not be ready for dom manipulation..

Here some more infos,

Hope it helped you ;)

Ionic 2 - Push a new page when I click on a google maps info window

1 Answers1