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
importGoogleMapsclassMapStyling:UIViewController{// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing the URL of the local file.ifletstyleURL=Bundle.main.url(forResource: "style",withExtension: "json"){mapView.mapStyle=tryGMSMapStyle(contentsOfFileURL:styleURL)}else{NSLog("Unabletofindstyle.json")}}catch{NSLog("Oneormoreofthemapstylesfailedtoload.\(error)")}self.view=mapView}}
Objective-C
#import "MapStyling.h"
@importGoogleMaps;@interfaceMapStyling()@end@implementationMapStyling// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSBundle*mainBundle=[NSBundlemainBundle];NSURL*styleUrl=[mainBundleURLForResource:@"style"withExtension:@"json"];NSError*error;// Set the map style by passing the URL for style.json.GMSMapStyle*style=[GMSMapStylestyleWithContentsOfFileURL:styleUrlerror:&error];if(!style){NSLog(@"Thestyledefinitioncouldnotbeloaded:%@",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
classMapStylingStringResource:UIViewController{letMapStyle= "JSON_STYLE_GOES_HERE"
// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing a valid JSON string.mapView.mapStyle=tryGMSMapStyle(jsonString:MapStyle)}catch{NSLog("Oneormoreofthemapstylesfailedtoload.\(error)")}self.view=mapView}}
Objective-C
@implementationMapStylingStringResource// Paste the JSON string to use.staticNSString*constkMapStyle=@"JSON_STYLE_GOES_HERE";// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSError*error;// Set the map style by passing a valid JSON string.GMSMapStyle*style=[GMSMapStylestyleWithJSONString:kMapStyleerror:&error];if(!style){NSLog(@"Thestyledefinitioncouldnotbeloaded:%@",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.