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

Formas

A Google Maps SDK for iOS oferece algumas formas simples de adicionar formas a mapas. As seguintes formas são permitidas:

  • Uma polilinha é uma série de segmentos de linha conectados que pode criar qualquer forma desejada para marcar caminhos e rotas no mapa.
  • Um polígono é uma forma delimitada que pode ser usada para marcar áreas no mapa.
  • Um círculo é uma projeção geograficamente precisa de um círculo na superfície do planeta.

É possível modificar a aparência de cada forma de diversas maneiras.

Polilinhas

As polilinhas permitem desenhar linhas no mapa. Um objeto GMSPolyline representa uma sequência ordenada de localizações, exibida como uma série de segmentos de linha. Defina a cor de uma polilinha com GMSStrokeStyle.

Para criar uma polilinha, será necessário especificar o caminho criando um objeto GMSMutablePath correspondente com dois ou mais pontos. Cada CLLocationCoordinate2D representa um ponto na superfície do planeta. Os segmentos da linha são desenhados entre os pontos de acordo com a ordem em que são adicionados ao caminho. Adicione pontos ao caminho com o método addCoordinate: ou addLatitude:longitude:.

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude: 151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude: 151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude: 151.41))
let polyline = GMSPolyline(path: path)

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

Adicionar uma polilinha

  1. Crie um objeto GMSMutablePath.
  2. Defina os pontos no caminho com o método addCoordinate: ou addLatitude:longitude:.
  3. Instancie um novo objeto GMSPolyline usando o caminho como argumento.
  4. Defina outras propriedades, como strokeWidth e strokeColor, conforme a necessidade.
  5. Defina a propriedade map da GMSPolyline.
  6. A polilinha é exibida no mapa.

O fragmento de código a seguir adiciona um retângulo a um mapa:

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))

let rectangle = GMSPolyline(path: path)
rectangle.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView;

Uma polilinha retangular

Remover uma polilinha

Remova uma polilinha do mapa definindo a propriedade map do GMSPolyline como nil. Como alternativa, remova todas as sobreposições (inclusive polilinhas e outras formas) existentes no mapa chamando o método GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683,
                                      longitude: 151.2086,
                                      zoom:12)
let mapView = GMSMapView.map(withFrame: self.view.bounds, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:12];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
...
[mapView clear];

Se você quiser fazer alterações em uma polilinha após adicioná-la ao mapa, não deixe de manter uma referência ao objeto GMSPolyline. A polilinha poderá ser modificada posteriormente fazendo alterações nesse objeto.

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .black

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blackColor];

Personalizar uma polilinha

O objeto GMSPolyline oferece diversas propriedades para controlar a aparência da linha. Ele oferece as seguintes opções:

strokeWidth
A largura de toda a linha, em pontos de tela. O valor padrão é 1. A largura não é alterada com a mudança do zoom do mapa.
geodesic
Se YES, renderiza essa margem de polilinha como geodésica. Os segmentos geodésicos seguem o menor caminho sobre a superfície do planeta e podem ser exibidos como linhas curvas em um mapa com projeção Mercator. Os segmentos não geodésicos são desenhados como linhas retas no mapa. O valor padrão é NO.
spans
Usado para especificar a cor de um ou mais segmentos em uma polilinha. A propriedade spans é uma matriz de objetos GMSStyleSpan . A definição da propriedade spans é a forma recomendada de alterar a cor de uma polilinha.
strokeColor
Um objeto UIColor que especifica a cor da polilinha. O valor padrão é blueColor. A propriedade strokeColor é ignorada se spans é definido.

O fragmento a seguir adiciona uma polilinha azul grossa de Melbourne a Perth com interpolação geodésica.

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;

Para modificar uma polilinha depois de adicioná-la ao mapa, não deixe de manter o objeto GMSPolyline.

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .blue

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blueColor];

Alterar a cor de uma polilinha

As polilinhas são desenhadas como uma série de segmentos no mapa. Você pode alterar a cor de segmentos individuais ou de toda a linha com a propriedadespans. Embora essa propriedade ofereça controle detalhado sobre a cor de uma polilinha, há várias conveniências para facilitar a aplicação de um único estilo a toda a linha.

O fragmento abaixo usa o método spanWithColor: para alterar a cor de toda a linha para vermelho.

Swift

polyline.spans = [GMSStyleSpan(color: .red)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];

Como alternativa, se você já tem acesso a um objeto GMSStrokeStyle, pode usar o método spanWithStyle:.

Swift

let solidRed = GMSStrokeStyle.solidColor(.red)
polyline.spans = [GMSStyleSpan(style: solidRed)]

Objective-C

GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed]];

Antes da versão 1.7 do Google Maps SDK for iOS, havia uma única propriedade, strokeColor, para definir toda a cor de uma GMSPolyline. A propriedade spans tem precedência sobre strokeColor.

Swift

