Installation

npm install angular8-yandex-maps

Version compatibility

| Angular version | Library version | | ---------------------- | --------------- | | v20, v21 | v21.x | | v16, v17, v18, v19 | v19.x | | v15 | v15.x | | v14 | v14.x | | v9, v10, v11, v12, v13 | v13.x | | v8 | v8.x | | v7 | v7.x | | v6 | v6.x |

Documentation for older versions can be found using the branches.

Usage

component.html

<div class="container">
  <ya-map [center]="[51.507351, -0.127696]" [zoom]="10" />
</div>

component.css

.container {
  width: 1000px;
  height: 500px;
}

tsconfig.json

{
  "compilerOptions": {
    "types": ["angular8-yandex-maps"]
  }
}

types ensure you can access ymaps globally without importing it.

Standalone

component.ts

import { Component } from '@angular/core';
import { YaMapComponent } from 'angular8-yandex-maps';

@Component({
  imports: [YaMapComponent],
})
export class AppComponent {}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideYaConfig, YaConfig } from 'angular8-yandex-maps';

const config: YaConfig = {
  apikey: 'API_KEY',
};

export const appConfig: ApplicationConfig = {
  providers: [provideYaConfig(config)],
};

SCAM

app.module.ts

import { NgModule } from '@angular/core';
import { YaConfig, YaMapComponent, provideYaConfig } from 'angular8-yandex-maps';

const config: YaConfig = {
  apikey: 'API_KEY',
};

@NgModule({
  imports: [YaMapComponent],
  providers: [provideYaConfig(config)],
})
export class AppModule {}