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. Las ventanas de información son las que muestran texto o imágenes en una ventana emergente encima del marcador. Puedes usar una ventana de información predeterminada para mostrar texto o crear una propia a fin de 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 string "Hola mundo" 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 si configuras la propiedad marker.appearAnimation
de la siguiente manera:
kGMSMarkerAnimationPop
para que el marcador aparezca desde sugroundAnchor
cuando se lo agregakGMSMarkerAnimationFadeIn
: para hacer que el marcador se atenúe cuando se agregue
Cómo quitar un marcador
Para quitar un marcador del mapa, configura la propiedad map
de GMSMarker
en nil
. Como alternativa, puedes quitar todas las superposiciones (incluidos los marcadores) que se encuentran 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
. Para modificar el marcador en otro momento, realiza cambios a 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 con matiz del ícono predeterminado mediante markerImageWithColor:
y pasa la imagen resultante a la propiedad del ícono del elemento 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 mediante la propiedad icon
o iconView
del marcador.
Si se configura iconView
, la API ignora la propiedad icon
. Las actualizaciones al 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. En el fragmento, se supone que tu aplicación contiene una imagen llamada “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 los marcadores. 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 cual es útil si un marcador tiene una sombra u otra región no utilizable.
Uso de la propiedad "iconView" del marcador
En el siguiente fragmento, se crea un marcador con un ícono personalizado mediante la configuración de la propiedad iconView
del marcador y se 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 que cada vista tenga el conjunto estándar de capacidades de animación. Puedes incluir cambios en el tamaño del marcador, el color y los niveles Alfa, así como aplicar transformaciones arbitrarias. La propiedad iconView
admite la animación de todas las propiedades de UIView
que se pueden animar, excepto frame
y center
.
Ten en cuenta las siguientes consideraciones cuando uses iconView
:
UIView
puede demandar recursos cuandotracksViewChanges
se establece enYES
, lo que puede generar un mayor uso de batería. En comparación, unUIImage
de un solo fotograma 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. - Una
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 comoYES
, 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 se aplican. En resumen, las vistas secundarias 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 manera automática. Por ejemplo:
- Si tienes que realizar una serie de cambios, puedes cambiar la propiedad a
YES
y, luego, volver aNO
. - Cuando se ejecuta una animación o se están cargando contenidos de forma asíncrona,
debes mantener la propiedad establecida 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 número de punto flotante entre 0.0 y 1.0, donde 0 es completamente transparente y 1 es completamente opaco.
Swift
marker.opacity = 0.6
Objective‑C
marker.opacity = 0.6;
Puedes animar la opacidad del marcador con Core Animation
mediante GMSMarkerLayer
.
Cómo compactar un marcador
En general, los íconos de marcadores se dibujan orientados respecto de la pantalla del dispositivo y no de la superficie del mapa. Por lo tanto, la rotación, la inclinación o el zoom del mapa no cambian 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 gira 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, configura 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 rotar un marcador
Puedes rotar un marcador sobre su punto de anclaje configurando la propiedad rotation
. Especifica la rotación como un tipo CLLocationDegrees
, medida en grados en sentido horario a partir de 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 en GMSMapViewDelegate
. Para obtener información sobre eventos de Street View, consulta GMSPanoramaViewDelegate
.