Click on InfoWindow Typescript Angular2

问题:

Hi I have searched since many hours, I hope you can help me :)

Idea

I want to display a Page if you click on an InfoWindow on google Maps. (Using a ModalController from Ionic 2)

Problem

Click doesn't work..

var infoWindow = new google.maps.InfoWindow({
      content: '<h2 (click)="goToProductPage(product)">Click me</h2>'
    });


goToProductPage(product :any){
    let modal = this.modalCtrl.create(ProductPage, product);

    modal.present();
}

Sadly this doesn't work, I tried also with a content node, with onclick="", with javascript functions..

Here is another question with the same problem unsolved.

Best regards, Luis

EDIT

setProductMarker(product :any, productLocation :any){

    var contentWindow = "<h2 id='clickableItem'>Click me</h2>" + product.productName + "<img src='" + product.imgUrl + "' width='60' height='60' /> <br/>" + product.date

    var clickableItem = document.getElementById('clickableItem');

    clickableItem.addEventListener('click' , () => {
       this.goToProductPage(product);
     });

    var productMarker = new google.maps.Marker({
      position: new google.maps.LatLng(JSON.parse(productLocation).latitude, JSON.parse(productLocation).longitude),
      map: this.map,
      title:"Product"
    })


    var infoWindow = new google.maps.InfoWindow({
      content: contentWindow
    });

    infoWindow.addListener('click', () => {
      alert("yeah");
      console.log("yeah");
    });


  productMarker.addListener('click', event => {
    infoWindow.open(this.map, productMarker);
    this.productNow = product;
    });

  }

回答1:

Solution

Thanks to the help of Daniel Cooke with

var clickableItem = document.getElementById('clickableItem');
   clickableItem.addEventListener('click' , () => this.goToProductPage())

-> The problem was my InfoWindow content wasn't ready for the DOM manipulation.

---

So, I added a domready listener thanks to this question.

google.maps.event.addListener(infoWindow, 'domready', function() {
   // your code
});

Here is the complete source code :

setProductMarker(product :any, productLocation :any){
    var contentWindow = product.productName + "<h2 id='clickableItem'>Click me</h2><img src='" + product.imgUrl + "' width='60' height='60' /> <br/>" + product.date;


    var productMarker = new google.maps.Marker({
      position: new google.maps.LatLng(JSON.parse(productLocation).latitude, JSON.parse(productLocation).longitude),
      map: this.map,
      title:"Product"
    })


    var infoWindow = new google.maps.InfoWindow({
      content: contentWindow
    });

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

  productMarker.addListener('click', event => {
    infoWindow.open(this.map, productMarker);
    this.productNow = product;
    });

  }

Thank you again Daniel for your patience ! :)

回答2:

If InfoWindow is the same InfoWindow from the official API then the reason it is not working is because it will not know how to manage Angular2 bindings. Its just plain old Javascript.

You will need to add event listeners the old fashioned way.

clickableItem.addEventListener('click' , () => {/*callbackCode */})

Edit

Note you will have to access some DOM events exposed by Google maps api in order to do this.

In your angular2 component

var content = "<h3 id="click">Clickable Element</b>";


var info = new google.maps.InfoWindow({
    content: content
});

google.maps.event.addListener(info, 'domready', function() {
    document.getElementById("click").addEvent("click", function(e) {
        console.log("hello world");
        e.stop();

    });
});

Note: I pulled most of this from the events section of the official API - you should really check it out.