Adicionar mapas com marcadores

Neste tutorial, mostramos como adicionar um mapa do Google ao seu app iOS, incluindo um marcador (também chamado de alfinete), para indicar um local específico.

Como conseguir o código

Clone ou faça o download do repositório de amostras do Google Maps para iOS do GitHub.

< > Mostre/oculte o código Swift do controlador de visualização 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 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
  }
}

< > Mostre/oculte o código Objective-C do controlador de visualização 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

Configurar seu projeto de desenvolvimento

Siga estas etapas para instalar o SDK do Maps para iOS:

1. Faça o download e instale o Xcode versão 14.0 ou mais recente.
2. Se você ainda não tem o CocoaPods, instale-o no macOS executando o seguinte comando no terminal:

   sudo gem install cocoapods

3. Clone ou faça o download do repositório de amostras do Google Maps para iOS.
4. Navegue até o diretório tutorials/map-with-marker.
5. Execute o comando pod install. Isso vai instalar as APIs especificadas no Podfile, com as respectivas dependências.
6. Execute pod outdated para comparar a versão do pod instalado com as novas atualizações. Se uma nova versão for detectada, execute pod update para atualizar a Podfile e instalar o SDK mais recente. Para mais detalhes, consulte o Guia do CocoaPods.
7. Abra (clique duas vezes) o arquivo map-with-marker.xcworkspace do projeto para abri-lo no Xcode. Use o arquivo .xcworkspace para abrir o projeto.

Gerar uma chave de API e ativar as APIs necessárias

Para concluir este tutorial, você precisa de uma chave de API do Google que possa usar o SDK do Maps para iOS. Clique no botão abaixo para acessar uma chave e ativar a API.

Começar

Para mais detalhes, consulte Gerar uma chave de API.

Adicionar a chave de API a seu aplicativo

Inclua sua chave de API ao AppDelegate.swift da seguinte maneira:

1. Observe que a seguinte instrução de importação foi adicionada ao arquivo:

   import GoogleMaps

2. Edite a linha a seguir no método application(_:didFinishLaunchingWithOptions:), substituindo YOUR_API_KEY pela chave de API:

   GMSServices.provideAPIKey("YOUR_API_KEY")

Observação:o exemplo de código do tutorial concluído está configurado para ser executado como um projeto do Xcode do Swift, mas inclui exemplos do Swift e Objective-C.

Compilar e executar seu app

1. Conecte um dispositivo iOS ao computador ou selecione um simulador no menu pop-up de esquema do Xcode.
2. Se estiver usando um dispositivo, certifique-se de que os Serviços de localização estejam ativados. Se você estiver usando um simulador, selecione um local no menu Recursos.
3. No Xcode, clique na opção de menu Product/Run ou no ícone do botão de reprodução.
• O Xcode cria o app e o executa no dispositivo ou no simulador.
• Será mostrado um mapa com um marcador centralizado em Sydney, na costa leste da Austrália, semelhante à imagem desta página.

Solução de problemas:

• Se o mapa não aparecer, confirme se você recebeu uma chave de API e a incluiu no app, como descrito acima. Verifique se há mensagens de erro sobre essa chave no console de depuração do Xcode.
• Se você restringiu a chave de API pelo identificador do pacote iOS, edite a chave para adicionar o identificador do pacote no app: com.google.examples.map-with-marker.
• Verifique se você tem uma boa conexão Wi-Fi ou GPS.
• Use as ferramentas de depuração do Xcode para conferir os registros e depurar o app.

Entender o código

1. Crie um mapa e o defina como a visualização no 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. Adicione um marcador ao mapa no 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;
         

Por padrão, o SDK do Maps para iOS exibe o conteúdo da janela de informações quando o usuário toca em um marcador. Não é preciso adicionar um listener de clique ao marcador se o comportamento padrão atende às suas expectativas.

Parabéns! Você criou um app iOS que mostra um mapa do Google com um marcador indicando um local específico. Além disso, aprendeu a usar o SDK do Maps para iOS.

Próximas etapas

Saiba mais sobre o objeto "map" e o que você pode fazer com os marcadores.