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.

I suggest that you use the cordova plugin for google maps (https://github.com/mapsplugin/cordova-plugin-googlemaps) because it delivers way way better performance (because it is native and it is rendered by vectors and not images like that javascript one). It is very very customizable.. you can add elements on top of the map, etc.. I used it for some time and I am pretty satisfied (both android and iOS). — Denko Mancheski, Dec 04 '16 at 23:30
it was my friend who do the implementation of the google maps api, and he doesn't do in the right way, the implementation was done after all script was loaded on the page, so i cannot have the extends. For the moment it's much simple for us to implement the api with script balise, to test on browser, thanks for your answer — Limmy, Dec 13 '16 at 23:34

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

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.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 11 '17 at 09:34

Stephen Paul

37,253
15
92
74

Implement OverlayView Google Maps ionic2/angular2

1 Answers1