Angularjs 2

Google map integration in Angular 2 with typescript

Google map integration in Angular 2 with typescript

Google map have a javascript api to build map in our code. Let us build a google map with angular 2 app. Here we have a package called angular2-google-maps which is developed by Sebastian Muller. Before install angular 2 you should have Node and NPM in you system. Here you can find a tutorial to install angular 2 .

angular2-google-maps works well with latest version of Node and NPM. So make sure you have a latest version of npm.

To check npm version run below command in terminal

If you have an old version run below commands to install latest one.

 

 

Step 1 :

Install angular 2 app [ Tutorial @ http://www.17educations.com/angularjs-2/install-angularjs-2/ ]

Step 2: Install  angular2-google-maps package

It will angular2-google-maps package at node_modules folder

Step 3: Edit you systemjs.config.js to map package with your app

Map package path to your app by placing path under map.

Otherwise you will face the following error at console.
domain.com/angular2-google-maps/core Failed to load resource: the server responded with a status of 404 (Not Found)

Step 4: Modify app.modules.ts

My app.modules.ts

import AgmCoreModule from “angular2-google-maps/core”. AgmCoreModule which is an base class for angular2-google-maps core.
Write libraries under AgmCoreModule.forRoot({ ….. }) at @NgModule => imports. Enter your google map api key and declare libraries.

Step 5: Create template at you app.component.ts



Step 6 : Implement Map Code at your component [app.component.ts]

Import required libraries first. NgModule, NgZone, OnInit, ViewChild, ElementRef , FormsModule and MapsAPILoader
Declare public variables like latitude, longitude, searchControl and zoom

latitude, longitude and zoom are the variables which is used in <sebm-google-map> tag.

@ViewChild() will act as a DOM. It will used to get the Input element.
@ViewChild(“search”) => It will find #search in form and will get the value of it.
public searchElementRef: ElementRef => user defined variable searchElementRef which is an ElementRef to the search input.

MapsAPILoader => which will load the Google Map api with the places.

NgZone => It will enable us to perform asynchronous operations outside of the Angular zone.

ngOnInit() => It will execute the function on the time of page init. Here we will get the current position of map and fetch the location and place it to our map.

Step 7 : My index.html

Step 8 : Run you code. now you can see google map at your code.

Google map integration in Angular 2 with typescript

 

 

Hope it will help someone.
If you like this article don’t forget to share and comment.
Thanks!.