gmaps angular code example

Example: angular google maps

Step 1: Creating new project
Create a new project using command ng new gmaps-ng5
Step 2: Install Google Maps types for typescript support.
Run command npm install --save @types/googlemaps
Step 3: Link Google Maps JavaScript CDN inside index.html
<script src="http://maps.googleapis.com/maps/api/js"></script>
NOTE: 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.
With above steps, you are all set to start working with Google Maps (GMap).
Step 4: Next, let’s add a placeholder <div> for GMap
<div #gmap style="width:100%;height:400px"></div>
Step 5: Initialize GMap inside component

	import { ViewChild } from '@angular/core';
	import { } from '@types/googlemaps';

	export class AppComponent {  
	  @ViewChild('gmap') gmapElement: any;
	  map: google.maps.Map;

	  ngOnInit() {
		var mapProp = {
		  center: new google.maps.LatLng(18.5793, 73.8143),
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
	  }
	}

Let’s break it down.
import { } from '@types/googlemaps';

First 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.
Access <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.
ngOnInit(): 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.
Running application:
Run application using ng serve and you should see Google Map inside browser. Congrats!! See, it was easy, told ya!
Perform Map operations
By 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.

Change Map type

	<div class="col-md-3 col-sm-12 col-xs-12">
	  <button (click)="setMapType('terrain')" class="btn btn-primary">Terrain</button>
	  <button (click)="setMapType('satellite')" class="btn btn-danger">Satellite</button>
	  <button (click)="setMapType('roadmap')" class="btn btn-warning">Road Map</button>
	</div>
	
	setMapType(mapTypeId: string) {
		this.map.setMapTypeId(mapTypeId)    
	}

We 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.
Navigate Map via Latitude and Longitude
Let’s create a HTML form for user to enter Latitude and Longitude.

	<form class="form-inline" #form="ngForm" (ngSubmit)="setCenter($event)" ac>
	  <div class="form-group">
		<input type="text" class="form-control" name="latitude" [(ngModel)]="latitude" placeholder="Enter latitude" required>
	  </div>
	  <div class="form-group">
		<input type="text" class="form-control" name="longitude" [(ngModel)]="longitude" placeholder="Enter longitude" required>
	  </div>
	  <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Go</button>
	</form>

Once 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.
Notice e.preventDefault() function call. It is to avoid refreshing complete page on form submit.

	export class AppComponent {
	  latitude:number;
	  longitude:number;

	  setCenter(e:any){
		e.preventDefault();
		this.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));
	  }
	}