Angular8-yandex-maps

Yandex.Maps Angular components that implement the Yandex.Maps JavaScript API

📄 Documentation | 🗺️ Examples | ❓ FAQ

Installation

npm install angular8-yandex-maps

Version compatibility

Angular version	Library version
v16, v17, v18	v18.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]="[55.751952, 37.600739]" [zoom]="12">
    <ya-placemark [geometry]="[55.751952, 37.600739]"></ya-placemark>
  </ya-map>
</div>

component.css

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

SCAM

app.module.ts

Default map config options

import { AngularYandexMapsModule } from 'angular8-yandex-maps';

@NgModule({
  imports: [AngularYandexMapsModule],
})
export class AppModule {}

Own map config options

import { AngularYandexMapsModule, YaConfig } from 'angular8-yandex-maps';

const mapConfig: YaConfig = {
  apikey: 'API_KEY',
  lang: 'en_US',
};

@NgModule({
  imports: [AngularYandexMapsModule.forRoot(mapConfig)],
})
export class AppModule {}

Standalone

Default map config options

import { AngularYandexMapsModule } from 'angular8-yandex-maps';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [AngularYandexMapsModule],
})
export class Component {}

Own map config options

app.config.ts

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

const mapConfig: YaConfig = {
  apikey: 'API_KEY',
  lang: 'en_US',
};

export const appConfig: ApplicationConfig = {
  providers: [importProvidersFrom(AngularYandexMapsModule.forRoot(mapConfig))],
};