ng-maps / ng-maps Goto Github PK
View Code? Open in Web Editor NEWModular map components for angular
License: MIT License
Modular map components for angular
License: MIT License
The Google maps types have moved to @types/google.maps, @types/googlemaps being deprecated.
The package included by @ng-maps/marker-clusterer includes @types/markerclustererplus (as seen in
This makes it so whenever both packages are installed, and you try to compile, @types/googlemaps and @types/google.maps conflict with each other.
The solution would be to update the typings in the @ng-maps/marker-clusterer library from @google/markerclusterer to @googlemaps/markerclusterer
The marker manager inside core only supports using a iconUrl. However, google maps native api also supports using a custom icon. The interface for the custom icon already exists in this library as MarkerIcon inside core. The map component also has an input for icon not just iconUrl. When an icon is provided as input it should be used rather than the iconUrl for google maps implementation of marker manager when creating a marker.
12.0.4
to 12.0.5
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Seems @ng-maps/[email protected]
doesn't support Angular ^14.2.x
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ng-maps/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"^14.2.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/core
npm ERR! @ng-maps/core@"^3.0.2" from the root project
npm ERR! peer @ng-maps/core@"^3.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/google
npm ERR! @ng-maps/google@"^3.0.1" from the root project
npm ERR! 1 more (@ng-maps/places)
npm ERR! 1 more (@ng-maps/places)
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/core
npm ERR! @ng-maps/core@"^3.0.2" from the root project
npm ERR! peer @ng-maps/core@"^3.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/google
npm ERR! @ng-maps/google@"^3.0.1" from the root project
npm ERR! 1 more (@ng-maps/places)
npm ERR! 1 more (@ng-maps/places)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I've this issue using the autocomplete
main.js:1 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[Z_ -> Z_ -> Z_]: NullInjectorError: No provider for Z_! NullInjectorError: R3InjectorError(n)[Z_ -> Z_ -> Z_]: NullInjectorError: No provider for Z_!
I saw on the web it could be due to Angular 14. Do you face the same with NG14?
I declared it as described in the providers in app.module
{ provide: GOOGLE_MAPS_API_CONFIG, useValue: { apiKey: environment.AGMAPS_API, libraries: ['places'] } }
and I can see the map but when I add the input autocomplete, it crashes.
Issue description
This may be part of a bigger problem but when my data layer changes depending on the Firestore stream, the fill color became light black and the strokes become black and become thicker which I assume are all the default styles.
Steps to reproduce and a minimal demo of the problem
I've reproduced it based on setInterval instead of a live stream of data:
https://stackblitz.com/edit/angular-google-maps-demo-ubxsif?file=app/app.component.ts
The invertColor works fine in the constructor outside of the setInterval but after the map has loaded, it no longer works.
Current behavior
It changes the styles to the default settings.
Expected/desired behavior
It should change the style to the new GeoJson.
angular-google-maps, Angular, & any other relevant dependency versions
Mentioned in the package.json
Note - This was originally posted here:
sebholstein/angular-google-maps#1930
Reposting here as this seems to be a more active fork.
Is planned to provide Angular 17+ compatibility?
Any chance of making this usable for those of us with an Angular 7 project that can't be updated in the short term?
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@angular/animations
, @angular/common
, @angular/compiler
, @angular/compiler-cli
, @angular/core
, @angular/forms
, @angular/language-service
, @angular/platform-browser
, @angular/platform-browser-dynamic
, @angular/router
, zone.js
)@angular/common
, @angular/core
)@commitlint/cli
, @commitlint/config-conventional
, @commitlint/config-nx-scopes
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)@nx/angular
, @nx/eslint
, @nx/eslint-plugin
, @nx/workspace
, nrwl/nx-set-shas
, nx
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@commitlint/cli
, @commitlint/config-conventional
, @commitlint/config-nx-scopes
)@angular-devkit/build-angular
, @angular-devkit/core
, @angular-devkit/schematics
, @angular/cli
, @schematics/angular
)@angular-eslint/eslint-plugin
, @angular-eslint/eslint-plugin-template
, @angular-eslint/template-parser
)node
, @types/node
).github/workflows/build.yml
actions/checkout v3
actions/cache v3
actions/cache v3
andstor/file-existence-action v2
actions/upload-artifact v3
.github/workflows/prepare.yml
actions/checkout v3
actions/cache v3
actions/cache v3
.github/workflows/qa.yml
actions/checkout v3
actions/cache v3
actions/cache v3
actions/checkout v3
actions/cache v3
actions/cache v3
andstor/file-existence-action v2
paambaati/codeclimate-action v4.0.0
codecov/codecov-action v3
actions/upload-artifact v3
actions/checkout v3
actions/cache v3
actions/cache v3
actions/cache v3
.github/workflows/release.yml
actions/checkout v3
actions/cache v3
.github/workflows/tags.yml
actions/checkout v3
nrwl/nx-set-shas v3
.github/workflows/version-auto.yml
actions/checkout v3
actions/setup-node v3
actions/cache v3
.github/workflows/version.yml
actions/checkout v3
actions/cache v3
libs/core/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@angular/platform-browser-dynamic ^17.0.0
rxjs ^6.5.3 || ^7.4.0
zone.js ~0.12.0 || ~0.13.0 || ~0.14.0
libs/data-layer/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^6.0.0
@ng-maps/google ^6.0.0
libs/direction/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^6.0.0
@ng-maps/google ^6.0.0
libs/drawing-layer/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^6.0.0
libs/google/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@types/google.maps ~3.51.0 || ~3.52.0 || ~3.53.0
@ng-maps/core ^6.0.0
libs/here/package.json
tslib ^2.0.0
@angular/common ^8.0.0 || ^9.0.0 || ^10.0.0 || ^16.0.0
@angular/core ^8.0.0 || ^9.0.0 || ^10.0.0 || ^16.0.0
@ng-maps/core ^2.0.0-alpha.7 || ^4.0.0 || ^5.0.0
@types/heremaps ^3.1.1
libs/kml-layer/package.json
tslib ^2.0.0
@angular/common ^8.0.0 || ^16.0.0
@angular/core ^8.0.0 || ^16.0.0
@ng-maps/core ^1.0.0 || ^4.0.0 || ^5.0.0
libs/marker-clusterer/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^6.0.0
@ng-maps/google ^6.0.0
@googlemaps/markerclusterer ^2.0.0
libs/places/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^6.0.0
@ng-maps/google ^6.0.0
libs/snazzy-info-window/package.json
tslib ^2.0.0
@angular/common ^17.0.0
@angular/core ^17.0.0
@ng-maps/core ^4.0.0 || ^5.0.0
snazzy-info-window ^1.1.0
package.json
@angular/animations 17.1.2
@angular/common 17.1.2
@angular/compiler 17.1.2
@angular/core 17.1.2
@angular/forms 17.1.2
@angular/platform-browser 17.1.2
@angular/platform-browser-dynamic 17.1.2
@angular/router 17.1.2
@googlemaps/markerclusterer ^2.0.0
@nx/angular 17.3.2
lodash-es ^4.17.21
rxjs ^7.6.0
snazzy-info-window ^1.1.1
tslib ^2.3.1
zone.js 0.14.3
@angular-devkit/build-angular 17.1.2
@angular-devkit/core 17.1.2
@angular-devkit/schematics 17.1.2
@angular-eslint/eslint-plugin 17.0.1
@angular-eslint/eslint-plugin-template 17.0.1
@angular-eslint/template-parser 17.0.1
@angular/cli ~17.1.0
@angular/compiler-cli 17.1.2
@angular/language-service 17.1.2
@commitlint/cli 18.6.0
@commitlint/config-conventional 18.6.0
@commitlint/config-nx-scopes 18.5.1
@compodoc/compodoc ^1.1.11
@jscutlery/semver 4.2.0
@ngneat/spectator ^15.0.0
@nx/eslint 17.3.2
@nx/eslint-plugin 17.3.2
@nx/workspace 17.3.2
@schematics/angular 17.1.2
@types/google.maps ~3.53.0
@types/jasmine ^4.3.1
@types/jasminewd2 ^2.0.10
@types/lodash-es ^4.17.7
@types/node 20.11.16
@types/snazzy-info-window ^1.1.7
@typescript-eslint/eslint-plugin 6.21.0
@typescript-eslint/parser 6.21.0
autoprefixer ^10.4.0
eslint 8.48.0
eslint-config-prettier 9.1.0
eslint-import-resolver-typescript ^3.0.0
eslint-plugin-import ^2.26.0
eslint-plugin-jsdoc ^39.3.6
eslint-plugin-prefer-arrow ^1.2.3
eslint-plugin-prettier ^4.2.1
eslint-plugin-react ^7.30.1
husky ^8.0.2
jasmine-core ~3.99.0
jasmine-spec-reporter ^7.0.0
karma ~6.4.0
karma-chrome-launcher ^3.1.1
karma-coverage ^2.2.0
karma-coverage-istanbul-reporter ~3.0.2
karma-jasmine ~5.1.0
karma-jasmine-html-reporter ^1.5.4
lint-staged ^9.2.1
ng-lint-staged ^12.0.0
ng-mocks 14.12.1
ng-packagr 17.1.2
ngx-deploy-npm 8.0.1
nx 17.3.2
postcss ^8.4.20
postcss-import ~15.1.0
postcss-preset-env ~8.4.0
postcss-url ~10.1.3
prettier ^2.8.1
pretty-quick ^3.1.3
ts-node 10.9.1
typescript 5.3.3
.nvmrc
node 20.11
Hi,
I use angular 16 and I'm integrating NgMapsDrawingLayerModule in order to integrate drawing tool in my google map view.
I have imported the Module, but I receive the error:
[ErrorHandler] NullInjectorError: R3InjectorError(MapModule)[DrawingManager -> DrawingManager -> DrawingManager]: NullInjectorError: No provider for DrawingManager!
I added the component map-drawing-layer
as child of map-view
. I checked also that google maps drawing library is loaded correctly.
Thanks!
The core and google libs list support for angular 15, however the drawing layer is still pointing to angular 8, which causes an NPM dependency error on install
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ng-maps/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^15.0.4" from the root project
npm ERR! peer @angular/common@"^15.0.0 || ^16.0.0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"^15.0.4" from the root project
npm ERR! peer @angular/cdk@"15.0.4" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"^15.0.4" from the root project
npm ERR! 1 more (@angular/material-moment-adapter)
npm ERR! 1 more (ng2-charts)
npm ERR! 12 more (@angular/forms, @angular/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/drawing-layer
npm ERR! @ng-maps/drawing-layer@"^0.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"^8.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/drawing-layer
npm ERR! @ng-maps/drawing-layer@"^0.0.1" from the root project
Edit: Actually looks like the drawing layer isn't updated at all to support google's drawing manager? It references a part of core that doesn't exist anymore (GoogleMapsApiWrapper). Is there support for drawing manager in core, meaning the drawing layer isn't needed? This is currently a blocker preventing me from migrating from @agm-core to this, since it doesn't look like that is going to be updated to support the newer google SDK and angular 15 any time soon.
I created a new Angular project from the command line ng new projectName
I then tried to install @ng-maps npm i @ng-maps-core
I receive peer dependency errors:
Conflicting peer dependency: @angular/[email protected] npm ERR! node_modules/@angular/platform-browser-dynamic npm ERR! peer @angular/platform-browser-dynamic@"14.2.0" from @ng-maps/[email protected] npm ERR! node_modules/@ng-maps/core npm ERR! @ng-maps/core@"*" from the root project
I have tried downgrading the Angular version and the @ng-maps but have not found the combination that will allow an install without forcing it or using the legacy-peer-deps flag.
I have also tried removing the node_modules and package-lock file and reinstalling without success.
When I inject MapsAPILoader into a component to provide an API key it seems as though two of the following script tags are being written out to the page.
<script type="text/javascript" async defer id="GoogleMapsApiScript" src="https://maps.googleapis.com/maps/api/js?v=quarterly&callback=LazyMapsAPILoader&key=API_KEY_REDACTED"></script>
Which is causing the following error and preventing my map from displaying
You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
in my app.module.ts I have
imports: [ NgMapsCoreModule.forRoot() ]
and in my component constructor I have
constructor( private mapsLoader: MapsAPILoader ) { }
and then in ngOnInit() I call
this.mapsLoader.configure({ apiKey: API_KEY_REDACTED });
Hello
I am having issues when exporting the production build for my application which is built in Ionic (Angular), when building a debug version its exporting fine no issues, the moment I attach a --prod tag, its not exporting and highlighting [styles] as an error.
Here is my dev environment and app version
Ionic:
Ionic CLI : 6.20.1 (C:\Users\xxx\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.1.13
@angular-devkit/build-angular : 14.0.5
@angular-devkit/schematics : 14.0.5
@angular/cli : 14.0.5
@ionic/angular-toolkit : 6.1.0
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.15.4
native-run (update available: 1.6.0) : 1.5.0
System:
Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\Sdk)
NodeJS : v16.15.0 (C:\Program Files\nodejs\node.exe)
npm : 8.13.2
OS : Windows 10
See screenshot on how we want the map to look and how it looks during dev.
This is the error I get when I try to export an apk for release ...
Error: src/app/pages/home/home.page.html:15:113 - error TS2322: Type '({ elementType: string; stylers: { color: string; }[];
featureType?: undefined; } | { elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } |
{ featureType: string; elementType: string; stylers: { ...; }[]; })[]' is not assignable to type 'MapTypeStyle[]'.
Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; } |
{ elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } | { featureType: string; elementType: string;
stylers: { ...; }[]; }' is not assignable to type 'MapTypeStyle'.
Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; }' is not assignable to type 'MapTypeStyle'.
Types of property 'elementType' are incompatible.
Type 'string' is not assignable to type 'MapTypeStyleElementType'.
15 [streetViewControl]="false" [disableDefaultUI]="true" [mapTypeControl]="false" [zoomControl]="false" [styles]="mapStyling">
~~~~~~
src/app/pages/home/home.page.ts:57:16
57 templateUrl: "./home.page.html",
~~~~~~~~~~~~~~~~~~
Error occurs in the template of component HomePage.
This is the map styles file that I am using
export const mapStyles = ([
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]);
Thanks
Hi.
Is it possible to use a custom icon for a marker in Google Maps Marker Cluster when it is displayed as a single item?
Without clustering, I'm able to use a custom icon for each <map-marker>
component.
But when I put <map-marker>
s inside of a <map-marker-cluster>
component, the custom icon no longer works. E.g. I'm able to set the custom icon for the clusters using a custom Renderer, but not each marker individually. It displays the default marker icon instead (pic 2).
here's the code excerpt:
@Component()
export class DemoLocations {
public mockLocations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
public clusterRenderer: Renderer = {
render: ({ count, position }) => {
return new google.maps.Marker({
position,
icon: {
url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48Zz48cGF0aCBkPSJNMjU2LDQ4QzE0MS4xLDQ4LDQ4LDE0MS4xLDQ4LDI1NnM5My4xLDIwOCwyMDgsMjA4YzExNC45LDAsMjA4LTkzLjEsMjA4LTIwOFMzNzAuOSw0OCwyNTYsNDh6IE0yNTYsNDQ2LjcgICAgYy0xMDUuMSwwLTE5MC43LTg1LjUtMTkwLjctMTkwLjdjMC0xMDUuMSw4NS41LTE5MC43LDE5MC43LTE5MC43YzEwNS4xLDAsMTkwLjcsODUuNSwxOTAuNywxOTAuNyAgICBDNDQ2LjcsMzYxLjEsMzYxLjEsNDQ2LjcsMjU2LDQ0Ni43eiIvPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTI1Niw5NmMtODguNCwwLTE2MCw3MS42LTE2MCwxNjBjMCw4OC40LDcxLjYsMTYwLDE2MCwxNjBjODguNCwwLDE2MC03MS42LDE2MC0xNjBDNDE2LDE2Ny42LDM0NC40LDk2LDI1Niw5NnoiLz48L2c+PC9nPjwvc3ZnPg==',
scaledSize: new google.maps.Size(50, 50),
},
label: {
text: String(count),
color: "rgba(255,255,255,1)",
fontSize: "18px",
fontWeight: 'bold',
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
}
<map-view>
<map-marker-cluster [renderer]="clusterRenderer">
<map-marker
*ngFor="let m of mockLocations"
[latitude]="m.lat"
[longitude]="m.lng"
[iconUrl]="{
url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtODYuMDAwMDAwKSI+PGcgaWQ9ImNoZWNrLWNpcmNsZS1vdXRsaW5lLWJsYW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzAuMDAwMDAwLCA4Ni4wMDAwMDApIj48cGF0aCBkPSJNMTAsMCBDNC41LDAgMCw0LjUgMCwxMCBDMCwxNS41IDQuNSwyMCAxMCwyMCBDMTUuNSwyMCAyMCwxNS41IDIwLDEwIEMyMCw0LjUgMTUuNSwwIDEwLDAgTDEwLDAgWiBNMTAsMTggQzUuNiwxOCAyLDE0LjQgMiwxMCBDMiw1LjYgNS42LDIgMTAsMiBDMTQuNCwyIDE4LDUuNiAxOCwxMCBDMTgsMTQuNCAxNC40LDE4IDEwLDE4IEwxMCwxOCBaIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4='
}"
>
</map-marker>
</map-marker-cluster>
</map-view>
I don't know if I looked into the right place, but could it be because the icon
property is commented here? https://github.com/ng-maps/ng-maps/blob/main/libs/marker-clusterer/src/lib/services/managers/cluster-manager.ts#L66
The invite link in the readme no longer works.
Hi,
Thanks for maintainig this library.
We have noticed that this event is missing in the Polyline.
It used to be in the agm-map. https://angular-maps.com/api-docs/agm-core/directives/agmpolyline#source
this._polylineManager.createPathEventObservable(this).then((ob$) => {
const os = ob$.subscribe(pathEvent => this.polyPathChange.emit(pathEvent));
this._subscriptions.push(os);
});
Any possibility of adding this? or a workaround?
The use-case is when the line is editable, user drags the points and we need to get an event to get the new path.
Thanks
3.4.0
to 3.4.1
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
@types/jasmine is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
5.3.0
to 5.4.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
To reduce the amount of API calls for autocomplete inputs, it's common to have both a length limit (ie not request for 2/3 characters or less) and a debounce.
It would be good to see these added as configurable values in an optional directive with input like [mapAutocompleteConfig]
or similar.
If there's a way to do this without library changes please let me know. Otherwise, I am happy to try work on the issue, please just advise if you're open to contributions.
When showing the snazzy info window, I get error "Error: Uncaught (in promise): TypeError: this.setMap is not a function". Doing some research led to this github issue in the underlying library: atmist/snazzy-info-window#29. It seems that the snazzy-info-window library is being loaded before the google maps js library, and so this derived class ends up with a blank parent prototype effectively.
The comments in the linked issue seem to suggest forcing the snazzy library to open later, and that seems like the obvious solution, but I have no idea how to do command angular to do that. It seems like webpack is loading the library before any angular code runs at all, so I have no way to configure behavior it seems like.
This part of the JS ecosystem I am barely familiar with, so I don't really know where to begin to fix this, so I'm hoping someone might have an idea of what to do here. As a disclaimer, I upgraded from angular 15 to angular 16 and switch from @agm to ng-maps at the same time since it seems agm no longer compiles in 16. It certainly is possible the 15 to 16 change could also be causing issues, but I was hoping someone more experienced in the area could comment on the issue before try the conversion at 15.
Hi, I'm trying to update my ng-maps libraries dependencies (to update my app to ng16).
The command npm i @ng-maps/core@latest @ng-maps/google@latest @ng-maps/places@latest
doesn't work because places
and google
still reference core@4
and not core@5
.
I can update by running npm i @ng-maps/[email protected] @ng-maps/[email protected] @ng-maps/[email protected]
but then I'm getting issues with zone.js
when updating to Angular 16 (which requires [email protected]
, whose support is handled in core@5
)
Hello
Issue Description
I am using ng-maps v 3 and Ionic (Angular) , I am working on maps and when I drag a marker, the event is not displaying the data for drag event coords , the latLng values are empty.
My dev env info
Angular CLI: 14.0.5
Node: 16.15.0
Package Manager: npm 8.13.2
OS: win32 x64
Angular: 14.0.5
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1400.5
@angular-devkit/build-angular 14.0.5
@angular-devkit/core 14.0.5
@angular-devkit/schematics 14.0.5
@schematics/angular 14.0.5
rxjs 6.6.7
typescript 4.7.4
ng-maps version
"@ng-maps/core": "^3.0.0",
"@ng-maps/google": "^3.0.0",
"@ng-maps/marker-clusterer": "^3.0.0",
"@ng-maps/places": "^3.0.0",
Here is the html + ts code
<map-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true" [animation]="'DROP'"
[markerClickable]="true" (dragEnd)="markerDragEnd($event)" [iconUrl]="iconUrl">
</map-marker>
async markerDragEnd($event: any) {
console.log('Marker dragged event : ' ,$event);
}
Here is an error message
Marker dragged event :
_.Ee {lat: Ζ, lng: Ζ}
lat: Ζ ()
arguments: null
caller: null
length: 0
name: ""
lng: Ζ ()
arguments: null
caller: null
length: 0
name: ""
I have run some test in older projects with angular 15.x.
The newest @ng-maps/[email protected] and @ng-maps/[email protected] package do not work here. In angular project 16.x all packages works fine.
The error look like a typescript error after building with ng-packagr. 16.0.0 the typescript 4.8 used in angular 15.x is deprecated.
I guess we must use 15.2.2 for compiling angular 15.x versions.
Maybe we should use the major version for the angular version in our packages and the minor for adding new features.
So our versions always equals the angular versions for better understanding.
small typo
Modulare -> Modular
I have migrated from agm-maps to your project. Thanks for updating the code.
Unfortunately, my Google Maps Autocomplete seems to have stopped working.
core.mjs:7644 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'Autocomplete')
TypeError: Cannot read properties of undefined (reading 'Autocomplete')
I import 'NgMapsPlacesModule' in app.module.ts
@NgModule({ imports: [ NgMapsCoreModule, NgMapsGoogleModule, NgMapsPlacesModule, NgMapsMarkerClustererModule, BrowserModule,
and in a shared module
@NgModule({ imports: [ NgMapsCoreModule, NgMapsGoogleModule, NgMapsMarkerClustererModule, NgMapsPlacesModule,
My TS component code (simplified), code is being called from ngViewAfterInit:
// load Places Autocomplete this.mapsAPILoader.load().then(() => { this.geocoder = new google.maps.Geocoder(); const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement); autocomplete.addListener('place_changed', () => { this.ngZone.run(() => { // get the place result const place: google.maps.places.PlaceResult = autocomplete.getPlace();
TS component constructor:
constructor(
public dialogRef: MatDialogRef<DialogAddressLookupGoogleComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, public definedInfo: DefinedInfo,
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private filterService: FilterService,
private addressService: AddressService,
public translate: TranslateService,
public _snackbar: MatSnackBar,
public permissionService: PermissionService) {
}
and imported from
import {MapsAPILoader} from '@ng-maps/core';
Why is not working? It seems that new google.maps.places does not exist, indicating that NgMapsPlacesModule hasn't successfully been loaded in.
3.36.2
to 3.36.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
@types/googlemaps is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
The docs suggest importing the core module with a forRoot()
call to pass the apiKey. But the sample application passes the key through a provider (and indeed forRoot is not applicable to the exported core module). Additionally it's not clear that to use google maps the google module must also be imported.
I added a FAB button outside of the component, which on click calls this method:
@ViewChild('map') map: NgMapsViewComponent<any>;
.
.
.
recenterMap() {
this.map.latitude = this.userLocation.latitude;
this.map.longitude = this.userLocation.longitude;
}
The method updates the map object, which I've checked via console logs, but it doesn't update the view. I've been fighting with it for 2 days and I'm not sure how to do this anymore. Any help would be greatly appreciated. I'm using Angular 16, Ionic 7 (the map is inside ion-modal, in case it's relevant)
I am trying to access NgMapsViewComponent via ViewChild in my app and the instance always comes as undefined.
`@ViewChild(NgMapsViewComponent) public ngMap: NgMapsViewComponent;
this.ngMap.triggerResize();
`
Uncaught TypeError: Cannot read properties of undefined (reading 'triggerResize')
8.0.1
to 8.0.2
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
@angular/cli (8.0.2) | ||
Commit | Description | Notes |
use recommended TTY check logic |
[Closes #14640] |
|
avoid updating when package is already up to date |
[Closes #14647] |
|
resolve update migrations from referenced package root | ||
add analytics option to options schema | ||
@schematics/angular (8.0.2) | ||
Commit | Description | Notes |
default Ivy apps to AOT true | ||
move browserslist even when no sourceRoot is available |
[Closes #14660] |
|
add '@angular-devkit/build-webpack' package to the version 8 migration | ||
update `ng-packagr` and `tsickle` when migrating to version 8 | ||
@angular-devkit/build-angular (0.800.2) | ||
Commit | Description | Notes |
re-order ES5 polyfills in karma HTMLs |
[Closes #14618] |
|
server build is generating un-needed polyfill file |
[Closes #14655] |
|
@angular-devkit/build-optimizer (0.800.2) | ||
Commit | Description | Notes |
wrap ClassDeclarations in an IIFE for better treeshaking |
[Closes #14610] |
|
wrap es2015 class expressions for better tree-shaking |
[Closes #14610] [Closes #14577] |
|
@ngtools/webpack (8.0.2) | ||
Commit | Description | Notes |
always strip BOM when reading files | ||
rebuilding project with errors reports cannot find .ts files in JIT |
[Closes #14644] |
Alan Agius, Alan, Charles Lyding, Amadou Sall, Judy Bogart, Alex Eagle, Matt Lewis, Filipe Silva
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
5.2.0
to 5.3.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Hi, I'm trying to use your package but after configuring the component module and adding the api key etc it just don't get displayed on the screen, the server opens but it just isn't shown, for further information I'm attaching my code just in case you need it.
The component that its using the code is Location:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GOOGLE_MAPS_API_CONFIG } from '@ng-maps/google';
@NgModule({
declarations: [],
imports: [
CommonModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
providers: [
{
provide: GOOGLE_MAPS_API_CONFIG,
useValue: {
apiKey: '[ HERE GOES MY API KEY]'
}
}
]
})
export class LocationModule { }
<div class="container d-flex">
<map-view [latitude]="48.858222" [longitude]="2.2945" [zoom]="8"></map-view>
</div>
Thanks in advice.
Hello,
When adding lib to angular 15, npm fails with :
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^15.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.0.0" from @ng-maps/[email protected]
npm ERR! node_modules/@ng-maps/core
npm ERR! @ng-maps/core@"3.0.2" from the root project
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.