Advanced markers uses two classes to define markers: theGMSAdvancedMarkerclass provides default marker
capabilities, andGMSPinImageOptionscontains 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
Support custom views and animation with theiconViewproperty
Similar toGMSMarker,GMSAdvancedMarkeralso supports markers with aniconView.
TheiconViewproperty supports animation of all animatable properties ofUIViewexcept frame and center. It does not support markers withiconViewsandiconsdisplayed on the same map.
Swift
//...letadvancedMarker=GMSAdvancedMarker(position:coordinate)advancedMarker.iconView=customView()advancedMarker.map=mapViewfunccustomView()->UIView{// return your custom UIView.}
GMSAdvancedMarkerdoes not directly support layout
constraints for itsiconView. However, you can set layout constraints for user
interface elements within theiconView. Upon creating your view, the objectframeorsizeshould be passed to the marker.
Swift
//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = falseletadvancedMarker=GMSAdvancedMarker(position:coordinate)letcustomView=customView()//set framecustomView.frame=CGRect(0,0,width,height)advancedMarker.iconView=customView
Objective-C
//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;GMSAdvancedMarker*advancedMarker=[GMSAdvancedMarkermarkerWithPosition:kCoordinate];CustomView*customView=[selfcustomView];//set framecustomView.frame=CGRectMake(0,0,width,height);advancedMarker.iconView=customView;
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eAdvanced markers on iOS are customized using \u003ccode\u003eGMSAdvancedMarker\u003c/code\u003e and \u003ccode\u003eGMSPinImageOptions\u003c/code\u003e classes to control appearance and behavior.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can modify marker background color, border color, glyph color, and glyph text for visual customization.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003eiconView\u003c/code\u003e property allows for integrating custom views and animations, similar to standard markers, but without direct layout constraint support.\u003c/p\u003e\n"],["\u003cp\u003eAlthough \u003ccode\u003eGMSAdvancedMarker\u003c/code\u003e doesn't directly support layout constraints for \u003ccode\u003eiconView\u003c/code\u003e, developers can set constraints for elements within the \u003ccode\u003eiconView\u003c/code\u003e and define the view's frame or size.\u003c/p\u003e\n"]]],["The core content focuses on customizing advanced markers using `GMSAdvancedMarker` and `GMSPinImageOptions`. Key actions include changing a marker's background, border, and glyph colors, modifying glyph text, and implementing custom views via the `iconView` property. Swift and Objective-C code examples demonstrate how to set these customizations, such as using `GMSPinImageGlyph` for glyph changes and managing `iconView` properties, including `UIView` animatons and layout constraints.\n"],null,["# Marker customization\n\nSelect platform: [Android](/maps/documentation/android-sdk/advanced-markers/add-marker \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/advanced-markers/customization \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/advanced-markers/basic-customization \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nAdvanced markers uses two classes to define markers: the\n[`GMSAdvancedMarker`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker) class provides default marker\ncapabilities, and\n[`GMSPinImageOptions`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions)\ncontains options for further customization. This page shows you how to customize\nmarkers in the following ways:\n\n- Change the background color\n- Change the border color\n- Change the glyph color\n- Change the glyph text\n- Support custom views and animation with the iconView property\n\n**Figure 1**: The parts of an advanced marker.\n\nChange the background color\n---------------------------\n\nUse the [`GMSPinImageOptions.backgroundColor`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions#backgroundcolor) option to\nchange the background color of a marker. \n\n### Swift\n\n```swift\n//...\n\nlet options = GMSPinImageOptions()\noptions.backgroundColor = .blue\n\nlet pinImage = GMSPinImage(options: options)\nadvancedMarker.icon = pinImage\n\nadvancedMarker.map = mapView\n```\n\n### Objective-C\n\n```objective-c\n//...\n\nGMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];\noptions.backgroundColor = [UIColor blueColor];\n\nGMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];\ncustomTextMarker.icon = pin;\n\ncustomTextMarker.map = mapView;\n```\n\nChange the border color\n-----------------------\n\nUse the\n[`GMSPinImageOptions.borderColor`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageOptions#bordercolor)\noption to change the background color of a marker. \n\n### Swift\n\n```swift\n//...\n\nlet options = GMSPinImageOptions()\noptions.borderColor = .blue\n\nlet pinImage = GMSPinImage(options: options)\nadvancedMarker.icon = pinImage\n\nadvancedMarker.map = mapView\n```\n\n### Objective-C\n\n```objective-c\n//...\n\nGMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];\noptions.backgroundColor = [UIColor blueColor];\n\nGMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];\nadvancedMarker.icon = pin;\n\nadvancedMarker.map = mapView;\n```\n\nChange the glyph color\n----------------------\n\nUse\n[`GMSPinImageGlyph.glyphColor`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageGlyph#glyphcolor)\nto change the background color of a marker. \n\n### Swift\n\n```swift\n//...\n\nlet options = GMSPinImageOptions()\n\nlet glyph = GMSPinImageGlyph(glyphColor: .yellow)\noptions.glyph = glyph\n\nlet glyphColor = GMSPinImage(options: options)\n\nadvancedMarker.icon = glyphColor\nadvancedMarker.map = mapView\n```\n\n### Objective-C\n\n```objective-c\n//...\n\nGMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];\n\noptions.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];\nGMSPinImage *glyphColor = [GMSPinImage pinImageWithOptions:options];\n\nadvancedMarker.icon = glyphColor;\nadvancedMarker.map = mapView;\n```\n\nChange the glyph text\n---------------------\n\nUse [`GMSPinImageGlyph`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSPinImageGlyph) to change the glyph text of a marker. \n\n### Swift\n\n```swift\n//...\n\nlet options = GMSPinImageOptions()\n\nlet glyph = GMSPinImageGlyph(text: \"ABC\", textColor: .white)\noptions.glyph = glyph\n\nlet pinImage = GMSPinImage(options: options)\n\nadvancedMarker.icon = pinImage\nadvancedMarker.map = mapView\n```\n\n### Objective-C\n\n```objective-c\n//...\n\nGMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];\n\noptions.glyph = [[GMSPinImageGlyph alloc] initWithText:@\"ABC\" textColor:[UIColor whiteColor]];\nGMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];\n\ncustomTextMarker.icon = pin;\ncustomTextMarker.map = mapView;\n```\n\nSupport custom views and animation with the `iconView` property\n---------------------------------------------------------------\n\nSimilar to [`GMSMarker`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSMarker), [`GMSAdvancedMarker`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker)\nalso supports markers with an\n[`iconView`](/maps/documentation/ios-sdk/marker#use-the-markers-iconview-property).\nThe `iconView` property supports animation of all animatable properties of\n`UIView` except frame and center. It does not support markers with `iconViews`\nand `icons` displayed on the same map. \n\n### Swift\n\n```swift\n//...\n\nlet advancedMarker = GMSAdvancedMarker(position: coordinate)\nadvancedMarker.iconView = customView()\nadvancedMarker.map = mapView\n\nfunc customView() -\u003e UIView {\n// return your custom UIView.\n}\n```\n\n### Objective-C\n\n```objective-c\n//...\n\nGMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];\nadvancedMarker.iconView = [self customView];\nadvancedMarker.map = self.mapView;\n\n- (UIView *)customView {\n // return custom view\n}\n```\n\nLayout constraints\n------------------\n\n[`GMSAdvancedMarker`](/maps/documentation/ios-sdk/reference/objc/Classes/GMSAdvancedMarker) does not directly support layout\nconstraints for its `iconView`. However, you can set layout constraints for user\ninterface elements within the `iconView`. Upon creating your view, the object\n`frame` or `size` should be passed to the marker. \n\n### Swift\n\n```swift\n//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false\n\nlet advancedMarker = GMSAdvancedMarker(position: coordinate)\nlet customView = customView()\n\n//set frame\ncustomView.frame = CGRect(0, 0, width, height)\n\nadvancedMarker.iconView = customView\n```\n\n### Objective-C\n\n```objective-c\n//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;\n\nGMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];\n\nCustomView *customView = [self customView];\n\n//set frame\ncustomView.frame = CGRectMake(0, 0, width, height);\n\nadvancedMarker.iconView = customView;\n```"]]
