Ionic-native-google-maps: how to call javascript functions from a link inside htmlInfoWindow?

[leabdalla]

I'm calling the addMarker() function to add markers and their windows. This is working Fine.

  mapClickCam(){
    console.log('mapClickCam');
  }

  addMarker() {

    let data = api['data'];
    let htmlInfoWindow = new HtmlInfoWindow();
    let frame = document.createElement('div');

    frame.innerHTML = `
      <a href="#" onclick="javascript:mapClickCam(); return false;">
        <ion-icon class="videocam" name="videocam-outline"></ion-icon>
      </a>
    `;

    htmlInfoWindow.setContent(frame, {width:"220px", height:"auto"});

    let markerOptions:MarkerOptions = {
      position:new LatLng(data.latitude, data.longitude),
    };

    let marker = map.addMarker(markerOptions).then( (mark:Marker) => {
      mark.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        htmlInfoWindow.open(mark);
      });

      mark.on(GoogleMapsEvent.INFO_OPEN).subscribe(() => {
        console.log('window OPEN');
        console.log(htmlInfoWindow);
      });
    });

  }

So now I need to call mapClickCam() method from the link inside each HtmlInfoWindow.

How can I do that?

This way its displaying error "mapClickCam()" is not defined.

[ndrake]

Add a click handler to the frame. See this demo for an example:

https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/src/app/html-info-window/html-info-window.page.ts

[leabdalla]

Thanks for the answer. So, what if I have two different links inside the frame?

[wf9a5m75]

@leabdalla You should try by yourself before asking. @ndrake gives a hint at least.

[leabdalla]

I tried and it worked, so I'm talking about another issue..

[leabdalla]

multiple links solved by adding custom event listeners for each one.

    mapClickCam(){
      console.log('mapClickCam');
    }

    mapClickAttach(){
      console.log('mapClickAttach');
    }

    let htmlInfoWindow = new HtmlInfoWindow();

    let frame = document.createElement('div');
    frame.innerHTML = `
      <div>
        <p align="center">
          <font size="6">
            <ion-icon class="link_videocam" name="videocam-outline"></ion-icon>
            <ion-icon class="link_attach" name="attach"></ion-icon>
          </font>
        </p>
      </div>
    `;

    htmlInfoWindow.setContent(frame, {width:"220px", height:"auto"});

    frame.getElementsByClassName("link_videocam")[0].addEventListener("click", (evt) => {
      console.log('link_videocam');
      mapClickCam();
    });

    frame.getElementsByClassName("link_attach")[0].addEventListener("click", (evt) => {
      console.log('link_attach');
      mapClickAttach();
    });

But the methods mapClickCam() and mapClickAttach() inside events are not being called.

error TS2304: Cannot find name 'mapClickCam'.
error TS2304: Cannot find name 'mapClickAttach'.

How can I access those methods? I'm trying something like evt.parentNode.parentNode... but no success.

I'd appreciate if someone can help.

[wf9a5m75]

let self = this;

frame.getElementsByClassName("link_videocam")[0].addEventListener("click", (evt) => {
      console.log('link_videocam');
      self.mapClickCam.call(self);
});

frame.getElementsByClassName("link_attach")[0].addEventListener("click", (evt) => {
      console.log('link_attach');
      self.mapClickAttach.call(self);
});

[leabdalla]

Thanks it worked!

[wf9a5m75]

Congrats, but you should learn "why the code works". Search "function.bind()" on Google.

[leabdalla]

Yes I've made a search about javascript call() method.

Sorry it's my first time with typescript and also my first time coding a mobile app. Thanks!