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 um mapa usando o modo noturno como exemplo.
Visão geral
Com as opções de estilo, você pode personalizar a apresentação dos estilos de mapa padrão do Google, mudando 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.
Como aplicar estilos ao seu mapa
Para aplicar estilos de mapa personalizados a um mapa, chame GMSMapStyle(...) para criar uma
instância de GMSMapStyle, transmitindo um URL para um arquivo JSON local ou uma string JSON
com definições de estilo. Atribua a instância GMSMapStyle à propriedade mapStyle do mapa.
Usar um arquivo JSON
Os exemplos a seguir mostram a chamada de GMSMapStyle(...) e a transmissão de um URL para um
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("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"@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(@"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 o modo noturno:
Os exemplos a seguir mostram como chamar GMSMapStyle(...) e transmitir um recurso
de string:
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("One or more of the map styles failed to load. \(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(@"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:
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 como uma maneira rápida de gerar um objeto de estilo JSON. O SDK do Maps para iOS é compatível com as
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.
[null,null,["Última atualização 2024-12-22 UTC."],[[["This guide provides instructions for styling Google Maps using JSON to customize the appearance of map elements."],["You can style your map using a local JSON file or a JSON string, applying it to the `mapStyle` property of the map."],["JSON style declarations consist of selectors (`featureType`, `elementType`) to target map components and stylers to define their visual properties."],["Leverage the Maps Platform Styling Wizard to easily create custom JSON styles and apply them to your maps."],["Styling is applicable only to the `kGMSTypeNormal` map type and offers flexibility in highlighting or blending map features with your application's design."]]],[]]