Pitouli-Angular2-google-maps#431

import {
  Component, 
  provide,
  NgZone
} from '@angular/core';

import {bootstrap} from '@angular/platform-browser-dynamic';

import {
  MapsAPILoader,
  NoOpMapsAPILoader,
  MouseEvent,
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  ANGULAR2_GOOGLE_MAPS_DIRECTIVES
} from 'angular2-google-maps/core';

//////////////////
// AUTOCOMPLETE //
//////////////////
declare var google:any;

@Component({
  selector: 'my-app',
  directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES],
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  template: `
    <sebm-google-map 
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="false"
      (mapClick)="mapClicked($event)">
    
      <sebm-google-map-marker 
          *ngFor="let m of markers; let i = index"
          (markerClick)="clickedMarker(m.label, i)"
          [latitude]="m.lat"
          [longitude]="m.lng"
          [label]="m.label"
          [markerDraggable]="m.draggable"
          (dragEnd)="markerDragEnd(m, $event)">
          
        <sebm-google-map-info-window>
          <strong>InfoWindow content</strong>
        </sebm-google-map-info-window>
        
      </sebm-google-map-marker>

    </sebm-google-map>
    
    <input id="address" type="text" />
`})
export class App {
  
  constructor(private zone: NgZone) { }
   
  //////////////////
  // AUTOCOMPLETE //
  //////////////////
  ngOnInit() {

     // Google Place Autocomplete
    var autocomplete:any;
    var inputAddress = document.getElementById("address");
    autocomplete = new google.maps.places.Autocomplete(inputAddress, {});
    google.maps.event.addListener(autocomplete, 'place_changed', ()=> {
        
        this.zone.run(() => {
          var place = autocomplete.getPlace();
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          // For an unknown reason you need to click the map for the relocation to happen (even if these lines are executed before)
          console.log(place);
        });                           

    });
  }
  
  
  // google maps zoom level
  zoom: number = 8;
  
  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;
  
  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }
  
  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng
    });
  }
  
  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }
  
  markers: marker[] = [
	  {
		  lat: 51.673858,
		  lng: 7.815982,
		  label: 'A',
		  draggable: true
	  },
	  {
		  lat: 51.373858,
		  lng: 7.215982,
		  label: 'B',
		  draggable: false
	  },
	  {
		  lat: 51.723858,
		  lng: 7.895982,
		  label: 'C',
		  draggable: true
	  }
  ]
}
// just an interface for type safety.
interface marker {
	lat: number;
	lng: number;
	label?: string;
	draggable: boolean;
}

// ANGULAR2_GOOGLE_MAPS_PROVIDERS is required here
bootstrap(App, [
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  // If you don't want to let angular2-google-maps load the Google Maps API script,
  // you can use the NoOpMapsAPILoader like this:
  provide(MapsAPILoader, {useClass: NoOpMapsAPILoader})
])

Wrapped addListener within an NgZone