Christian Engvall

This tutorial walks you through how to add an info window when a user clicks or taps on a Google map marker. The tutorial starts where the Ionic 2 Google map markers left off.

Open up src/pages/home/home.ts and add a new method in that class called addInfoWindowToMarker.

addInfoWindowToMarker(marker) {
  var infoWindowContent = '<div id="content"><h1 id="firstHeading" class="firstHeading">' + marker.title + '</h1></div>';
  var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
  });
  marker.addListener('click', () => {
    infoWindow.open(this.map, marker);
  });
}

An info windows displays HTML of our choice. I add the title of the marker wrapped around some divs in the infoWindowContent variable. Then assign variable to the infoWindows content property.

This method also adds an eventlistener that listens for user taps och clicks, and when this happens a call to the infowindows method open is called.

We’ll call this method from the addMarkersToMap method which we created in the markers tutorial Now it looks like this:

addMarkersToMap(markers) {
  for(let marker of markers) {
    var position = new google.maps.LatLng(marker.latitude, marker.longitude);
    var dogwalkMarker = new google.maps.Marker({
      position: position,
      title: marker.name,
      icon: 'assets/images/marker.png'});
    dogwalkMarker.setMap(this.map);
    this.addInfoWindowToMarker(dogwalkMarker);
  }
}

Now when running the app this is how the infoWindow looks:

InfoWindow Google map marker

Closing other info windows when opening a new one

To close an InfoWindow we need to call its close() method. To do that we also need to keep a reference to our windows.

Add a property called infoWindows in home.ts, and initialize it as an array in the constructor.

export class HomePage {

  @ViewChild('mapContainer') mapContainer: ElementRef;
  map: any;
  infoWindows: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.infoWindows = [];
  }

We’ll use this property to store references to infoWindows. Right before closing the addInfoWindowToMarker we’ll push an infoWindow to the new array. We’ll also call a new method called closeAllInfoWindows() in marker.addListener.

addInfoWindowToMarker(marker) {
  var infoWindowContent = '<div id="content"><h1 id="firstHeading" class="firstHeading">' + marker.title + '</h1></div>';
  var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
  });
  marker.addListener('click', () => {
    this.closeAllInfoWindows();
    infoWindow.open(this.map, marker);
  });
  this.infoWindows.push(infoWindow);
}

This is what the closeAllInfoWindows method looks like:

closeAllInfoWindows() {
  for(let window of this.infoWindows) {
    window.close();
  }
}

Now when clicking on another marker all other infoWindows will be closed. Read more about the InfoWindow at the official docs.