Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar el Google Maps SDK for iOS

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar el Google Maps SDK for iOS
  3. Crear claves correspondientes
Continuar

Marcadores

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 o reemplazar la imagen del marcador por un ícono personalizado, o bien cambiar otras propiedades del marcador.

Agregar un marcador

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

En el ejemplo siguiente se demuestra la manera de agregar un marcador a un objeto GMSMapView existente. Se crea el marcador en las coordenadas 10,10 y se muestra la string “Hello World” en una ventana de información al hacer clic.

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 agregar animación a la incorporación de nuevos marcadores al mapa fijando la propiedad marker.appearAnimation en kGMSMarkerAnimationPop.

Eliminar un marcador

Puedes quitar un marcador del mapa configurando la propiedad map de GMSMarker en nil. También puedes quitar todas las superposiciones (incluidos los marcadores) que se encuentren actualmente en el mapa llamando 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 posteriormente aplicando cambios a este objeto.

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

Cambiar el color del marcador

Puedes personalizar el color de la imagen de marcador predeterminada solicitando una versión matizada del icono predeterminado mediante markerImageWithColor: y pasando la imagen resultante a la propiedad del icono de GMSMarker.

Swift

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

Objective-C

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

Personalizar la imagen de los marcadores

Si deseas cambiar la imagen predeterminada para el marcador, puedes configurar un ícono personalizado usando las propiedades icon o iconView del marcador.

Si iconView está configurado, la API ignora la propiedad icon. Las actualizaciones de la propiedad icon actual no se reconocen cuando se fija iconView.

Usa la propiedad icon del marcador

Con el siguiente fragmento de código 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 de código se supone que tu aplicación contiene una imagen con el nombre “house.png”.

Swift

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

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
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 marcador. 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, que resulta útil si un marcador tiene sombra u otra área no utilizable.

Usa la propiedad iconView del marcador

A través del siguiente fragmento de código, 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 de código se supone que tu aplicación contiene una imagen con el nombre “house.png”.

Swift

