Skip to main content

Posts

Showing posts with the label angular6

Directions and Waypoints in google map using AGM map angular 6

If you have not Setup agm map till now then check this post   Google map in angular 6   First Install NPM direction module in your project. npm i  @agm/core npm i agm-direction Import direction module in app.component.ts : Importing Modules import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppComponent } from './app.component' ; import { AgmCoreModule } from '@agm/core' ; // @agm/core import { AgmDirectionModule } from 'agm-direction' ; // agm-direction @ NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AgmCoreModule.forRoot({ // @agm/core apiKey: 'your key' , }), AgmDirectionModule, // agm-direction ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Open the file src/app/app.component.ts and paste the following content: import { Com...

Multiple markers on google map angular 6

If you have not Setup agm map till now then check this post  Google map in angular 6  . we’ll now use already created MAP to load our markers. Open the file src/app/app.component.ts and modify it like below: app.component.ts : import { Component } from '@angular/core' ; @ Component({ selector: 'app-root' , templateUrl: 'app.component.html' , styleUrls: [ 'app.component.css' ], }) export class AppComponent { title: string = 'Google Map' ; lat: number = 51.678418 ; lng: number = 7.809007 ; markers = [ { lat: 51.673858 , lng: 7.815982 , label: 'A' }, { lat: 51.373858 , lng: 7.215982 , label: 'B' }, { lat: 51.723858 , lng: 7.895982 , label: 'C' } ] } Open the file src/app/app.component.html and paste the followin...

Google Map in Angular 6

Getting Started We start by creating a project with Angular CLI . Angular CLI makes it easy to create an application that already works and allows you to follow the best practices. I you haven’t installed Angular CLI yet, please run the following command first: npm install -g @angular/cli ng new agm-project cd agm-project Setting up Angular Google Maps First and foremost, in order to do any kind of interaction with the Maps API, you need an API key from Google. Follow the instructions   Google Map API key Install and configure Angular Google Maps From your project folder, run the following command: npm i @agm/core --save Add agmcore module entry in  app.module.ts  app.module.ts import { BrowserModule } from '@angular/platform-browser' ; import { NgModule, ApplicationRef } from '@angular/core' ; import { CommonModule } from '@angular/common' ; import { FormsModule } from '@angular/forms' ; import { AppC...