2

Estoy tratado de llamar una funcion desde un InfoWindows de Google Maps API, pero me muestra el siguiente error:

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

Al parecer dice que la función ir() no está definida.

Éste es mi código:

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

  }

Función ir() la cual sí tengo definida:

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

Al momento de darle click al botón que creo en el infowindows me muestra el error. Estuve investigando y no encuentro la respuesta.

Basicamente lo que trato de hacer es esto

http://jsfiddle.net/doktormolle/8ZsSp/

4
  • Creo que le falta poner funcion al principio de la funcion.
    – JDev
    el 31 may. 2018 a las 11:54
  • no hace falta es typescript
    – W Aleman
    el 31 may. 2018 a las 11:56
  • Es un componente hecho en angular? Podemos ver la clase completa que define al componente?
    – ffflabs
    el 31 may. 2018 a las 12:07
  • edite la pregunta y eh dejado todo el codigo.
    – W Aleman
    el 31 may. 2018 a las 12:14

2 respuestas 2

1

Finalmente encontré la solución

básicamente es colocarle un id al botton

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

y luego

un evento addListenerOnce

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

0

Lo que pasa es que ir() no es una función, es un método de tu componente, por eso no escribiste function delante (no es por que sea , tiene la misma sintaxis):

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>

Por tanto, tienes que definir la función fuera del componente para que sea accesible:

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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.