cmd=> npm install @agm/core --save
=======================================================
module.ts
=======================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [MapComponent],
imports: [BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'googleapikey'
})
],
providers: [],
bootstrap: [MapComponent]
})
export class MasterModule { }
=====================================================
map.component.html
======================================================
<div>
<style>
agm-map { height: 800px;}
</style>
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="type" [zoom]="zoomm">
<agm-marker [latitude]="lat" [longitude]="lng" [label]="labelm" [title]="titlem" ></agm-marker>
</agm-map>
</div>
=====================================================
map.component.ts
=====================================================
import { Component } from '@angular/core';
@Component({
templateUrl: '../../UI/Dashboard/Contactus.component.html'
})
export class MapComponent {
lat: number = 28.542706;
lng: number = 77.403647;
zoomm:number=100;
type:boolean=false;
labelm:string="Hno. 128, Sector 2c , Noida, pincode :201250122";
titlem:string="Noida";
}
Map show like this:
these all below link also more helpful to any modification in the map.
https://angular-maps.com/
https://angular-maps.com/guides/getting-started/
http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete
=======================================================
module.ts
=======================================================
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [MapComponent],
imports: [BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'googleapikey'
})
],
providers: [],
bootstrap: [MapComponent]
})
export class MasterModule { }
=====================================================
map.component.html
======================================================
<div>
<style>
agm-map { height: 800px;}
</style>
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="type" [zoom]="zoomm">
<agm-marker [latitude]="lat" [longitude]="lng" [label]="labelm" [title]="titlem" ></agm-marker>
</agm-map>
</div>
=====================================================
map.component.ts
=====================================================
import { Component } from '@angular/core';
@Component({
templateUrl: '../../UI/Dashboard/Contactus.component.html'
})
export class MapComponent {
lat: number = 28.542706;
lng: number = 77.403647;
zoomm:number=100;
type:boolean=false;
labelm:string="Hno. 128, Sector 2c , Noida, pincode :201250122";
titlem:string="Noida";
}
Map show like this:
these all below link also more helpful to any modification in the map.
https://angular-maps.com/
https://angular-maps.com/guides/getting-started/
http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete
No comments:
Post a Comment