polyline.strokeColor = .red

Objective-C

polyline.strokeColor = [UIColor redColor];

Estilos

Se o aplicativo aplica a mesma cor de traço várias vezes, é útil definir um estilo reutilizável. Os estilos de polilinha são especificados usando o objeto GMSStrokeStyle. Um estilo de traço pode ser uma cor sólida ou um gradiente de uma cor para outra. Após criar um estilo, você pode aplicá-lo a um GMSStyleSpan com o método spanWithStyle:.

Swift

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)

Objective-C

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];

O estilo de um span continua até o fim da polilinha ou até que um novo estilo seja definido. Altere a cor de toda a linha definindo a propriedade spans de uma polilinha como um único GMSStyleSpan. O fragmento abaixo demonstra como aplicar um gradiente em todo o comprimento da polilinha.

Swift

let polyline = GMSPolyline(path: path)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];

Alterar a cor de segmentos de linha individuais

Para aplicar um estilo a cada segmento individual da polilinha, crie uma matriz de objetos GMSStyleSpan e passe-a para a propriedade spans. Por padrão, cada item da matriz define a cor do segmento de linha correspondente. Se há mais elementos na matriz que segmentos na linha, os segmentos extra são ignorados. Se há menos elementos na matriz, o GMSStyleSpan final descreve a cor do restante da linha.

Use blocos de cor e/ou polilinhas com gradiente para indicar mudanças ao longo das polilinhas, como um aumento de velocidade. O fragmento abaixo define a cor dos dois primeiros segmentos de uma polilinha como vermelho, e o restante da linha é um gradiente de vermelho para amarelo.

Swift

let polyline = GMSPolyline(path: path)
let solidRed = GMSStrokeStyle.solidColor(.red)
let redYellow =
    GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:redYellow]];

Use o método spanWithStyle:segments: para definir o estilo de vários segmentos de uma vez. Por exemplo, o código a seguir é equivalente ao código acima. O comprimento do segmento do GMSStyleSpan final é sempre ignorado, pois o estilo é usado para descrever o resto da linha.

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments:2),
                  GMSStyleSpan(style: redYellow, segments:10)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2],
                   [GMSStyleSpan spanWithStyle:redYellow segments:10]];

Segmentos fracionários

Os segmentos também podem ser especificados como um valor fracionário. O estilo é aplicado ao número fracionário de segmentos, causando possivelmente uma divisão em um único segmento. Cada GMSStyleSpan começa imediatamente após o anterior. No exemplo a seguir, a cor cinza começa no ½ no segundo segmento e continua até ½ no terceiro segmento.

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments: 2.5),
                  GMSStyleSpan(color: .gray),
                  GMSStyleSpan(color: .purple, segments: 0.75),
                  GMSStyleSpan(style: redYellow)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2.5],
                   [GMSStyleSpan spanWithColor:[UIColor grayColor],
                   [GMSStyleSpan spanWithColor:[UIColor purpleColor] segments:0.75,
                   [GMSStyleSpan spanWithStyle:redYellow]];

Adicionar um padrão de cores repetido a uma polilinha

Para adicionar um padrão a uma polilinha, use o método utilitário GMSStyleSpans em GMSGeometryUtils. O método GMSStyleSpans aceita duas matrizes que definem um padrão repetido. Uma matriz define os estilos a repetir e a outra define o intervalo da repetição. Usadas em conjunto, é possível criar um padrão para aplicação em qualquer polilinha, independentemente do comprimento ou do número de segmentos disponíveis.

Por exemplo, o fragmento de código a seguir define uma polilinha com um padrão alternado branco e preto. Os comprimentos são tratados como metros em uma linha loxodrômica (na projeção Mercator, uma linha reta), pois o tipo é especificado como kGMSLengthRhumb.

Swift

let styles = [GMSStrokeStyle.solidColor(.white),
              GMSStrokeStyle.solidColor(.black)]
let lengths: [NSNumber] = [100000, 50000]
polyline.spans = GMSStyleSpans(polyline.path!, styles, lengths, kGMSLengthRhumb)

Objective-C

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor whiteColor]],
                    [GMSStrokeStyle solidColor:[UIColor blackColor]]];
NSArray *lengths = @[@100000, @50000];
polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);

Polígonos

Os polígonos são semelhantes às polilinhas. Ambos consistem em uma série de coordenadas em uma sequência ordenada. No entanto, em vez de abertos, os polígonos foram projetados para definir regiões sólidas em um loop fechado. Os polígonos são definidos no Google Maps SDK for iOS pela classe GMSPolygon.

Um GMSPolygon pode ser adicionado ao mapa da mesma forma que uma GMSPolyline. Primeiro, especifique o caminho criando um objeto GMSMutablePath correspondente e adicione pontos a ele. Esses pontos formarão o contorno do polígono. Cada CLLocationCoordinate2D representa um ponto na superfície do planeta. Os segmentos da linha são desenhados entre os pontos de acordo com a ordem em que são adicionados ao caminho.

