Angular-google-maps: Cluster not working

[sjumble]

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'agm-marker-cluster' is not a known element:

1. If 'agm-marker-cluster' is an Angular component, then verify that it is part of this module.
2. If 'agm-marker-cluster' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("le-map>-->
   
   [ERROR ->]
   "): ng:///MapModule/MapComponent.html@17:8
   Error: Template parse errors:
   'agm-marker-cluster' is not a known element:

[sjumble]

Have created sample example in plunker.
http://plnkr.co/edit/dqy8uWjRnMzDT6t0uJOK?p=preview

[cdarken]

I also had this problem in my ng-cli app (I specify this because it might be different than what systemjs requires).
I fixed it like this:

In my app.module.ts

1. import { AgmJsMarkerClustererModule, ClusterManager } from "@agm/js-marker-clusterer";
2. added ClusterManager to providers array in @NgModule decorator
3. added AgmJsMarkerClustererModule in imports array

[kuncevic]

Just done what @cdarken has suggested also yarn add @agm/js-marker-clusterer
But now getting an error:

ERROR in ./node_modules/@agm/js-marker-clusterer/services/managers/cluster-manager.js
Module not found: Error: Can't resolve 'js-marker-clusterer' in 'c:\temp\some-app\node_modules\@agm\js-marker-clusterer\services\managers'
resolve 'js-marker-clusterer' in 'c:\temp\some-app\node_modules\@agm\js-marker-clusterer\services\managers'
Parsed request is a module using description file: c:\temp\some-app\node_modules\@agm\js-marker-clusterer\package.json (relative path: ./services/managers)
Field 'browser' doesn't contain a valid alias configuration after using description file: c:\temp\some-app\node_modules\@agm\js-marker-clusterer\package.json (relative path: ./services/managers) resolve as module

Just trying to play with this example https://github.com/SebastianM/angular-google-maps/pull/1044#issuecomment-326474498

[sadeajayi]

implemented what @cdarken suggested as well and im getting

"EXCEPTION: Uncaught (in promise): Error: Error in ./MapPageComponent class MapPageComponent - inline template:29:12 caused by: No provider for GoogleMapsAPIWrapper!
Error: Error in ./MapPageComponent class MapPageComponent - inline template:29:12 caused by: No provider for GoogleMapsAPIWrapper!
at ViewWrappedError"

even after including the wrapper in my main ngModule

[sadeajayi]

What i'm basically trying to do is add markers on clicking the map, and clustering them in real time, i don't even know if logically speaking, this feature is possible?

[SebastianM]

@cdarken your second step should be not needed because of this line: https://github.com/SebastianM/angular-google-maps/blob/master/packages/js-marker-clusterer/directives/marker-cluster.ts#L37

[SebastianM]

@kuncevic you have to run npm install --save js-marker-clusterer also.

[SebastianM]

@sadeajayi I think you forgot to call AgmCoreModule.forRoot() in your app module.

[SebastianM]

➡️ Im closing this because I don't see any bug. Feel free to reopen if you still think there's a bug or comment below.

[sjumble]

But cluster Breaks Info window functionality. Without Info Window cannot use cluster.
https://github.com/SebastianM/angular-google-maps/issues/1126

[SebastianM]

@sjumble we will track this in #1126 (because it's more specific)

[jigfox]

@kuncevic I don't understand how this relates to AGM-(Cluster)

[silpa-kanthan]

Is to possible to change the cluster image dynamically in AGM(cluster) by clicking the button?

[silpa-kanthan]

able to change the cluster imagePath dynamically in AGM. But the image not changing. Please help me

[cbodapati]

Is there a working example?
I wasn't able to get it working after following most of the work-arounds found. I get this error even after adding GoogleMapsAPIWrapper in the module providers..
Am I missing something?

ERROR Error: StaticInjectorError(AppMModule)[ClusterManager -> GoogleMapsAPIWrapper]:
StaticInjectorError(Platform: core)[ClusterManager -> GoogleMapsAPIWrapper]:
NullInjectorError: No provider for GoogleMapsAPIWrapper!
at NullInjector.get (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12276)
at resolveToken (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12529)
at tryResolveToken (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12479)
at StaticInjector.get (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12374)
at resolveToken (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12529)
at tryResolveToken (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12479)
at StaticInjector.get (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:12374)
at resolveNgModuleDep (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:20514)
at NgModuleRef_.get (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:21208)
at resolveDep (modules.js?hash=35566fa89c40f9086f6be723d68257c8dabf747a:21573)

thanks

This is a Meteor App

When I tried in pure Angular, it worked perfectly as expected!!