import UIKit
import GoogleMaps

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

  override func loadView() {

    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 "ViewController.h"
@import GoogleMaps;

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

@implementation ViewController {
  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:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

Debido a que iconView acepta UIView, puedes tener una jerarquía de controles de IU estándares que definan tus marcadores, y hacer que cada vista cuente con el conjunto estándar de capacidades de animación. Puedes incluir cambios en el tamaño, el color y los niveles alfa del marcador, y también aplicar transformaciones arbitrarias. La propiedad iconView admite animación de todas las propiedades de UIView que pueden animarse, a excepción de frame y center.

Ten en cuenta las siguientes observaciones cuando uses iconView:

  • UIView puede demandar recursos cuando tracksViewChanges se fija en YES, lo que puede generar un mayor consumo de batería. En comparación, un UIImage de un solo fotograma es estático y no necesita volver a representarse.
  • Es posible que en algunos dispositivos sea difícil representar el mapa si hay muchos marcadores en la pantalla, cuando 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 simplemente un resumen de la vista.
  • La vista se comporta como si clipsToBounds estuviera fijado 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 y modificaciones se controlan y se aplican. En resumen, las vistas secundarias deben estar dentro de la vista.

Para decidir el momento en que configurarás la propiedad tracksViewChanges, debes evaluar las consideraciones de rendimiento y las ventajas de que el marcador se vuelva a dibujar automáticamente. Por ejemplo:

  • Si necesitas realizar una serie de modificaciones, puedes cambiar la propiedad a YES y luego fijarla de nuevo en NO.
  • Cuando se ejecute una animación o se están carguen contenidos de forma asincrónica, deberás mantener la propiedad fijada en YES hasta que se completen las acciones.

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, donde 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 del marcador con Core Animation a través de GMSMarkerLayer.

Aplanar un marcador

Los íconos de marcadores normalmente se dibujan orientados respecto de la pantalla del dispositivo en lugar de la superficie del mapa. Por ello, la rotación, la inclinación o el zoom del mapa no modifican necesariamente la orientación del marcador.

Puedes configurar la orientación de un marcado de modo que se vea plano respecto de la Tierra. Los marcadores planos giran cuando lo mismo sucede con el mapa, y su perspectiva cambia cuando el mapa se inclina. Al igual que los marcadores convencionales, los marcadores planos conservan el tamaño cuando se aplica zoom de acercamiento o alejamiento al mapa.

Para cambiar la orientación del marcador, fija el valor de la propiedad flat de este en YES o true.

Swift

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

Objective-C

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

Girar un marcador

Puedes hacer girar 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 gira 90°. Cuando se fija la propiedad groundAnchor en 0.5,0.5, el marcador gira sobre su centro en lugar de su base.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

Agregar una ventana de información

Usa una ventana de información para mostrar información al usuario cuando este presione un marcador. Solo se muestra una de estas ventanas a la vez. Si un usuario presiona otro marcador, se ocultará la ventana que esté abierta y se abrirá la ventana de información nueva. El contenido de la ventana de información se define a través de las propiedades title y snippet. Cuando se hace clic en el marcador, no se muestra una ventana de información si las propiedades title y snippet están vacías o su valor es nil.

Con el fragmento de código siguiente, se crea un marcador simple que lleva solo un título para el texto de la ventana de información.

Swift

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

Objective-C

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

Con la propiedad snippet, puedes agregar texto que aparecerá debajo del título en una fuente más pequeña. Las strings más extensas que el ancho de la ventana de información se ajustan automáticamente en varias líneas. Se truncarán los mensajes muy largos.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Configurar una ventana de información para que se actualice automáticamente

Fija tracksInfoWindowChanges en el marcador en el valor YES o true si deseas que las nuevas propiedades o el contenido de la ventana de información se muestren de inmediato cuando se modifiquen, en lugar de tener que esperar hasta que la ventana de información se oculte y luego vuelva a aparecer. La configuración predeterminada es NO o false.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

Para decidir el momento en que se configurará la propiedad tracksInfoWindowChanges, debes evaluar las consideraciones de rendimiento y las ventajas de que la ventana de información se vuelva a dibujar automáticamente. Por ejemplo:

  • Si necesitas realizar una serie de modificaciones, puedes cambiar la propiedad a YES y luego fijarla de nuevo en NO.
  • Cuando se ejecute una animación o se están carguen contenidos de forma asincrónica, deberás mantener la propiedad fijada en YES hasta que se completen las acciones.

Consulta también las notas que deben tenerse en cuenta cuando uses la propiedad iconView del marcador.

Cambiar la posición de una ventana de información

Las ventanas de información se dibujan orientadas conforme a la pantalla del dispositivo y centradas encima de los marcadores asociados. Puedes modificar la posición de la ventana de información respecto del marcador configurando la propiedad infoWindowAnchor. Esta propiedad acepta un CGPoint, definido como una desviación (x,y) en la cual x e y varían de 0.0 a 1.0. La desviación predeterminada es (0.5, 0.0); es decir, el centro de la parte superior. Configurar la desviación de infoWindowAnchor resulta útil para alinear la ventana de información respecto de un icono.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Administrar eventos en marcadores y ventanas de información

Puedes escuchar eventos que tienen lugar en el mapa, como los que se producen cuando el usuario toca un marcador en una ventana de información. Para escuchar eventos, debes implementar el protocolo GMSMapViewDelegate. Consulta la guía de eventos y la lista de métodos de GMSMapViewDelegate. Para obtener información sobre eventos de Street View, consulta GMSPanoramaViewDelegate.

Enviar comentarios sobre…

Google Maps SDK for iOS
Google Maps SDK for iOS
¿Necesitas ayuda? Visita nuestra página de asistencia.