angular agm

1Step 1: Creating new project
2Create a new project using command ng new gmaps-ng5
3Step 2: Install Google Maps types for typescript support.
4Run command npm install --save @types/googlemaps
5Step 3: Link Google Maps JavaScript CDN inside index.html
6<script src="http://maps.googleapis.com/maps/api/js"></script>
7NOTE: Make sure you put your Google Map API Key here. You can get one from `https://developers.google.com/maps/documentation/javascript/get-api-key`. If not, after free usage, Google Map will start showing watermark.
8With above steps, you are all set to start working with Google Maps (GMap).
9Step 4: Next, let’s add a placeholder <div> for GMap
10<div #gmap style="width:100%;height:400px"></div>
11Step 5: Initialize GMap inside component
12
13	import { ViewChild } from '@angular/core';
14	import { } from '@types/googlemaps';
15
16	export class AppComponent {  
17	  @ViewChild('gmap') gmapElement: any;
18	  map: google.maps.Map;
19
20	  ngOnInit() {
21		var mapProp = {
22		  center: new google.maps.LatLng(18.5793, 73.8143),
23		  zoom: 15,
24		  mapTypeId: google.maps.MapTypeId.ROADMAP
25		};
26		this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
27	  }
28	}
29
30Let’s break it down.
31import { } from '@types/googlemaps';
32
33First we shall import Google Maps types that we have installed in step 2. This is great help during development as you can work with strong types instead of vague any type. Apart from that, you shall also get intellisense if your IDE can understand type definition files.
34Access <div #gmap>: gmapElement is a reference to <div #gmap> inside app.component.html file. ViewChild directive creates a direct link between <div> element and a gmapElement member variable.
35ngOnInit(): Inside ngOnInit() life cycle hook, we shall create configuration object for GMap specifying default center, zoom level and map type. We shall pass this object to google.maps.Map constructor which shall return new Map object which we shall retain in member variable map for later access.
36Running application:
37Run application using ng serve and you should see Google Map inside browser. Congrats!! See, it was easy, told ya!
38Perform Map operations
39By default Google Map control shall render map as well as have few controls for changing zoom, full screen etc. You can access native Google Maps API via Angular.
40
41Change Map type
42
43	<div class="col-md-3 col-sm-12 col-xs-12">
44	  <button (click)="setMapType('terrain')" class="btn btn-primary">Terrain</button>
45	  <button (click)="setMapType('satellite')" class="btn btn-danger">Satellite</button>
46	  <button (click)="setMapType('roadmap')" class="btn btn-warning">Road Map</button>
47	</div>
48	
49	setMapType(mapTypeId: string) {
50		this.map.setMapTypeId(mapTypeId)    
51	}
52
53We have map member variable inside our AppComponent class. Using this variable, we can call native GMap API for example, setMapTypeId. We have three buttons which pass map type ID to click handler to be passed to setMapTypeId function.
54Navigate Map via Latitude and Longitude
55Let’s create a HTML form for user to enter Latitude and Longitude.
56
57	<form class="form-inline" #form="ngForm" (ngSubmit)="setCenter($event)" ac>
58	  <div class="form-group">
59		<input type="text" class="form-control" name="latitude" [(ngModel)]="latitude" placeholder="Enter latitude" required>
60	  </div>
61	  <div class="form-group">
62		<input type="text" class="form-control" name="longitude" [(ngModel)]="longitude" placeholder="Enter longitude" required>
63	  </div>
64	  <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Go</button>
65	</form>
66
67Once user submit the form by entering Latitude and Longitude, we shall call native setCenter GMap API. This function takes object of LatLng type hence we shall pass lat/long as a parameter to LatLng constructor.
68Notice e.preventDefault() function call. It is to avoid refreshing complete page on form submit.
69
70	export class AppComponent {
71	  latitude:number;
72	  longitude:number;
73
74	  setCenter(e:any){
75		e.preventDefault();
76		this.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));
77	  }
78	}

1npm install @agm/core
2
3// on your module
4import { AgmCoreModule } from '@agm/core';
5
6imports: [
7    AgmCoreModule.forRoot({
8      apiKey: ''  // create a Google API Key and enable "Maps JavaScript API" for that API
9    })
10  ]
11
12// on you component
13  title = 'My first AGM project';
14  lat = 51.678418;
15  lng = 7.809007;
16
17// on your html
18<agm-map [latitude]="lat" [longitude]="lng" style="height:150px">
19    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
20</agm-map>