call function from Google map InfoWindows on ionic?

Question

call function from Google map InfoWindows on ionic?

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm trying to call a function from an InfoWindows in the Google Maps API, but it shows me the following error:

(index): 1 Uncaught ReferenceError: ir is not defined at HTMLButtonElement.onclick ((index): 1)

It seems that the ir() function is not defined.

This is my code:

addMarker(position,map,title){
    var marker = new google.maps.Marker({
      position,
      map,
      title
    });

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

    marker.addListener('click',function(){
      infoWindow.setContent('<h1> '+ title +'</h1>' +
          '<button class="mapaboton" onclick="ir()">Ver Detalles</button>');

        infoWindow.open(map,marker);
    });

  }

Function ir() which I do have defined:

  ir(){
    console.log("vamos");
  }

At the moment of clicking the button that I believe in the infowindows it shows me the error. I was investigating and I can not find the answer.

Basically what I try to do is this

link

javascript typescript google-maps ionic api

asked by Wilfredo Aleman 31.05.2018 в 12:45

source

2 answers

0

What happens is that going () is not a function, it's a method of your component, so you did not write function in front (it's not because it's typescript , javascript tag has the same syntax):

class MiClase {

  constructor() {
    this.atributo="hola";
  }
  
  ir() {
    console.log(this.atributo);
  }
  
  addOnClick() {
  console.log('add');  document.getElementById('test').innerHTML='<label onclick="ir()">hola</label>';
  }
}

let obj= new MiClase();

obj.ir();
obj.addOnClick();

#test {
height: 100px;
width: 100px;
border: 1px solid black;
}

<div id="test"></div>

Therefore, you have to define the function outside the component to be accessible:

class MiClase {

  constructor() {
    this.atributo="hola";
  }
  
  ir() {
    console.log(this.atributo);
  }
  
  addOnClick() {
  console.log('add');  document.getElementById('test').innerHTML='<label onclick="ir()">hola</label>';
  }
}



let obj= new MiClase();
let ir= obj.ir.bind(obj);
obj.addOnClick();

#test {
height: 100px;
width: 100px;
border: 1px solid black;
}

<div id="test"></div>

answered by 31.05.2018 в 16:52

convert rows to columns in sql 2012 [closed] Detect cursor inactivity

score 0 · Accepted Answer

Finally I found the solution

basically is to put an id to the botton

   marker.addListener('click',function(){
      infoWindow.setContent('<h1> '+ title +'</h1>' +
          '<button id="' + id +'"  class="mapaboton" >Ver Detalles</button>'); 
        infoWindow.open(map,this);
    });

and then

an addListenerOnce event

   google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
      document.getElementById(id).addEventListener('click', () => {
               this.navCtrl.push(RestauranteDetallePage,{ codigo : id})
          });
  });