Angularjs 2

google map directions display in angular 2

Google map directions display in angular 2

Goole map directions display using angular 2 with typescript. Normally google map providing Directions Service in javascript. We need to convert it to for angular 2.
Here you can see how to integrate google map in angular 2 with typescript. Lets see how to display google map directions in angular 2

Step 1 :

Integrate Google Map

Find a tutorial @ http://www.17educations.com/angularjs-2/google-map-api-angular-2-typescript/

Step 2 :

Add direction display tag inside sebm-google-map tag at your template

Eg :  <sebm-google-map-directions [origin]=”origin” [destination]=”destination”></sebm-google-map-directions>

Step 3 :

Create custom Directory to Display Direction.  Here my Directive Name is DirectionsMapDirective.

Step 4 :

Import your Directory and Merge it with declarations in your module file.

Step 5 :

Integrate your directive with components to display your google map directions.

 

Example Source Code:

Custom Directive => DirectionsMapDirective
My directive path is app/map/googlr-map.directive.ts

Import in your module. app.module.ts

Replace ******* with your map api key @apiKey field

My app.component.ts will be.

 

 

Google map directions

Hope it will Help someone.

You can find more discussions about google map directions at https://github.com/SebastianM/angular2-google-maps/issues/495