AI-generated Key Takeaways
-
Advanced markers on iOS are customized using
GMSAdvancedMarkerandGMSPinImageOptionsclasses to control appearance and behavior. -
Developers can modify marker background color, border color, glyph color, and glyph text for visual customization.
-
The
iconViewproperty allows for integrating custom views and animations, similar to standard markers, but without direct layout constraint support. -
Although
GMSAdvancedMarkerdoesn't directly support layout constraints foriconView, developers can set constraints for elements within theiconViewand define the view's frame or size.
Advanced markers uses two classes to define markers: the GMSAdvancedMarker
class provides default marker
capabilities, and GMSPinImageOptions
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
Change the background color
Use the GMSPinImageOptions.backgroundColor
option to
change the background color of a marker.
Swift
//... let options = GMSPinImageOptions () options . backgroundColor = . blue let pinImage = GMSPinImage ( options : options ) advancedMarker . icon = pinImage advancedMarker . map = mapView
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
option to change the background color of a marker.
Swift
//... let options = GMSPinImageOptions () options . borderColor = . blue let pinImage = GMSPinImage ( options : options ) advancedMarker . icon = pinImage advancedMarker . map = mapView
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
to change the background color of a marker.
Swift
//... let options = GMSPinImageOptions () let glyph = GMSPinImageGlyph ( glyphColor : . yellow ) options . glyph = glyph let glyphColor = GMSPinImage ( options : options ) advancedMarker . icon = glyphColor advancedMarker . map = mapView
Objective-C
//... GMSPinImageOptions * options = [[ GMSPinImageOptions alloc ] init ]; options . glyph = [[ GMSPinImageGlyph alloc ] initWithGlyphColor : [ UIColor yellowColor ]]; GMSPinImage * glyphColor = [ GMSPinImage pinImageWithOptions : options ]; advancedMarker . icon = glyphColor ; advancedMarker . map = mapView ;
Change the glyph text
Use GMSPinImageGlyph
to change the glyph text of a marker.
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
//... 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
, GMSAdvancedMarker
also supports markers with an iconView
.
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
//... let advancedMarker = GMSAdvancedMarker ( position : coordinate ) advancedMarker . iconView = customView () advancedMarker . map = mapView func customView () -> UIView { // return your custom UIView. }
Objective-C
//... GMSAdvancedMarker * advancedMarker = [ GMSAdvancedMarker markerWithPosition : kCoordinate ]; advancedMarker . iconView = [ self customView ]; advancedMarker . map = self . mapView ; - ( UIView * ) customView { // return custom view }
Layout constraints
GMSAdvancedMarker
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
//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
//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 ;
