Google map marker InfoWindow - Ionic
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.
src/pages/home/home.ts and add a new method in that class called
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:
Now when running the app this is how the infoWindow looks:
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.
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.
This is what the
closeAllInfoWindows method looks like:
Now when clicking on another marker all other infoWindows will be closed. Read more about the InfoWindow at the official docs.