Marcadores

Los marcadores indican ubicaciones únicas en el mapa.

De forma predeterminada, los marcadores usan un ícono estándar que tiene el aspecto y la apariencia comunes 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. Las ventanas de información son cuadros de diálogo que muestran texto o imágenes encima del marcador. Puedes usar una ventana de información predeterminada para mostrar texto o crear tu propia ventana de información personalizada para controlar por completo su contenido.

Cómo agregar un marcador

Para agregar un marcador, crea un objeto GMSMarker que incluya un position y un title, y establece 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 cadena "Hello world" en una ventana de información cuando se hace clic en él.

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

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

Para animar la adición de marcadores nuevos al mapa, configura la propiedad marker.appearAnimation en lo siguiente:

• kGMSMarkerAnimationPop para que el marcador salga de su groundAnchor cuando se agregue.
• kGMSMarkerAnimationFadeIn para que el marcador se muestre gradualmente cuando se agregue.

Cómo quitar un marcador

Para quitar un marcador del mapa, configura la propiedad map de GMSMarker como nil. Como alternativa, puedes quitar todas las superposiciones (incluidos los marcadores) que se encuentran actualmente en el mapa llamando al método clear de GMSMapView.

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

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

Si deseas modificar un marcador después de haberlo agregado al mapa, asegúrate de conservar el objeto GMSMarker. Puedes modificar el marcador más adelante si realizas cambios en este objeto.

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

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 del marcador predeterminado, solicita una versión con tintes del ícono predeterminado con markerImageWithColor: y pasa la imagen resultante a la propiedad de ícono de GMSMarker.

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

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

Cómo personalizar la imagen del marcador

Si deseas cambiar la imagen del marcador predeterminado, puedes establecer un ícono personalizado con la propiedad icon o iconView del marcador. Si se configura iconView, la API ignora la propiedad icon.

Usa 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 asume que tu aplicación contiene una imagen llamada "casa.png".

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
      

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 tu 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 o alguna otra región inutilizable.

Usa la propiedad iconView del marcador

En el siguiente fragmento, se crea un marcador con un ícono personalizado configurando la propiedad iconView del marcador y se anima un cambio en el color del marcador. En el fragmento, se supone que tu aplicación contiene una imagen llamada "casa.png".

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
    })
  }
}
      

@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, cada vista con el conjunto estándar de capacidades de animación. Puedes incluir cambios en el tamaño, el color y los niveles de alfa del marcador, así como aplicar transformaciones arbitrarias. La propiedad iconView admite la animación de todas las propiedades animables de UIView, excepto frame y center.

Ten en cuenta las siguientes consideraciones cuando uses iconView:

• UIView puede ser exigente en cuanto a los recursos cuando tracksViewChanges se establece en YES, lo que puede aumentar el uso de batería. En comparación, un UIImage de un solo fotograma es estático y no es necesario volver a renderizarlo.
• Es posible que algunos dispositivos tengan dificultades para renderizar el mapa si tienes muchos marcadores en pantalla, cada uno tiene su propio UIView y todos los marcadores hacen un seguimiento de los cambios al mismo tiempo.
• Un iconView no responde a la interacción del usuario, ya que es un resumen de la vista.
• La vista se comporta como si clipsToBounds estuviera configurado en YES, independientemente de 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 contenidas dentro de la vista.

Para decidir cuándo establecer la propiedad tracksViewChanges, debes sopesar las consideraciones de rendimiento en función de las ventajas de volver a dibujar el marcador automáticamente. Por ejemplo:

• Si tienes que realizar una serie de cambios, puedes cambiar la propiedad a YES y, luego, volver a NO.
• Cuando se ejecuta una animación o se carga el contenido de forma asíncrona, debes mantener la propiedad configurada en YES hasta que se completen las acciones.

Cómo cambiar la opacidad del marcador

Puedes controlar la opacidad de un marcador con su propiedad opacity. Debes especificar la opacidad como un número de punto flotante entre 0.0 y 1.0, donde 0 es completamente transparente y 1 es completamente opaco.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

Puedes animar la opacidad del marcador con Core Animation usando GMSMarkerLayer.

Cómo configurar un marcador plano

Por lo general, los íconos de marcador se dibujan orientados respecto de la pantalla del dispositivo en lugar de la superficie del mapa, por lo que rotar, inclinar o acercar el mapa no cambia necesariamente 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 se inclina. Al igual que con los marcadores normales, los marcadores planos conservan su tamaño cuando se acerca o aleja el mapa.

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

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

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

Cómo rotar un marcador

Para rotar un marcador alrededor de su punto de anclaje, configura la propiedad rotation. Especifica la rotación como un tipo CLLocationDegrees, medido en grados en el sentido de las manecillas del reloj desde la posición predeterminada. Cuando el marcador está plano en el mapa, la posición predeterminada es el norte.

En el siguiente ejemplo, se rota el marcador 90°. Si configuras la propiedad groundAnchor en 0.5,0.5, el marcador se rota alrededor de su centro, en lugar de su base.

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

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

Cómo controlar eventos en marcadores

Puedes escuchar los eventos que ocurren en el mapa, como cuando un usuario presiona un marcador. Para escuchar eventos, debes implementar el protocolo GMSMapViewDelegate. Consulta eventos y gestos de marcadores para aprender a controlar eventos de marcadores específicos. La guía de eventos también proporciona una lista de métodos en GMSMapViewDelegate. Para los eventos de Street View, consulta GMSPanoramaViewDelegate.