Ionic - Supplied parameters do not match any signature of call target


#1

Hello guys,

Testing custom googlemaps overlays i got the following error:

“Supplied parameters do not match any signature of call target” on the super() method of the contructor of google.maps.OverlayView extended class.

In the browser, with the command -> “ionic serve” the error can be closed and the overlay can be seen in the map correctly. But with the command -> “ionic run android” the project fails on the build.

To install googlemaps i run: "npm install @types/google-maps --save"
In the index.html i put the script:

My code, below:

import { Component, ViewChild } from ‘@angular/core’;
import { IonicPage, NavController } from ‘ionic-angular’;

declare var google;

export class USGSOverlay extends google.maps.OverlayView{
bounds_;
image_;
map_;
div_;

constructor(bounds, image, map)
{
super(); //<-- ERROR HERE
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;

// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;

// Explicitly call setMap on this overlay.
this.setMap(map);

}

/**

  • onAdd is called when the map’s panes are ready and the overlay has been
  • added to the map.
    */
    onAdd(){
    const div = document.createElement(‘div’);
    div.style.borderStyle = ‘none’;
    div.style.borderWidth = ‘0px’;
    div.style.position = ‘absolute’;
// Create the img element and attach it to the div.
const 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;

// Add the element to the "overlayLayer" pane.
const panes = this.getPanes();
panes.overlayLayer.appendChild(div);

};

draw(){

// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
const overlayProjection = this.getProjection();

// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

// Resize the image's div to fit the indicated dimensions.
const 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';

};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay’s map property to ‘null’.
onRemove(){
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
};

@IonicPage()
@Component({
selector: ‘page-about’,
templateUrl: ‘about.html’
})
export class AboutPage {

@ViewChild(‘map’) mapElement;
map: any;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){
this.initMap();
}

initMap(){
let latLng = new google.maps.LatLng(42.84998, -2.67268);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};

this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(42.84998, -2.67268),
        new google.maps.LatLng(42.94998, -2.57268));
var srcImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Finland_Regions_Map.svg/2000px-Finland_Regions_Map.svg.png';

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

}
}

Thank you