Implement OverlayView Google Maps ionic2/angular2

Question

I try to implement a custom OverlayView (https://developers.google.com/maps/documentation/javascript/examples/overlay-simple) in my app, i make my class OverlayView:

import { Component } from '@angular/core';

export class OverlayView extends google.maps.OverlayView{

    latlng;
    args;
    div_;

    constructor(latlng, args, map){
        super();
        // Initialize all properties.
        this.latlng = latlng;
        this.args = args;
        super.setMap(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;
    }

    onAdd(){

        var div = this.div_;
        var self = this;
        if (!div) {

            div = this.div_ = document.createElement('div');

            div.className = 'marker';

            div.style.position = 'absolute';
            div.style.cursor = 'pointer';
            div.style.width = '50px';
            div.style.height = '50px';
            div.style.background = 'blue';
            div.innerHTML = 'yolo<div style="background-color:red;width:10px;height:10px">tommy</div>';

            if (typeof(self.args.marker_id) !== 'undefined') {
                div.dataset.marker_id = self.args.marker_id;
            }

            google.maps.event.addDomListener(div, "click", function(event) {
                 alert('You clicked on a custom marker!');
                 google.maps.event.trigger(self, "click");
            });

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

        //this.div_ = div;

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


    draw(){
        console.log("DRAWWWWWWWWWWWWW !!!");

        var div = this.div_;
        var self = this;
        if (!div) {

            div = this.div_ = document.createElement('div');

            var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

            if (point) {
                div.style.left = (point.x - 10) + 'px';
                div.style.top = (point.y - 20) + 'px';
            }

        }
    };

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

    getPosition(){
        return this.latlng;
    };
 };

Then I initialize OverLayView in my Page:

var myLatlng = new google.maps.LatLng(47.383333, 0.683333);
this.overlay = new OverlayView(myLatlng, { marker_id: '123' }, this.map.map);

with the good import:

import { OverlayView } from '../../components/overlay-view/overlay-view.component';

But when i my page loaded, i've got in my console browser: Uncaught ReferenceError: google is not defined(…) for the extends of "export class OverlayView extends google.maps.OverlayView{". I don't know what i can do, i follow this one (Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)) first, i removed

declare const google: any;

because if i let it, ionic send me:

 typescript: J:/www/project/src/components/overlay-view/overlay-view.component.ts, line: 5
        Type 'any' is not a constructor function type.

So i'm pretty confused. Thanks in advance for your help.

Answer 1

A bit late here, but I reproduced this error trying to accomplish the same thing (but for a regular Angular2 app using the CLI). Check this answer I gave to the same post that you referred to.