angular8-yandex-maps

angular8-yandex-maps

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

📄 Documentation | 🗺️ Examples | ❓ FAQ

Installation

npm install angular8-yandex-maps

Version compatibility

Angular version	Library version
v20	v20.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]="[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;
}

Standalone

component.ts

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

@Component({
  standalone: true,
  imports: [AngularYandexMapsModule],
})
export class AppComponent {}

app.config.ts

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

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

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

SCAM

app.module.ts

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

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

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