Google Map custom Directive

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { GoogleMapDirective } from './google-map.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, GoogleMapDirective ],
  bootstrap:    [ AppComponent ]
}),
export class AppModule { }


Show Google map using Custom Directory 

<div appGoogleMap type="text" class="google-place-input" placeholder="Type to search.." latitute="23.0627078" longitute="72.5264005" style="width:100%;height:400px;">


import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
declare var google: any;

@Directive({
  selector: '[appGoogleMap]'
})
export class GoogleMapDirective implements AfterViewInit {
  private element: HTMLInputElement;

  //get the data from parent component
  @Input() latitute: string;
  @Input() longitute: string;
  constructor(private elRef: ElementRef) {
    this.element = elRef.nativeElement;
  }
  ngAfterViewInit() {
    var mapProp = {
      center: new google.maps.LatLng(this.latitute, this.longitute),
      zoom: 13,
    };
    console.log(mapProp);
    var map = new google.maps.Map(this.element, mapProp);
  }
}