Angular-google-maps: Cannot read property 'then' of undefined agm-circle

[MerlinMoos]

Hello,

i've got an error since i've installed new version...

Issue description

Steps to reproduce and a minimal demo of the problem
Install Angular 9 and AGM 3.0.0-beta.0

Current behavior

Expected/desired behavior
No error

angular-google-maps, Angular, & any other relevant dependency versions

Angular 9
AGM 3.0.0-beta.0
Other information

[ghost]

This was fixed, but not deployed.

[MerlinMoos]

Thank you.

[anshusingh1234]

when will it be deployed? any idea? I am also facing same issue.

[ilprima]

This was fixed, but not deployed.

I have the same problem. When it will be deployed? And when AGM 3.0.0 will be no more in beta?

[codebeginer]

I also faced the issue. What I guess is they are registering the events before the circle is created.
Before we get updated version you can make the following changes to make it work

Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js
You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

[Foreverdie]

Personnally, i put the @codebeginer 's modifications in node/modules/@agm/core/__ivy_ngcc__/fesm2015/agm-core.js .

@SebastianM or anyone else to add it ?

[ikashifullah]

@SebastianM any update on this?

[IgorGeorgioski]

@SebastianM we really need this, please add it when possible.

[Alexise857]

I'm facing the same issue ... was this pushed?

[Abdelrahmansherwida]

I also faced the issue. What I guess is they are registering the events before the circle is created.
Before we get updated version you can make the following changes to make it work

Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js
You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

i follow all your tips but no event work and still has same problem

[codebeginer]

I also faced the issue. What I guess is they are registering the events before the circle is created.
Before we get updated version you can make the following changes to make it work
Go to the file at /node_modules/@agm/core/fesm2015/agm-core.js
You will get the bellow function

addCircle(circle) {
    this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

Change it to the following

addCircle(circle) {
    return this._apiWrapper.getNativeMap().then(() => {
        this._circles.set(circle, this._apiWrapper.createCircle({
            center: { lat: circle.latitude, lng: circle.longitude },
            clickable: circle.clickable,
            draggable: circle.draggable,
            editable: circle.editable,
            fillColor: circle.fillColor,
            fillOpacity: circle.fillOpacity,
            radius: circle.radius,
            strokeColor: circle.strokeColor,
            strokeOpacity: circle.strokeOpacity,
            strokePosition: google.maps.StrokePosition[circle.strokePosition],
            strokeWeight: circle.strokeWeight,
            visible: circle.visible,
            zIndex: circle.zIndex,
        }))
    });
}

At line 1450 you will find this code

ngOnInit() {
   this._manager.addCircle(this);
   this._circleAddedToManager = true;
   this._registerEventListeners();
}

Change it to the below code

ngOnInit() {
    var rip = this._manager.addCircle(this);
    rip.then(() => {
        this._circleAddedToManager = true;
        this._registerEventListeners();
    })
}

Now this issue will be gone and all the events will work, I checked the radius change as I need this event to work.

i follow all your tips but no event work and still has same problem

Might the package get updated, still you can try. If you applied the code at correct place then after restart the app then check

[bogomips]

Same issue, using angular 11.

[lukasbuehler]

This is still an issue using the "supported" version of Angular, Angular 10. Also, the silence in the repo bugs me.
Is this project still maintained at all?

i follow all your tips but no event work and still has same problem

The node_modules hack did not work for me until I also applied the suggested changes to node_modules/@agm/core/__ivy_ngcc__/fesm2015/agm-core.js.

Just search the @agm/core node module for the addCircle method and you will find all the functions and files that need tweaking.

[Syamhere]

Did anyone find any solution? I'm using Angular 10 with Agm ^1.1.0 version.

[Alexise857]

Everyone says to update the file at /node_modules/@agm/core/fesm2015/agm-core.js
However, I'm not sure how to do that , every time I update, an error shows up saying that "File is read-only"
Can anyone help me to understant how to update the agm-core.js file pls ?

[codebeginer]

agm-core.zip

File path to update : node_modules/@agm/core/__ivy_ngcc__/fesm2015/agm-core.js

Demo: http://13.126.237.87/map

[ArmandoPerdomo]

A temporary solution is a downgrade to "@agm/core": "1.1.0"

This worked for me

The actual version is 3.0.0 beta and its a Pre Release, so this means that is not a stable version

I took the example package.json from this plunker
https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html

Check the releases
https://github.com/SebastianM/angular-google-maps/releases

[malcheg]

Any progress on the issue?