Type 'any' is not a constructor function type. class google.maps.OverlayView

Question

What I want to implement is a piechart marker like this link I cant figure out how to draw the overlay.I saw a similiar question here, but none of these answers work for me. I am getting this error - "Type 'any' is not a constructor function type. class google.maps.OverlayView"

 import { Component, Input, Output, EventEmitter } from '@angular/core';
    const chartsApi = 'https://www.google.com/jsapi';
    declare var google: any;
    declare var $: any;
    import { } from '@types/googlemaps'
    @Component({
        selector: 'chart-marker',
        templateUrl: './chart-marker.component.html',
        styleUrls: ['./chart-marker.styles.scss']
    })

    export class ChartMarkerComponent {
        @Input() options: Object;
        @Input() data: Object;
        @Output() chartReady: EventEmitter<boolean> = new EventEmitter();
        private divToDraw: any;
        private innerDiv: any;
        private chart: any;
        constructor() {
            this.loadCharts();
        }
// the code below is giving me this error 
        USGSOverlay = class extends google.maps.OverlayView {
            bounds_: any;
            image_: any;
            map_: any;
            div_: any;
            constructor(bounds, image, private map) {
                super();
                // Initialize all properties.

            }
            /**
             * onAdd is called when the map's panes are ready and the overlay has been
             * added to the map.
             */
            onAdd() {

            };
            draw() {

            };
            // The onRemove() method will be called automatically from the API if
            // we ever set the overlay's map property to 'null'.
            onRemove() {

            };
        };
        private loadCharts() {
            if (typeof google === "undefined" || typeof google.charts === "undefined") {
                let node = document.createElement('script');
                node.src = chartsApi;
                node.type = 'text/javascript';
                document.getElementsByTagName('body')[0].appendChild(node);
                node.onload = () => {
                    google.load("visualization", "1", { packages: ['corechart'], "callback": this.drawChart.bind(this) });
                }
            }
        }
        private drawChart() {
            this.chartReady.emit(true);
        }

    }

Please post the code – Günter Zöchbauer May 19 '17 at 08:49 — Günter Zöchbauer, May 19 '17 at 08:49
I have edited my question to include the code. – RemyaJ May 19 '17 at 08:54 — RemyaJ, May 19 '17 at 08:54
What version of TS are you using v2.3? – mfeineis May 19 '17 at 11:21 — mfeineis, May 19 '17 at 11:21

score 0 · Answer 1 · answered May 19 '17 at 11:18

I suspect that TypeScript doesn't recognize your Google Maps API typings so it assumes what you are referring to is of type any which it doesn't allow to inherit from, hence the error message. As far as I know you can't import the typings but they are treated as ambient declarations in TS lingo - so having a tsconfig.json and the typings installed in your project directory should suffice.

I would recommend doing a minimal example without your Angular setup in place to see if TypeScript actually uses the provided typings, looking at the actual typings the class should be inheritable und usable in the way you're trying to do it.

Something like this in a single file should suffice to see whether TS is picking up your typings:

class extends google.maps.OverlayView {
    constructor() {
        super();
    }  
};

Type 'any' is not a constructor function type. class google.maps.OverlayView

1 Answers1