Adicionar um polígono

  1. Crie um objeto GMSMutablePath.
  2. Defina os pontos no caminho com o método addCoordinate: ou addLatitude:longitude:. Esses pontos formarão o contorno do polígono.
  3. Instancie um novo objeto GMSPolygon usando o caminho como argumento.
  4. Defina outras propriedades, como strokeWidth, strokeColor e fillColor, conforme a necessidade.
  5. Atribua o polígono a um objeto GMSMapView definindo a propriedade GMSPolygon.map.
  6. O polígono é exibido no mapa.

O fragmento de código a seguir adiciona um retângulo a um mapa.

Swift

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView

Objective-C

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;

É possível personalizar a aparência do polígono antes e depois de adicioná-lo ao mapa.

Círculos

Além da classe genérica GMSPolygon, o Google Maps SDK for iOS também inclui GMSCircle, o que permite desenhar facilmente círculos na superfície do planeta.

Para construir um círculo, é preciso especificar estas duas propriedades:

  • position como um CLLocationCoordinate2D.
  • radius em metros.

Um círculo é definido como o conjunto de todos os pontos na superfície do planeta que estão a radius metros de um determinado center. Devido à forma como a projeção Mercator usada pela Maps API renderiza uma esfera em uma superfície plana, o círculo exibido será praticamente perfeito no mapa, quando localizado perto do equador, e será cada vez menos circular (na tela) à medida que se afasta do equador.

Adicionar um círculo

O fragmento de código a seguir adiciona um círculo ao mapa:

Swift

let circleCenter = CLLocationCoordinate2D(latitude: 37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circ.map = mapView;

É possível personalizar a aparência do círculo antes e depois de adicioná-lo ao mapa.

Personalizar um círculo

Você pode especificar cores e larguras de traço personalizadas modificando as propriedades de GMSCircle. Ele oferece as seguintes opções:

fillColor
Um objeto UIColor que especifica a cor interior do círculo. O padrão é transparente.
strokeColor
Um objeto UIColor que especifica a cor do contorno do círculo. O valor padrão é blackColor.
strokeWidth
A espessura do contorno do círculo, em pontos da tela. O valor padrão é 1. A espessura não é alterada com a mudança do zoom do mapa.

O fragmento a seguir adiciona um círculo vermelho grosso com um interior vermelho semitransparente.

Swift

let circleCenter = CLLocationCoordinate2D(latitude: 37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)

circ.fillColor = UIColor(red: 0.35, green: 0, blue: 0, alpha: 0.05)
circ.strokeColor = .red
circ.strokeWidth = 5
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];

circ.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
circ.strokeColor = [UIColor redColor];
circ.strokeWidth = 5;
circ.map = mapView;

Criar um polígono vazio

É possível combinar vários caminhos em um único objeto GMSPolygon para criar formas complexas, como anéis preenchidos ou roscas (onde as áreas poligonais são exibidas dentro do polígono como formas separadas). As formas complexas são uma composição de diversos caminhos.

Crie um polígono com um caminho que especifique a maior área coberta pelo polígono. Em seguida, especifique a propriedade holes do polígono como uma matriz de um ou mais objetos GMSPath, que definem os buracos no polígono.

Quando um caminho menor for totalmente incluído no caminho maior, parecerá que uma parte do polígono foi removida.

O exemplo de código a seguir cria um polígono com dois buracos:

Swift

override func loadView() {
  let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude: 151.21135)
  let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
  let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
  mapView.animate(to: camera)

  let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
  let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
  let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

  let polygon = GMSPolygon()
  polygon.path = GMSPath(fromEncodedPath: hydePark)
  polygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
  polygon.fillColor = UIColor(colorLiteralRed: 1.0, green: 0.0, blue: 0.0, alpha: 0.2)
  polygon.strokeColor = UIColor(colorLiteralRed: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
  polygon.strokeWidth = 2
  polygon.map = mapView
  view = mapView
}

Objective-C

- (void)loadView {
  CLLocationCoordinate2D hydeParkLocation = CLLocationCoordinate2DMake(-33.87344, 151.21135);
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:hydeParkLocation
                                                             zoom:16];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];

  NSString *hydePark = @"tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD";
  NSString *archibaldFountain = @"tlvmEqq|y[NNCXSJQOB[TI";
  NSString *reflectionPool = @"bewmEwk|y[Dm@zAPEj@{AO";

  GMSPolygon *polygon = [[GMSPolygon alloc] init];
  polygon.path = [GMSPath pathFromEncodedPath:hydePark];
  polygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                    [GMSPath pathFromEncodedPath:reflectionPool]];
  polygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
  polygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
  polygon.strokeWidth = 2;
  polygon.map = _mapView;
  self.view = _mapView;
}

Enviar comentários sobre…

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