Click on InfoWindow Typescript Angular2

Question

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

  }

I am not sure if `(click)="goToProductPage(product)"` can be triggered like that. Can you try this intead? Worked for me. `infoWindow.addEventListener('click', () => {})`. Just to tell you, in my case instead of infoWindow, I had an html element prepared from DOM. — Sagar Kulkarni, Apr 10 '17 at 12:11

score 8 · Accepted Answer · edited May 23 '17 at 12:34

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 ! :)

Awesome. This helps me out. – tala9999 Apr 19 '18 at 16:16 — tala9999, Apr 19 '18 at 16:16

Daniel Cooke · Answer 2 · 2017-04-12T09:28:38.790

4

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.

edited Apr 12 '17 at 09:28

answered Apr 11 '17 at 14:41

Daniel Cooke

1,426
12
22

Hey this is fabulous ! I already knew some of your code, but I didn't know exactly all of it. So just one question regarding the template : where do you write your template code ? In a var and then pass to `content` ? Or do you put it in the normal template with the other ? Because I don't know where to put it since it's a **infoWindow** and so not visible at the beginning.. Hope you understand me :) – luiswill Apr 11 '17 at 20:33
Yeah I already tried that, but the click isn't catched, even if you said "" I updated my code, maybe it will be clearer :) – luiswill Apr 12 '17 at 08:44
1

@luiswill I have made a few errors in my answer, I will update it later today - apologies – Daniel Cooke Apr 12 '17 at 09:03
1

@luiswill very nice, you pretty much found a solution at the same time I corrected mine - all the best – Daniel Cooke Apr 12 '17 at 09:30

Click on InfoWindow Typescript Angular2

Idea

Problem

EDIT

2 Answers2

Solution

Linked