تستخدِم العلامات المتقدّمة فئتَين لتحديد العلامات: توفّر الفئة
GMSAdvancedMarker إمكانات العلامات التلقائية،
بينما تحتوي الفئة
GMSPinImageOptions
على خيارات لتخصيصها بشكل أكبر. توضّح لك هذه الصفحة كيفية تخصيص العلامات بالطرق التالية:
تغيير لون الخلفية
تغيير لون الحدود
تغيير لون الرمز الرسومي
تغيير نص الرمز الرسومي
إتاحة طرق عرض مخصّصة وصور متحركة باستخدام السمة iconView
إتاحة العروض المخصّصة والصور المتحركة باستخدام السمة iconView
على غرار GMSMarker، تتيح السمة GMSAdvancedMarker
أيضًا استخدام العلامات مع iconView.
تتيح السمة iconView إنشاء صور متحركة لجميع السمات التي يمكن تحريكها في UIView باستثناء الإطار والوسط. لا تتوافق هذه الميزة مع العلامات التي تتضمّن iconViews
وicons المعروضة على الخريطة نفسها.
Swift
//...letadvancedMarker=GMSAdvancedMarker(position:coordinate)advancedMarker.iconView=customView()advancedMarker.map=mapViewfunccustomView()->UIView{// return your custom UIView.}
لا يتيح GMSAdvancedMarker بشكل مباشر قيود التنسيق الخاصة بـ iconView. ومع ذلك، يمكنك ضبط قيود التنسيق لعناصر واجهة المستخدم ضمن iconView. عند إنشاء طريقة العرض، يجب تمرير العنصر
frame أو size إلى العلامة.
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;
تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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```"]]