# @ng-maps/core
> **@ng-maps/core** is a simple, modular and tree-shakable library for displaying google-maps inside an angular application
Latest version **8.0.0** (published 2025-04-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install @ng-maps/core
pnpm add @ng-maps/core
yarn add @ng-maps/core
bun add @ng-maps/core
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high maintenance score.
Warnings: low downloads.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 8.0.0 |
| Published | 2025-04-11 |
| First published | 2019-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 327.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 49 |
| Maintainers | dasch |
| Keywords | angular, ng, maps, map, ng2, angular2, agm |
## Links
- npm: https://www.npmjs.com/package/@ng-maps/core
- Repository: https://github.com/ng-maps/ng-maps
- Homepage: https://ng-maps.github.io/core
- Issues: https://github.com/ng-maps/ng-maps/issues
- npm.io page: https://npm.io/package/@ng-maps/core
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
## Alternatives
- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads
## Recent versions
- 8.0.0 (latest) — 2025-04-11
- 2.0.0-alpha.6 (next) — 2020-05-03
- 7.0.0 — 2024-11-21
- 6.0.1 — 2024-02-08
- 6.0.0 — 2024-02-08
- 5.0.3 — 2023-07-14
- 5.0.2 — 2023-06-17
- 5.0.1 — 2023-06-12
- 5.0.0 — 2023-05-22
- 4.0.3 — 2023-05-18
- 4.0.2 — 2023-05-18
- 4.0.1 — 2022-12-30
- 4.0.0 — 2022-12-30
- 3.0.2 — 2022-10-06
- 3.0.1 — 2022-09-02
- … 26 more at https://npm.io/package/@ng-maps/core/versions
## README
# @ng-maps/core
**@ng-maps/core** is a simple, modular and tree-shakable library for displaying google-maps inside an angular application
## Installation
- Npm: `npm install @ng-maps/core`
- Yarn: `yarn add @ng-maps/core`
Then you will need to install typings for google maps as a dev dependency
- Npm: `npm install -D @types/google.maps`
- Yarn: `yarn add -D @types/google.maps`
Add `NgMapsCoreModule` to your _AppModule_.
Additionally, you will need to add the `@ng-maps/google` module and follow [the instruction there](https://ng-maps.github.io/google/index.html). As alternative there is a here maps module which isn't ready for production yet.
### Lazy loading configuration
If you can not provide configuration at module import level you can load it at a later time.
You just need to inject `MapsAPILoader` into a component or service and call the method `configure(config)` with a valid configuration.
## Usage
### Simple Map
Add the map to your components template
```angular2html
```
Add a height to your components CSS, for example
```CSS
map-view {
height: 300px;
}
```
#### Input options
| Name | Type | Values | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| longitude | Number |
| latitude | Number |
| minZoom | Number |
| maxZoom | Number |
| zoom | Number | Between 0 and MaxZoom, typically 18 |
| fitBounds | [LatLngBoundsLiteral](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBoundsLiteral), [LatLngBounds](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBounds) or Boolean | If set to `true` attaches to `mapFitBounds` directives on `` |
| mapTypeId | `roadmap`, `hybrid`, `satellite`, `terrain` |
| layers | Array or String | `TrafficLayer` or `TransitLayer` or `BicyclingLayer` | Activates layer as described in [TrafficLayer Documentation](https://developers.google.com/maps/documentation/javascript/trafficlayer) |
### Marker
Additionally you can add markers
```angular2html
```
#### Input options
| Name | Type | Values | Description |
| --------- | ------ | ------ | ----------- |
| longitude | Number |
| latitude | Number |
#### Outputs
| Name | Value | Description |
| ----------- | --------- | ----------- |
| markerClick | Component |
## Additional features
Other features are provided in submodules. Find out more on the [project page at github](https://github.com/ng-maps/ng-maps)
---
_Source: https://npm.io/package/@ng-maps/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._