I can’t add Overlayview

Question

I need to add a OverlayView on a map in a project Ionic3.

The Google tutorial was used as a basis: Add Custom Overlayview

The code used is a pro adaptation TypeScript that I found researching.

Code:

declare var google;

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    overlay: any;

    private srcImg: string = 'https://developers.google.com/maps/documentation/' + 'javascript/examples/full/images/talkeetna.png';

    //Todos os parametros necessários são passados no construtor
    constructor() {}

    //Definição de uma classe interna para o OverlayView
    //Adaptação encontrada de JavaScritp para TypeScritp
    USGSOverlay = class extends google.maps.OverlayView {

          bounds_: any;
          div_: any;
          image_: any;

          constructor(bounds, image, private map) {
            this.bounds_ = bounds;
            this.image_ = image;

            this.div_ = null;

            this.setMap(map);
          }

          onAdd() {
            var div = document.createElement('div');
            div.style.borderStyle = 'none';
            div.style.borderWidth = '0px';
            div.style.position = 'absolute';

            var img = document.createElement('img');
            img.src = this.image_;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.position = "absolute";
            div.appendChild(img);

            this.div_ = div;

            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
          }

          draw() {
            var overlayProjection = this.getProjection();

            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

            var div = this.div_;
            div.style.left = sw.x + 'px';
            div.style.top = ne.y + 'px';
            div.style.width = (ne.x - sw.x) + 'px';
            div.style.height = (sw.y - ne.y) + 'px';
          }

          onRemove() {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
          }
    };

    //Aqui é onde a OverlayView deveria ser colocada sobre o mapa
    //na atual posição do usuário
    updateLocation() {
      this.platform.ready().then(()=>{
        this.geolocation.getCurrentPosition({
            maximumAge:0,
            timeout:5000,
            enableHighAccuracy: true
         }).then((resp) => {

               console.log(resp);
               let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
               this.LL = latLng;

               let bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(resp.coords.latitude - 0.04, resp.coords.longitude - 0.04),
    new google.maps.LatLng(resp.coords.latitude + 0.04, resp.coords.longitude + 0.04));

               this.overlay = new this.USGSOverlay(bounds, this.srcImg, this.map);

               this.changeMarker(resp.coords.latitude, resp.coords.longitude);

        }).catch((error) => {
               console.log('Erro ao recuperar sua posição', 
               JSON.stringify(error.stack));
               console.error(error);
               this.toastCtrl.create({
                   message: 'Erro ao localizar seu dispositivo. Insira manualmente seu ponto de partida.',
                   duration: 5000,
                   position: 'bottom'
            });
         });
      });
    }
}

But nothing happens at all.

Someone might think it’s a problem because I didn’t place the call super(); inside the inner class constructor USGSOverlay. The problem that when I put this call returns me the following error when running the project:

Call target does not contain any Signatures.

But if I take the call from super(); the project runs, but the IDE points out to me the Warning :

Derived class constructors need to contain a super call'

And anyway nothing works.

Does anyone have any idea how I can do this OverlayView work?

Answer 1

 constructor(bounds, image, private map) {
        super(bounds, image, map);//Passar parâmetros ao chamar super()
        this.bounds_ = bounds;
        this.image_ = image;

        this.div_ = null;

        this.setMap(map);
      }