An info window allows you to display information to the user when they tap on a marker.
An info window is drawn oriented against the device's screen, centered above its associated marker. The default info window contains the title in bold, with the snippet text below the title.
The contents of the info window are defined by the
snippet properties of the marker. Clicking the marker does not display an
info window if both the
snippet properties are blank or
Only one info window is displayed at a time. If a user taps on another marker, the current window is hidden and the new info window opens. If the user clicks on a marker that is currently showing an info window, that info window closes and reopens.
Create a custom info window to add additional text or images. A custom info window gives you complete control of the appearance of the popup.
Add an info window
The following snippet creates a simple marker, with only a title for the text of the info window.
let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: position) london.title = "London" london.map = mapView
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:position]; london.title = @"London"; london.map = mapView;
snippet property, you can add additional text that will appear
below the title in a smaller font. Strings that are longer than the width of
the info window are automatically wrapped over several lines. Very long
messages may be truncated.
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView;
Show/hide an info window
Info windows are designed to respond to user touch events on the marker.
You can show or hide an info window programmatically by setting the
selectedMarkerto the name of the marker to show it.
nilto hide it.
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView // Show marker mapView.selectedMarker = london // Hide marker mapView.selectedMarker = nil
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView; // Show marker mapView.selectedMarker = london; // Hide marker mapView.selectedMarker = nil;
Setting an info window to refresh automatically
tracksInfoWindowChanges on the
true if you want new properties or the content of the info
window to be immediately displayed when changed, rather than having to wait for
the info window to hide and then show again. The default is
london.tracksInfoWindowChanges = true
london.tracksInfoWindowChanges = YES;
To decide when to set the
tracksInfoWindowChanges property, you
should weigh up performance considerations against the advantages of having the
info window redrawn automatically. For example:
- If you have a series of changes to make, you can change the property to
YESthen back to
- When an animation is running or the contents are being loaded asynchronously,
you should keep the property set to
YESuntil the actions are complete.
Refer also to the notes for consideration when
iconView property of the marker.
Changing the position of an info window
An info window is drawn oriented against the device's screen, centered
above its associated marker. You can alter the position of the info window
relative to the marker by setting the
infoWindowAnchor property. This
property accepts a
CGPoint, defined as an (x,y) offset where both x and y
range between 0.0 and 1.0. The default offset is (0.5, 0.0), that is, the center
top. Setting the
infoWindowAnchor offset is useful for aligning the info
window against a custom icon.
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5) london.icon = UIImage(named: "house") london.map = mapView
london.infoWindowAnchor = CGPointMake(0.5, 0.5); london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
Handling events on info windows
You can listen to the following info window events:
mapView:markerInfoWindow:— Called when a marker is about to become selected. Can optionally return a custom info window, as a
UIView, to use for the marker. See Custom info windows below for more information.
mapView:markerInfoContents:— Called when
mapView:didCloseInfoWindowOfMarker:— Called when the marker's info window is closed.
mapView:didLongPressInfoWindowOfMarker:— Called after a marker's info window has been long pressed.
To listen to events, you must implement the
GMSMapViewDelegate protocol. See the
guide to events and the list of methods on the
GitHub includes samples that demonstrates how to handle info window events:
Custom info windows
Customize the contents of info windows by creating a subclass of
that defines the layout of the custom info window. In that subclass,
define the view however you'd like. For example, you can use custom
instances to display title and snippet text and other views, such as
instances, to add images displayed in the info window.
Ensure that your
ViewController implements the
protocol and defines a listener for the
event. This event listener is called when a marker is about to become
selected, and lets you return an instance of your custom
UIView class to
define the custom info window used by the marker.
The images below show a default info window, an info window with customized contents, and an info window with customized frame and background.
The code samples on GitHub provided with the Maps SDK for iOS include samples of custom info windows. For example, see the definition of MarkerInfoWindowViewController.m (Objective-C) or MarkerInfoWindowViewController.swift (Swift).
See code samples for information on downloading and running these samples.