Cómo agregar un mapa con un marcador

En este instructivo, se muestra cómo agregar un mapa de Google Maps a tu app para iOS. El mapa incluye un marcador, el cual indica una ubicación específica.

Obtén el código

Clona o descarga el repositorio de muestras de Google Maps para iOS desde GitHub.

< > Mostrar/ocultar el código Swift para el controlador de vista del mapa

/*
 * Copyright 2020 Google Inc. All rights reserved.
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}

< > Mostrar/ocultar el código Objective-C del controlador de vista de mapa

/*
* Copyright 2020 Google Inc. All rights reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end

Configura tu proyecto de desarrollo

Sigue estos pasos para instalar el SDK de Maps para iOS:

1. Descarga e instala Xcode 13.0 o una versión posterior.
2. Si todavía no tienes CocoaPods, instálalo en macOS ejecutando el siguiente comando desde la terminal:

   sudo gem install cocoapods

3. Clona o descarga el repositorio de muestras de Google Maps para iOS.
4. Navega al directorio tutorials/map-with-marker.
5. Ejecuta el comando pod install. Con esto, se instalarán las API especificadas en el archivo Podfile, junto con las dependencias que puedan contener.
6. Ejecuta pod outdated para comparar la versión del pod instalada con las actualizaciones nuevas. Si se detecta una versión nueva, ejecuta pod update para actualizar Podfile e instalar el SDK más reciente. Para obtener más detalles, consulta la Guía de CocoaPods.
7. Abre (doble clic) el archivo map-with-marker.xcworkspace del proyecto para abrirlo en Xcode. Debes usar el archivo .xcworkspace para abrir el proyecto.

Obtén una clave de API y habilita las API necesarias

Si deseas completar este instructivo, necesitas una clave de API de Google autorizada a fin de utilizar Maps SDK for iOS. Haz clic en el siguiente botón para obtener una clave y activar la API.

Comenzar

Para obtener más detalles, consulta Obtén una clave de API.

Agrega la clave de API a tu aplicación

Agrega tu clave de API a AppDelegate.swift de la siguiente manera:

1. Ten en cuenta que se agregó la siguiente instrucción de importación al archivo:

   import GoogleMaps

2. Edita la siguiente línea de tu método application(_:didFinishLaunchingWithOptions:) y reemplaza YOUR_API_KEY por tu clave de API:

   GMSServices.provideAPIKey("YOUR_API_KEY")

Nota: El código de muestra del instructivo completo está configurado para ejecutarse como un proyecto de Swift Xcode, pero incluye ejemplos de Swift y Objective-C.

Cómo compilar y ejecutar tu app

1. Conecta un dispositivo iOS a tu computadora o selecciona un simulador en el menú emergente de esquemas de Xcode.
2. Si usas un dispositivo, asegúrate de que los servicios de ubicación estén habilitados. Si usas un simulador, selecciona una ubicación en el menú Funciones.
3. En Xcode, haz clic en la opción Product/Run del menú (o en el ícono del botón de reproducción).
• Xcode compila la app y la ejecuta en el dispositivo o en el simulador.
• Deberías ver un mapa con un marcador centrado en Sídney, en la costa este de Australia, similar al de la imagen en esta página.

Solución de problemas:

• Si no ves un mapa, verifica si obtuviste una clave de API y la agregaste a la app, como se describió anteriormente. Revisa la consola de depuración de Xcode y busca mensajes de error sobre la clave de API.
• Si restringiste la clave de API mediante el identificador de paquete de iOS, edita la clave para agregar el identificador de paquete para la app: com.google.examples.map-with-marker.
• Asegúrate de tener una buena conexión de wifi o GPS.
• Usa las herramientas de depuración de Xcode para ver los registros y depurar la app.

Comprende el código

1. Crea un mapa y configúralo como la vista en loadView().

   Swift

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
   let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
   view = mapView
         

   Objective‑C

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                           longitude:151.20
                                                                zoom:6.0];
   GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
   self.view = mapView;
         

2. Agrega un marcador al mapa en loadView().

   Swift

   // Creates a marker in the center of the map.
   let marker = GMSMarker()
   marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
   marker.title = "Sydney"
   marker.snippet = "Australia"
   marker.map = mapView
         

   Objective‑C

   // Creates a marker in the center of the map.
   GMSMarker *marker = [[GMSMarker alloc] init];
   marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
   marker.title = @"Sydney";
   marker.snippet = @"Australia";
   marker.map = mapView;
         

De forma predeterminada, el SDK de Maps para iOS muestra el contenido de la ventana de información cuando el usuario presiona un marcador. Si deseas utilizar el comportamiento predeterminado, no es necesario agregar un objeto de escucha de clics para el marcador.

¡Felicitaciones! Compilaste una app para iOS que muestra un mapa de Google Maps con un marcador a fin de indicar una ubicación en particular. También aprendiste a utilizar el SDK de Maps para iOS.

Próximos pasos

Obtén más información sobre el objeto de mapa y lo que puedes hacer con los marcadores.