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';

@NgModule({
  imports: [
    ...
    AngularYandexMapsModule.forRoot(),
    ...
  ],
  ...
})
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>
</ya-map>

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

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

@Component({
  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

• Yandex Maps Angular
• Yandex Maps API

Edit this code on GitHub