9952 explained code solutions for 126 technologies

angularjsHow do I integrate an Angular Yandex Map into my software development project?

Integrating an Angular Yandex Map into a software development project is quite straightforward.

First, you need to install the Yandex Maps Angular package.

npm install --save angular-yandex-maps

Then, you need to add the AngularYandexMapsModule to the imports array of the application module.

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

  imports: [
export class AppModule { }

Next, you need to add the <ya-map> element to the template of the component where you want to show the map.

<ya-map [center]="[55.75, 37.57]">
  <ya-marker [geometry]="[55.75, 37.57]"></ya-marker>

Finally, you need to provide the ymaps object to the yaMapsSettings service.

import { YaMapsSettings } from 'angular-yandex-maps';

  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
export class MapComponent implements OnInit {
  constructor(private yaMapsSettings: YaMapsSettings) {}

  ngOnInit() {
    this.yaMapsSettings.ymaps = ymaps;

That's it. Now you can use the Angular Yandex Map in your project.

Helpful links

Edit this code on GitHub