title: Can I add an Angular2 (click) to a Google maps marker infoWindow?
body: <p>I have implemented Google maps in Angular2 without using any of the npm libraries available and need to add a button to the infoWindow that fires an Angular function. Can this be done???.</p>
  
  <p>My best effort so far does not work, the airport.name shows but the (click)="setAirport('departure', airport)" does not. I assume it's not connected to Angular in any way.</p>
  
  <p>My component has the following function when the user clicks to activate the marker &amp; infoWindow.</p>
  
  <p>showAirport(idx, airport) {
      const markerInfo =
      <code>&lt;h4&gt;${airport.name}&lt;/h4&gt;&lt;div class='row' style='margin:0; margin-top:20px'&gt;
      &lt;div class="col-xs-6"&gt;
      &lt;a class="btn btn-primary btn-block" (click)="setAirport('departure',airport)"&gt;Set as Departure&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
      &lt;a class="btn btn-primary btn-block" (click)="setAirport('arrival',airport)"&gt;Set as Arrival&lt;/a&gt;
      &lt;/div&gt;
      &lt;/div&gt;<br>
  </code>;</p>
  
  <pre><code>this.setCurrentAirport(idx);
  this.infoWindow.setContent(markerInfo);
  this.infoWindow.open(this.map, this.markers[idx]);
  </code></pre>
  
  <p>}</p>
  
  <p>Here is more of the component ts file.</p>
  
  <hr>
  
  <pre><code>import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
  import { Response } from '@angular/http';
  
  declare var google;
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
      @ViewChild('map') mapElement: ElementRef;
  
      map: any;
      infoWindow = new google.maps.InfoWindow();
  
      private allItems: any[];
  
      lat = 51.5287718;
      lng = -0.1;
  
      airports = [];
      markers = [];
      flights = [];
      polylines = [];
  
      bounds = {
        w: 0,
        e: 0,
        n: 0,
        s: 0
      };
  
      loadAirports(apiBounds) {
          this.airportsService.byBounds(apiBounds)
          .subscribe(
            (airportData: any[]) =&gt; {
                for (let i = 0; i &lt; airportData['data'].length; i++) {
                    const tmpAirport = {
                        id: i,
                        airportID: airportData['data'][i].id,
                        name: airportData['data'][i].airportName,
                        lat: airportData['data'][i].lat,
                        lng: airportData['data'][i].lng
                    };
                    this.airports.push(tmpAirport);
                    this.addMarker(tmpAirport, tmpAirport['name'], i);
                }
            },
            (error: Response) =&gt; {
              const errorData = error.json();
            }
          );
      };
  
    showAirport(idx, airport) {
      console.log(airport);
      // this is where I want to be able to include the buttons 
      const markerInfo = `&lt;h4&gt;${airport.name}&lt;/h4&gt;`;
      this.infoWindow.setContent(markerInfo);
      this.infoWindow.open(this.map, this.markers[idx]);
    }
  
    loadMap() {
      const latLng = new google.maps.LatLng(51, -0.5);
      const mapOptions = {
        center: latLng,
        scrollwheel: false,
        zoom: 9,
        minZoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  
      new google.maps.event.addListenerOnce(this.map, 'bounds_changed', () =&gt; {
          this.loadAirports(this.bounds);
      });
    }
  
    addMarker(airport, info, markerIndex) {
      const position = new google.maps.LatLng(airport['lat'], airport['lng']);
      const marker = new google.maps.Marker({
        map: this.map,
        position: position,
        markerIndex: markerIndex
      });
      const markerInfo = '&lt;b&gt;' + airport.name + '&lt;/b&gt;';
      this.addInfoWindow(marker, markerInfo, markerIndex);
      this.markers.push(marker);
    }
  
    addInfoWindow(marker, content, markerIndex) {
      google.maps.event.addListener(marker, 'click', () =&gt; {
        this.infoWindow.setContent(content);
        this.infoWindow.open(this.map, marker);
      });
    }
  
    constructor() {}
  
    ngOnInit() {
      this.loadMap();
    }
  
  }
  </code></pre>