Markers

Markers indicate single locations on the map. You can customize your markers by replacing the default icon with a custom image, or adjusting the image offset.

Introduction

Markers added with the Google Maps SDK for iOS use a standard icon, common to the Google Maps look and feel. If you want to use an alternative image, you can programmatically alter the default icon and anchor point. Markers are objects of type GMSMarker, and are added to the map by setting the map property.

Add a marker

To add a marker, create a GMSMarker object that includes a position and title, and set its map.

The following example demonstrates how to add a marker to an existing GMSMapView object. The marker is created at coordinates 10,10, and displays the string "Hello world" in an info window when clicked.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView_;

Swift

let  position = CLLocationCoordinate2DMake(10, 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView_

You can animate the addition of new markers to the map by setting the marker.appearAnimation property to kGMSMarkerAnimationPop.

Remove a marker

You can remove a marker from the map by setting the map property of the GMSMarker to nil. Alternatively, you can remove all of the overlays (including markers) currently on the map by calling the GMSMapView clear method.

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView_ = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView_ clear];

Swift

let camera = GMSCameraPosition.cameraWithLatitude(-33.8683, longitude:151.2086, zoom:6)
let mapView = GMSMapView.mapWithFrame(CGRectZero, camera:camera)
...
mapView.clear()

If you wish to make modifications to a marker after you've added it to the map, ensure that you keep hold of the GMSMarker object. You can modify the marker later by making changes to this object.

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView_;
...
marker.map = nil;

Swift

let marker = GMSMarker(position:position)
marker.map = mapView;
...
marker.map = nil;

Customize a marker

You can customize a marker's image by either changing the color of the default marker, or replacing the marker image with a custom icon.

Change the default marker color

You can customize the color of the default marker image by requesting a tinted version of the default icon with markerImageWithColor:, and passing the resulting image to the GMSMarker's icon property.

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

Swift

marker.icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

Change the default marker icon

If you want to change the default marker image you can set a custom icon. Custom icons are always set as a UIImage object. The following snippet creates a marker with a custom icon centered at London, England. The snippet assumes that your application contains an image named "house.png".

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let london = GMSMarker(position: position)
london.title = "London";
london.icon = UIImage(named: "house")
london.map = mapView;

If you are creating several markers with the same image, use the same instance of UIImage for each of the markers. This helps improve the performance of your application when displaying many markers.

This image may have multiple frames. Additionally, the alignmentRectInsets property is respected, which is useful if a marker has a shadow or other unusable region.

Change the marker opacity

You can control the opacity of a marker with its opacity property. You should specify the opacity as a float between 0.0 and 1.0, where 0 is fully transparent and 1 is fully opaque.

Objective-C

marker.opacity = 0.6;

Swift

marker.opacity = 0.6

You can animate the marker opacity with Core Animation via the GMSMarkerLayer.

Flatten a marker

Marker icons are normally drawn oriented against the device's screen rather than the map's surface, so rotating, tilting or zooming the map does not necessarily change the orientation of the marker.

You can set the orientation of a marker to be flat against the earth. Flat markers rotate when the map is rotated, and change perspective when the map is tilted. As with regular markers, flat markers retain their size when the map is zoomed in or out.

To change the orientation of the marker, set the marker's flat property to YES or true.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let london = GMSMarker(position: position)
london.flat = true
london.map = mapView

Rotate a marker

You can rotate a marker around its anchor point by setting the rotation property. Specify the rotation as a CLLocationDegrees type, measured in degrees clockwise from the default position. When the marker is flat on the map, the default position is North.

The following example rotates the marker 90°. Setting the groundAnchor property to 0.5,0.5 causes the marker to be rotated around its center, instead of its base.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let degrees : CLLocationDegrees = 90
let london = GMSMarker(position:position)
london.groundAnchor = CGPointMake(0.5, 0.5)
london.rotation = degrees
london.map = mapView

Info windows

Use an info window to display information to the user when they tap on a marker. 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. The contents of the info window are defined by the title and snippet properties. Clicking the marker does not display an info window if both the title and snippet properties are blank or nil.

The following snippet creates a simple marker, with only a title for the text of the info window.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

With the 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.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

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.

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView_;

Swift

let position = CLLocationCoordinate2DMake(51.5, -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPointMake(0.5, 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Events on markers and info windows

You can listen to events that occur on the map, such as when a user taps a marker or an info window. To listen to events, you must implement the GMSMapViewDelegate protocol. See the guide to events and the list of methods on the GMSMapViewDelegate. For Street View events, see the GMSPanoramaViewDelegate.

Send feedback about...

Google Maps SDK for iOS
Google Maps SDK for iOS
Need help? Visit our support page.