Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/advanced-markers/add-marker.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/advanced-markers/customization.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/advanced-markers/basic-customization.md.txt "View this page for the JavaScript platform docs.")

<br />

![A screenshot of different custom
markers](https://developers.google.com/static/maps/documentation/ios-sdk/images/iphone_marker_colors.png)

Advanced markers uses two classes to define markers: the
[`GMSAdvancedMarker`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker.md.txt) class provides default marker
capabilities, and
[`GMSPinImageOptions`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions.md.txt)
contains options for further customization. This page shows you how to customize
markers in the following ways:

- Change the background color
- Change the border color
- Change the glyph color
- Change the glyph text
- Support custom views and animation with the iconView property

![Parts of an advanced marker](https://developers.google.com/static/maps/documentation/ios-sdk/images/marker_parts.png) **Figure 1**: The parts of an advanced marker.

## Change the background color

Use the [`GMSPinImageOptions.backgroundColor`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions.md.txt#backgroundcolor) option to
change the background color of a marker.

### Swift

```swift
//...

let options = GMSPinImageOptions()
options.backgroundColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView
```

### Objective-C

```objective-c
//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
customTextMarker.icon = pin;

customTextMarker.map = mapView;
```

## Change the border color

Use the
[`GMSPinImageOptions.borderColor`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions.md.txt#bordercolor)
option to change the background color of a marker.

### Swift

```swift
//...

let options = GMSPinImageOptions()
options.borderColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView
```

### Objective-C

```objective-c
//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
advancedMarker.icon = pin;

advancedMarker.map = mapView;
```

## Change the glyph color

Use
[`GMSPinImageGlyph.glyphColor`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageGlyph.md.txt#glyphcolor)
to change the background color of a marker.

### Swift

```swift
//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView
```

### Objective-C

```objective-c
//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *pinImage = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = pinImage;
advancedMarker.map = mapView;
```

## Change the glyph text

Use [`GMSPinImageGlyph`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageGlyph.md.txt) to change the glyph text of a marker.

### Swift

```swift
//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(text: "ABC", textColor: .white)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView
```

### Objective-C

```objective-c
//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithText:@"ABC" textColor:[UIColor whiteColor]];
GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];

customTextMarker.icon = pin;
customTextMarker.map = mapView;
```

## Support custom views and animation with the `iconView` property

Similar to [`GMSMarker`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSMarker.md.txt), [`GMSAdvancedMarker`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker.md.txt)
also supports markers with an
[`iconView`](https://developers.google.com/maps/documentation/ios-sdk/marker.md.txt#use-the-markers-iconview-property).
The `iconView` property supports animation of all animatable properties of
`UIView` except frame and center. It does not support markers with `iconViews`
and `icons` displayed on the same map.

### Swift

```swift
//...

let advancedMarker = GMSAdvancedMarker(position: coordinate)
advancedMarker.iconView = customView()
advancedMarker.map = mapView

func customView() -> UIView {
// return your custom UIView.
}
```

### Objective-C

```objective-c
//...

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];
advancedMarker.iconView = [self customView];
advancedMarker.map = self.mapView;

-   (UIView *)customView {
  // return custom view
}
```

## Layout constraints

[`GMSAdvancedMarker`](https://developers.google.com/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker.md.txt) does not directly support layout
constraints for its `iconView`. However, you can set layout constraints for user
interface elements within the `iconView`. Upon creating your view, the object
`frame` or `size` should be passed to the marker.

### Swift

```swift
//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false

let advancedMarker = GMSAdvancedMarker(position: coordinate)
let customView = customView()

//set frame
customView.frame = CGRect(0, 0, width, height)

advancedMarker.iconView = customView
```

### Objective-C

```objective-c
//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];

CustomView *customView = [self customView];

//set frame
customView.frame = CGRectMake(0, 0, width, height);

advancedMarker.iconView = customView;
```