Marcadores

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Seleccionar plataforma: Android iOS JavaScript

Los marcadores indican ubicaciones únicas en el mapa.

De forma predeterminada, los marcadores usan un ícono estándar que tiene el aspecto común de Google Maps. Si deseas personalizar tu marcador, puedes cambiar el color del marcador predeterminado, reemplazar la imagen del marcador por un ícono personalizado o cambiar otras propiedades del marcador.

En respuesta a un evento de clic en un marcador, puedes abrir una ventana de información. Una ventana de información muestra texto o imágenes en una ventana emergente sobre el marcador. Puedes usar una ventana de información predeterminada para mostrar texto o crear tu propia ventana de información personalizada a fin de controlar por completo su contenido.

Cómo agregar un marcador

Para agregar un marcador, crea un objeto GMSMarker que incluya position y title, y configura su map.

En el siguiente ejemplo, se muestra cómo agregar un marcador a un objeto GMSMapView existente. El marcador se crea en las coordenadas 10,10 y muestra la string"Hello world"en una ventana de información cuando se hace clic en él.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

Objective‑C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

Puedes animar la adición de marcadores nuevos al mapa configurando la propiedad marker.appearAnimation de la siguiente manera:

  • kGMSMarkerAnimationPop para hacer que el marcador resalte de su groundAnchor cuando se lo agrega
  • kGMSMarkerAnimationFadeIn: hace que el marcador se atenúe cuando se agregue

Eliminar un marcador

Puedes quitar un marcador del mapa si configuras la propiedad map de GMSMarker como nil. También puedes quitar todas las superposiciones (incluidos los marcadores) que se encuentren actualmente en el mapa si llamas al método GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

Objective‑C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

Si deseas realizar modificaciones en un marcador después de agregarlo al mapa, asegúrate de conservar el objeto GMSMarker. Puedes modificar el marcador más adelante realizando cambios en este objeto.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective‑C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Cómo cambiar el color del marcador

Para personalizar el color de la imagen predeterminada del marcador, solicita una versión matizada del ícono predeterminado con markerImageWithColor: y pasa la imagen resultante a la propiedad del ícono GMSMarker.

Swift

marker.icon = GMSMarker.markerImage(with: .black)
      

Objective‑C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

Cómo personalizar la imagen del marcador

Si deseas cambiar la imagen predeterminada del marcador, puedes establecer un ícono personalizado con la propiedad icon o iconView del marcador.

Si se configura iconView, la API ignora la propiedad icon. Las actualizaciones de la icon actual no se reconocen cuando se configura iconView.

Uso de la propiedad "icon" del marcador

En el siguiente fragmento, se crea un marcador con un ícono personalizado proporcionado como UIImage en la propiedad icon. El ícono está centrado en Londres, Inglaterra. El fragmento supone que tu aplicación contiene una imagen con el nombre &house;png.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective‑C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Si creas varios marcadores con la misma imagen, usa la misma instancia de UIImage para cada uno de ellos. Esto ayuda a mejorar el rendimiento de la aplicación cuando se muestran muchos marcadores.

Esta imagen puede tener varios fotogramas. Además, se respeta la propiedad alignmentRectInsets, lo que es útil si un marcador tiene una sombra u otra región no utilizable.

Uso de la propiedad "iconView" del marcador

El siguiente fragmento crea un marcador con un ícono personalizado configurando la propiedad iconView del marcador y anima un cambio en el color del marcador. El fragmento supone que tu aplicación contiene una imagen con el nombre &house;png.".

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

Objective‑C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Debido a que iconView acepta un UIView, puedes tener una jerarquía de controles de IU estándar que definan tus marcadores, y cada vista tenga el conjunto estándar de capacidades de animación. Puedes incluir cambios en el tamaño del color, el color y los niveles Alfa, así como aplicar transformaciones arbitrarias. La propiedad iconView admite animación de todas las propiedades animadas de UIView, excepto frame y center.

Ten en cuenta las siguientes consideraciones cuando uses iconView:

  • UIView puede demandar recursos cuando tracksViewChanges se establece en YES, lo que puede aumentar el uso de la batería. En comparación, un solo marco UIImage es estático y no necesita volver a procesarse.
  • Algunos dispositivos pueden tener dificultades para procesar el mapa si tienes muchos marcadores en pantalla y cada marcador tiene su propio UIView, y todos los marcadores realizan un seguimiento de los cambios al mismo tiempo.
  • Un iconView no responde a la interacción del usuario, ya que es una instantánea de la vista.
  • La vista se comporta como si clipsToBounds estuviera configurado como YES, sin importar su valor real. Puedes aplicar transformaciones que funcionen fuera de los límites, pero el objeto que dibujes debe estar dentro de los límites del objeto. Todas las transformaciones o los cambios se supervisan y aplican. En resumen, las subvistas deben estar dentro de la vista.

Para decidir cuándo configurar la propiedad tracksViewChanges, debes comparar las consideraciones de rendimiento con las ventajas de que el marcador se vuelva a dibujar de forma automática. Por ejemplo:

  • Si tienes que realizar una serie de cambios, puedes cambiar la propiedad a YES y, luego, a NO.
  • Cuando se ejecuta una animación o los contenidos se cargan de forma asíncrona, debes establecer la propiedad en YES hasta que se completen las acciones.

Cómo cambiar la opacidad de los marcadores

Puedes controlar la opacidad de un marcador con su propiedad opacity. Debes especificar la opacidad como un valor flotante entre 0.0 y 1.0, en el que 0 es una transparencia total y 1 una opacidad total.

Swift

marker.opacity = 0.6
      

Objective‑C

marker.opacity = 0.6;
      

Puedes animar la opacidad de los marcadores con Core Animation mediante GMSMarkerLayer.

Cómo compactar un marcador

Los íconos de marcadores normalmente se dibujan orientados respecto de la pantalla del dispositivo en lugar de hacerlo en la superficie del mapa. Por lo tanto, rotar, inclinar o acercar el mapa no necesariamente cambia la orientación del marcador.

Puedes configurar la orientación de un marcador de modo que se vea plano respecto de la Tierra. Los marcadores planos rotan cuando se rota el mapa y cambian de perspectiva cuando este se inclina. Al igual que los marcadores normales, los marcadores planos conservan el tamaño cuando se aplica zoom de acercamiento o alejamiento al mapa.

Para cambiar la orientación del marcador, establece la propiedad flat del marcador en YES o true.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective‑C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

Cómo girar un marcador

Puedes rotar un marcador sobre su punto de anclaje configurando la propiedad rotation. Especifica la rotación como un tipo CLLocationDegrees, que se mide en grados en sentido horario desde la posición predeterminada. Cuando el marcador se encuentra plano sobre el mapa, la posición predeterminada es el norte.

En el siguiente ejemplo, el marcador rota 90°. Al configurar la propiedad groundAnchor en 0.5,0.5, el marcador rota sobre su centro, en lugar de su base.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective‑C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Cómo controlar eventos en marcadores

Puedes escuchar eventos que tienen lugar en el mapa, como cuando un usuario presiona un marcador. Para escuchar eventos, debes implementar el protocolo GMSMapViewDelegate. Consulta la guía de eventos y la lista de métodos de GMSMapViewDelegate. Para ver eventos de Street View, consulta GMSPanoramaViewDelegate.