google location dropdown and draw route in angular 2 typescript

Question

I have a requirement to integrate google location dropdown(auto complete) for address search on textbox and plot a route on the map using angular 2 beta version and typescript.

I have searched for the compatible library. but cant find the one.

Can anyone please suggest me the library/component for google location search and maps in angular 2.

Answer 1

There is no google location search with typescript for Angular 2

You have to import the Google Places javascript api as a module into your Angular 2 application

Answer 2

For google location search with Angular2 typescript, you can use angular2-google-map-auto-complete library.

Step1: Run following command, it will give you angular2-google-map-auto-complete package-

npm install angular2-google-map-auto-complete

Step2: Sample component looks like this-

import { Component } from '@angular/core';
import {GoogleplaceDirective} from './googleplace.directive';

@Component({
  selector: 'my-app',
  directives: [GoogleplaceDirective],
  template: `<h1>My First Angular 2 App</h1>
  <input type="text" [(ngModel)] = "address"  (setAddress) = "getAddress($event)" googleplace/>
  `

})
export class AppComponent { 
  public address : Object;
       getAddress(place:Object) {       
           this.address = place['formatted_address'];
           var location = place['geometry']['location'];
           var lat =  location.lat();
           var lng = location.lng();
           console.log("Address Object", place);
       }
}

Step3: Add script tag in index.html

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Output result:

See if this helps.