Personalización de marcadores

Selecciona la plataforma: Android iOS JavaScript

Una captura de pantalla de diferentes marcadores personalizados

Marcadores avanzados usa dos clases para definir marcadores: la clase GMSAdvancedMarker proporciona funciones predeterminadas para los marcadores, y GMSPinImageOptions contiene opciones para una mayor personalización. En esta página, te indicamos cómo personalizar los marcadores de las siguientes maneras:

  • Cómo cambiar el color de fondo
  • Cómo cambiar el color del borde
  • Cómo cambiar el color del glifo
  • Cómo cambiar el texto del glifo
  • Cómo admitir vistas personalizadas y animaciones con la propiedad iconView
Partes de un marcador avanzado
Figura 1: Partes de un marcador avanzado

Cómo cambiar el color de fondo

Usa la opción GMSPinImageOptions.backgroundColor para cambiar el color del fondo de un marcador.

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;

Cómo cambiar el color del borde

Usa la opción GMSPinImageOptions.borderColor para cambiar el color del fondo de un marcador.

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;

Cómo cambiar el color del glifo

Usa GMSPinImageGlyph.glyphColor para cambiar el color de fondo de un marcador.

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;

Cómo cambiar el texto del glifo

Usa GMSPinImageGlyph para cambiar el texto del glifo de un marcador.

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;

Cómo admitir vistas personalizadas y animaciones con la propiedad iconView

Al igual que GMSMarker, GMSAdvancedMarker también admite marcadores con un elemento iconView. La propiedad iconView admite la animación de todas las propiedades de UIView que se pueden animar, excepto el marco y el centro. No admite marcadores con los elementos iconViews y icons que se muestran en el mismo mapa.

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
}

Restricciones de diseño

GMSAdvancedMarker no admite directamente restricciones de diseño para su iconView. Sin embargo, puedes establecer restricciones de diseño para los elementos de la interfaz de usuario dentro de iconView. Una vez que crees la vista, se debe pasar el objeto frame o size al marcador.

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;