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 @ ]

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. 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.