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!