Friday, 8 September 2017

Google map in angular js 2

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

No comments:

Post a Comment