Hi i'm trying to fire an event from a button inside a google maps infowindow. the problem is that i can´t make it fire by any mean.

addMarket(latitud, longitud, sensorData) {

let marker = new google.maps.Marker({
  draggable: false,
  position: { lat: latitud, lng: longitud },
  map: this.map,//set map created here
  title: sensorData.sensor
});
marker.addListener('click', function () {
  infowindow.open(this.map, marker);
});

let bodyMessege = 'Nombre del Sensor: ' + sensorData.sensor + '<br>' +
  'Componente Descripcion: ' + sensorDataponentDesc + '<br>' +
  ' description:  ' + sensorData.description + '<br>' +
  ' Tipo de sensor: ' + sensorData.type + '<br>' +
  ' Unidad de sensor: ' + sensorData.unit + '<br>' +
  'Tipo de dato: ' + sensorData.dataType + '<br>' +
  '  <button ion-button (click)="this.navCtrl.push(DetalleSensorPage)" >Default</button>';

//      ' <button ion-button=""  onclick=console.log("log");'  anda
//this.pushPage=DetalleSensorPage;
var infowindow = new google.maps.InfoWindow({
  content: bodyMessege
});

Any tip will be wele thanks. :)

Hi i'm trying to fire an event from a button inside a google maps infowindow. the problem is that i can´t make it fire by any mean.

addMarket(latitud, longitud, sensorData) {

let marker = new google.maps.Marker({
  draggable: false,
  position: { lat: latitud, lng: longitud },
  map: this.map,//set map created here
  title: sensorData.sensor
});
marker.addListener('click', function () {
  infowindow.open(this.map, marker);
});

let bodyMessege = 'Nombre del Sensor: ' + sensorData.sensor + '<br>' +
  'Componente Descripcion: ' + sensorData.ponentDesc + '<br>' +
  ' description:  ' + sensorData.description + '<br>' +
  ' Tipo de sensor: ' + sensorData.type + '<br>' +
  ' Unidad de sensor: ' + sensorData.unit + '<br>' +
  'Tipo de dato: ' + sensorData.dataType + '<br>' +
  '  <button ion-button (click)="this.navCtrl.push(DetalleSensorPage)" >Default</button>';

//      ' <button ion-button=""  onclick=console.log("log");'  anda
//this.pushPage=DetalleSensorPage;
var infowindow = new google.maps.InfoWindow({
  content: bodyMessege
});

Any tip will be wele thanks. :)

• javascript
• html
• google-maps
• ionic2
• infowindow

• I was able to solve it, but I'm not sure if it's the same scenario. On my end the requirement was to only show one info view at the time and include a button inside of it. So if you first open an info view, and then you click on another marker, the first info view will be closed and only the new one will be shown. Would that be ok? – sebaferreras Commented Oct 14, 2017 at 8:28
• It's the same requirement only one popup will show at a time, when a marker is pressed an infowindow shows information and has a button to redirect to another page, showing more details. I tried calling a function from the button, but I can't get even a console log to work. – S.Regusci Commented Oct 14, 2017 at 16:00
• If it is helpful you can look at my code for a similar implementation where I open InfoWindow when a region of a map is clicked. FYI this is also an Ionic 2 app. – Philip Brack Commented Oct 14, 2017 at 20:19

1 Answer 1

I have found this solution for my own project: ( https://forum.ionicframework./t/ng-click-in-google-maps-infowindow/5537/6)

The key element is the id="tap" that you look for at the getElementbyId below.

let content = '<div class="infowindow"><p id="tap">your text here</p></div>';

let infoWindow = new google.maps.InfoWindow(
  {
    closeBoxURL: "",
    content: content
  }
);
infoWindow.open(this.map, marker);

google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
  document.getElementById('tap').addEventListener('click', () => {
    //alert('Clicked');
    console.log("touch");
    this.closeInfoViewWindow(infoWindow);
    this.openEventDetailModal(event);
  });
});

hope this will help you and others.