Google Maps Trigger InfoWindow Outside Map


#1

I am new to Ionic and Angular though I have done fairly well so far. I have Google Maps working and markers populating from my API. Each marker is plotted on the map with an InfoWindow and is also added to an with a couple 's with some data such as created date/time. When a user taps the , I want it to trigger the InfoWindow but I cannot figure out how. Normally, I would use google.maps.event.trigger() however, that doesn’t appear to be working. Any help is appreciated.

track.html

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Track</ion-title>
    <ion-buttons end>
      <button ion-button end>
        <ion-icon name="ios-phone-portrait"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="map" id="map"></div>

  <ion-row class="header">
    <ion-col text-center>
      <i class="fa fa-fw fa-clock-o"></i>
    </ion-col>
    <ion-col text-center>
      <i class="fa fa-fw fa-wifi"></i>
    </ion-col>
    <ion-col text-center>
      <strong><i class="fa fa-fw fa-battery-full"></i></strong>
    </ion-col>
    <ion-col text-center>
      <i class="fa fa-fw fa-tachometer"></i>
    </ion-col>
  </ion-row>

  <div class="history">
    <ion-row *ngFor="let l of locations" (click)="openInfoWindow(l.id)">
      <ion-col text-center>{{l.created}}</ion-col>
      <ion-col text-center>{{l.accuracy}}</ion-col>
      <ion-col text-center>100%</ion-col>
      <ion-col text-center>{{l.speed}}</ion-col>
    </ion-row>
  </div>
</ion-content>

track.ts

import { Component } from '@angular/core';
import { AppConfig } from '../../app/app.config';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;

@Component({
  selector: 'page-track',
  templateUrl: 'track.html'
})
export class TrackPage {
  private map: any;
  markers: any[] = [];
  locations: any;

  constructor(public navCtrl: NavController, public appConfig: AppConfig, public http: Http) {

  }

  ionViewDidLoad() {
    this.map = null;
    this.initMap();
  }

  initMap() {
    this.map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl:false,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      zoom: 18,
      panControl:false,
      scaleControl:true,
      zoomControlOptions: {
        position:google.maps.ControlPosition.LEFT_TOP
      },
      streetViewControlOptions:{
        position:google.maps.ControlPosition.TOP_LEFT
      }
    });

    this.loadHistory();
  }

  loadHistory() {
    let bounds = new google.maps.LatLngBounds();

    this.http.get(this.appConfig.apiBaseUrl + '/api/location/1').map(result => result.json()).subscribe(data => {
      this.locations = data;

      for (let location of data) {
        let infowindow = new google.maps.InfoWindow({
          content: '<h4>Location ' + location.id + '</h4>Created: ' + location.created
        });

        let marker = new google.maps.Marker({
          position: new google.maps.LatLng(location.location.lat, location.location.lon),
          map: this.map,
          draggable: false,
          title: location.created,
          zIndex: location.id
        });

        marker.addListener('click', function() {
          infowindow.open(this.map, marker);
        });

        this.markers.push(marker);

        bounds.extend(new google.maps.LatLng(location.location.lat, location.location.lon));
      }

      this.map.fitBounds(bounds);
    });
  }

  openInfoWindow(id) {
    console.log('ID: ' + id);

    this.hideAllInfoWindows();

    google.maps.event.trigger(this.markers[id], 'click');
  }
}

I also want to make sure only one InfoWindow is open at a time.

Thank you!