Em breve, a Plataforma Google Maps usará a nova estilização de mapas. Essa atualização inclui uma nova paleta de cores padrão e melhorias nas experiências de mapa e na usabilidade. Todos os estilos de mapa serão atualizados automaticamente em março de 2025. Para mais informações sobre a disponibilidade e como ativar logo, consulte Novo estilo de mapa para a Plataforma Google Maps.
Esta página é um guia rápido para estilizar seu mapa usando o modo noturno como exemplo.
Visão geral
Com opções de estilo, você pode personalizar a apresentação dos recursos padrão
estilos de mapa, alterando o visual de recursos como vias, parques,
empresas e outros pontos de interesse. Isso significa que é possível enfatizar componentes específicos ou deixar o mapa combinando com o estilo do seu app.
Os estilos só funcionam no tipo de mapa kGMSTypeNormal.
Aplicar estilos ao mapa
Para aplicar estilos de mapa personalizados a um mapa, chame GMSMapStyle(...) para criar um
instância GMSMapStyle, transmitindo um URL para um arquivo JSON local ou
string contendo definições de estilo. Atribua a instância GMSMapStyle ao
mapStyle do mapa.
Usando um arquivo JSON
Os exemplos a seguir mostram a chamada de GMSMapStyle(...) e a transmissão de um URL para uma
arquivo local:
Swift
import GoogleMaps
class MapStyling: 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
#import "MapStyling.h"
@import GoogleMaps;
@interface MapStyling ()
@end
@implementation MapStyling
// 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 JSON para o estilo do modo noturno:
Os exemplos a seguir mostram a chamada de GMSMapStyle(...) e a transmissão de uma string
recurso:
Swift
class MapStylingStringResource: UIViewController {
let MapStyle = "JSON_STYLE_GOES_HERE"
// 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: MapStyle)
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
Objective-C
@implementation MapStylingStringResource
// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";
// 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 valor de
a variável kMapStyle:
Os mapas estilizados usam dois conceitos para aplicar cores e outras mudanças de estilo:
Os seletores especificam os componentes geográficos que você pode personalizar no mapa. Por exemplo: vias, parques, corpos d'água e muito mais, bem como as etiquetas. Os seletores incluem recursos e elementos, especificados como propriedades featureType e elementType.
Os estilizadores são propriedades de cor e visibilidade que você pode aplicar aos elementos do mapa. Eles definem a cor mostrada usando uma combinação de valores de matiz, cor e iluminação/gama.
Consulte a referência de estilo para conferir uma descrição detalhada das opções de estilo JSON.
Use o assistente de estilo da Plataforma Google Maps para agilizar o processo.
para gerar um objeto de estilo JSON. O SDK do Maps para iOS é compatível com
mesmas declarações de estilo da API Maps JavaScript.
Exemplos de código completos
O repositório ApiDemos (em inglês) no GitHub inclui exemplos que demonstram o uso dos estilos.