Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ative o Google Maps SDK for iOS

Para começar, orientaremos você pelo Google Developers Console para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ative o Google Maps SDK for iOS
  3. Criar chaves apropriadas
Continuar

Estilização rápida de mapas - modo noturno

Esta página é um guia rápido para estilizar um mapa usando o modo noturno como exemplo.

Visão geral

Com opções de estilo, você pode personalizar a apresentação de estilos de mapas Google padrão, alterando o visual de recursos como vias, estacionamentos, estabelecimentos e outros pontos de interesse. Isso significa que você pode enfatizar componentes específicos do mapa ou fazer o mapa complementar o estilo da página do seu aplicativo.

A estilização só funciona no tipo de mapa kGMSTypeNormal.

Aplicar estilos a seu mapa

Para aplicar estilos de mapa personalizados a um mapa, chame GMSMapStyle(...) para criar uma instância de GMSMapStyle, passando um URL para um arquivo JSON local ou uma string JSON contendo definições de estilo. Atribua a instância de GMSMapStyle à propriedade mapStyle do mapa.

Usar um arquivo JSON

Os exemplos a seguir mostram a chamada de GMSMapStyle(...) passando um URL para um arquivo local:

Swift

O exemplo de código a seguir pressupõe que o projeto contém um arquivo chamado style.json:

import UIKit
import GoogleMaps

class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing the URL of the local file.
      if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
        mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
      } else {
        NSLog("Unable to find style.json")
      }
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective C

O exemplo de código a seguir pressupõe que o projeto contém um arquivo chamado style.json:

#import "ViewController.h"
@import GoogleMaps;

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSBundle *mainBundle = [NSBundle mainBundle];
  NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
  NSError *error;

  // Set the map style by passing the URL for style.json.
  GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}
@end

Para definir as opções de estilo, adicione um novo arquivo ao projeto chamado style.json e cole a seguinte declaração de estilo do JSON para estilização do modo noturno:

Usar um recurso de string

Os exemplos a seguir mostram a chamada de GMSMapStyle(...) passando um recurso de string:

Swift

import UIKit
import GoogleMaps

let kMapStyle = "[" +
"  {" +
"    \"featureType\": \"poi.business\"," +
"    \"elementType\": \"all\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }," +
"  {" +
"    \"featureType\": \"transit\"," +
"    \"elementType\": \"labels.icon\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }" +
"]"
class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Para definir as opções de estilo, cole a seguinte string de estilo como o valor da variável kMapStyle:

Objective C

#import "ViewController.h"
@import GoogleMaps;

// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";

@implementation ViewController

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSError *error;

  // Set the map style by passing a valid JSON string.
  GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}

@end

Para definir as opções de estilo, cole a seguinte string de estilo como o valor da variável kMapStyle:

Declarações de estilo do JSON

Os mapas estilizados usam dois conceitos para aplicar cores e outras alterações de estilo a um mapa:

  • Os seletores especificam os componentes geográficos que podem ser estilizados no mapa. Por exemplo, vias, parques, extensões de água e outros, bem como seus rótulos. Os seletores incluem recursos e elementos, especificados como as propriedades featureType e elementType.
  • Os estilizadores são propriedades de cor e visibilidade que podem ser aplicados a elementos do mapa. Definem a cor exibida por meio de uma combinação de valores de matiz, cor e brilho/gama.

Consulte a referência de estilo para ver uma descrição detalhada das opções de estilo do JSON.

Google Maps APIs Styling Wizard

Use o Google Maps APIs Styling Wizard como forma rápida de gerar um objeto de estilo do JSON. O Google Maps SDK for iOS permite as mesmas declarações de estilo que a Google Maps JavaScript API.

Exemplos de código completos

O repositório ApiDemos no GitHub inclui exemplos que demonstram o uso de estilos.

Próxima etapa

Veja como ocultar recursos no mapa com estilização.

Enviar comentários sobre…

Google Maps SDK for iOS
Google Maps SDK for iOS
Precisa de ajuda? Acesse nossa página de suporte.