Click on InfoWindow Typescript Angular2
Hi I have searched many times, I hope you can help me :)
Idea
I want to display the page if you click on the InfoWindow on Google Maps. (Using ModalController from Ionic 2)
Problem
Clicking 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();
}
Unfortunately it doesn't work, I also tried with node content, with onclick=""
, with javascript functions ..
Here's another question with the same problem .
Regards, Louis
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;
});
}
source to share
Decision
Thanks to the help of Daniel Cooke with
var clickableItem = document.getElementById('clickableItem');
clickableItem.addEventListener('click' , () => this.goToProductPage())
-> The problem was the InfoWindow content was not ready for DOM manipulation.
So I added a listener domready
thanks to this question .
google.maps.event.addListener(infoWindow, 'domready', function() {
// your code
});
Here's 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;
});
}
Thanks again to Daniel for your patience! :)
source to share
If InfoWindow is the same InfoWindow from the official API , then the reason it doesn't work is because it doesn't know how to manage Angular2 bindings. Its just old Javascript.
You will need to add event listeners the old fashioned way.
clickableItem.addEventListener('click' , () => {/*callbackCode */})
Edit
Note that you will need to access some of the DOM events displayed in the google maps api in order to do this.
In 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.
source to share