Angular2 google map click event

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.42/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.42/http.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */
#map { 
  height: 200px
}

.list {
  height: 200px;
  background-color: red;
}

### Angular2 Starter Plunker - Typescript - Alpha .42

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/angular2';
import {HTTP_BINDINGS} from 'angular2/http';
import {App} from './app';

bootstrap(App, [HTTP_BINDINGS])
  .catch(err => console.error(err));

//our root app component
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {Child1, Child2} from './person'

@Component({
  selector: 'my-app'
})
@View({
  template: `
    <div>
      <child1 (select)="saidHello($event)"></child1>
      <child2 [hello]="helloMessage"></child2>
    </div>
  `,
  directives: [CORE_DIRECTIVES, Child1, Child2]
})
export class App {
  constructor() {
    this.helloMessage = "";
  }

  saidHello(msg){
    console.log("saidHello", msg);
    this.helloMessage += msg + "\\";
  }
}

import {Component, View, Input, Output, EventEmitter} from 'angular2/angular2'

@Component({
  selector: 'child1'
})
@View({
  template: `
    <div id="map"></div>
    <button (click)="sayHello()">Say Hello</button>
  `
})
export class Child1 {
  @Output() select = new EventEmitter();
  
  constructor() {
    let brussels = new google.maps.LatLng(50.82, 4.35);
    var mapOptions = {
      zoom: 9,
      center: brussels
    };
    this.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
    var marker = new google.maps.Marker({
        position: brussels
      });
   google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
  marker.setMap(this.map);
  }
  
  sayHello() {
    console.log("sayHello");
    this.select.next("i was clicked");
  }
}


@Component({
  selector: 'child2',
})
@View({
  template: `
    <div class="list">{{hello}}</div>
`
})
export class Child2 {
  @Input() hello;
  
  constructor() {
  }
  
}

[
  {"id": 1, "name": "Brad"},
  {"id": 2, "name": "Jules"},
  {"id": 3, "name": "Jeff"}
]