Pronto habrá nuevas opciones para el diseño de mapas disponibles en Google Maps Platform. Esta actualización del diseño de mapas incluye una nueva paleta de colores predeterminada, así como mejoras en la experiencia y la usabilidad del mapa. Todos los diseños de mapa se actualizarán automáticamente en marzo de 2025. Para obtener más información sobre la disponibilidad y cómo habilitar esta actualización antes, consulta Nuevo diseño de mapa para Google Maps Platform.
Esta página es una guía rápida para aplicar diseño a tu mapa con el modo nocturno como ejemplo.
Descripción general
Con las opciones de diseño, puedes personalizar la presentación de los diseños de mapa estándares de Google y cambiar la representación visual de ciertos componentes, como rutas, parques, negocios y otros lugares de interés. Esto significa que puedes resaltar determinados componentes del mapa o hacer que este complemente el diseño de tu app.
El diseño solo funciona en el tipo de mapa kGMSTypeNormal.
Cómo aplicar diseños a tu mapa
Si deseas aplicar diseños de mapa personalizados a un mapa, llama a GMSMapStyle(...) para crear un
GMSMapStyle, pasa una URL para un archivo JSON local o un archivo JSON
o una cadena que contiene definiciones de estilo. Asigna la instancia GMSMapStyle al
La propiedad mapStyle del mapa.
Usa un archivo JSON
En los siguientes ejemplos, se muestra cómo llamar a GMSMapStyle(...) y pasar una URL para un
archivo 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 las opciones de estilo, agrega un archivo nuevo a tu proyecto llamado style.json.
Luego, pega la siguiente declaración de diseño JSON para el diseño de modo nocturno:
En los siguientes ejemplos, se muestra cómo llamar a GMSMapStyle(...) y pasar un recurso de
cadena:
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 las opciones de estilo, pega la siguiente cadena de estilo como el valor de
la variable kMapStyle:
En los mapas con diseños, se utilizan dos conceptos para aplicar colores y otros cambios de diseño a un mapa:
Los selectores especifican los componentes geográficos a los que puedes ajustarles el diseño en el mapa. Estos componentes incluyen rutas, parques y masas de agua, entre otros, así como sus respectivas etiquetas. Los selectores incluyen componentes y elementos, que se especifican como propiedades featureType y elementType.
Los parámetros de diseño son propiedades de color y visibilidad que puedes aplicar a los elementos del mapa. Definen el color de visualización a través de una combinación de valores de tonalidad, color y luminosidad o gamma.
Consulta la referencia de diseño para acceder a una descripción detallada de las opciones de diseño del objeto JSON.
Utiliza el Asistente de diseño de Maps Platform como una forma rápida.
para generar un objeto de diseño JSON. El SDK de Maps para iOS admite el
las mismas declaraciones de estilo
que la API de Maps JavaScript.
Muestras de código completas
El repositorio ApiDemos en GitHub incluye ejemplos que muestran el uso de los ajustes de diseño.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2024-09-12 (UTC)"],[],[]]