Mapas en Android – Google Maps Android API (4)

Curso Programación Android

Este artículo forma parte del Curso de Programación Android que tienes disponible de forma completamente gratuita en sgoliver.net

Con la nueva versión de los Google Play Services 9.6 (septiembre 2016, novedades) nos ha llegado la posibilidad de editar fácilmente y casi al detalle la apariencia completa de los mapas que utilizamos a través de la API de Google Maps para Android (aunque también para iOS y Web). Google lo anunciaba ayer mismo en su blog Geo Developers Blog, donde daba a conocer las novedades más importantes a este respecto.

Esta novedad nos llega en forma de nueva herramienta web, a la que han llamado Google Maps APIs Styling Wizard, con la que podremos dar el estilo que deseemos a nuestros mapas, todo de forma muy visual e intuitiva. Una vez definido el estilo que necesitamos podremos exportarlo a un fichero JSON que más tarde podremos utilizar para asignar dicho estilo a los mapas mostrados por nuestra aplicación Android.

google-maps-apis-styling-wizard

Si entramos por primera vez a esta nueva herramienta veremos la pantalla inicial que se muestra en la imagen anterior, donde se muestra una pequeña descripción y se nos invita a crear un nuevo estilo de mapa o a importar uno ya creado.

Si seleccionamos la opción de crear nuevo estilo veremos a la izquierda el menú principal de la herramienta y a la derecha una muestra de mapa, que podremos situar en la localización que deseemos, donde iremos viendo en vivo los cambios que vayamos realizando.

google maps api styling wizard sevilla 1

Por ilustrar la utilidad de esta nueva herramienta y seguir un ejemplo práctico, imaginemos que en nuestra aplicación Android queremos mostrar o resaltar de alguna forma sólo las zonas verdes de cada ciudad (parques, jardines, …).

La forma más sencilla de trabajar con Google Maps API Styling Wizard será partir de uno de los temas predefinidos que nos propone la herramienta, seleccionando aquel que más se acerque al aspecto visual que queremos conseguir. Tenemos 6 temas predefinidos entre los que elegir (3 claros y 3 oscuros):

styling-wizard-select-theme

Tras elegir el tema más parecido al estilo que estamos buscando nos dirigiremos a los controles superiores, apartado llamado “Adjust density of features“, donde podremos seleccionar, a grandes rasgos, el grado de detalle de los distintos elementos que se muestran sobre el mapa, por ejemplo las calles y carreteras, los puntos de interés, tipos de zonas, etiquetas, etc. Ajustaremos los controles Roads, Landmarks y Labels hasta encontrar nuevamente el grado de detalle que más se acerque al objetivo que perseguimos.

styling-wizard-adjust-density-features

Para mi ejemplo utilizaré el tema “Silver” y bajaré al máximo el nivel de detalle del control Labels (etiquetas), de forma que consigamos un mapa más plano, más sencillo, sin tantas distracciones, y donde se puedan distinguir mejor los diferentes tipos de zonas de la ciudad. Quedaría por ahora de la siguiente forma (comparar con la imagen anterior):

google-maps-api-styling-wizard-sevilla-2

Ya tenemos un punto de partida sobre el que poder trabajar. Para poder afinar los detalles de nuestro estilo personalizado pulsaremos sobre la opción “MORE OPTIONS” de la parte inferior del menú. Esto nos dará acceso a las opciones avanzadas, donde podremos ajustar de forma independiente y en detalle el estilo de cada elemento del mapa, por ejemplo los elementos administrativos (ciudades, localidades, barrios, …), los tipos de terreno, los puntos de interés, los caminos, carreteras, lineas de transporte público, … infinitas posibilidades.

En nuestro caso particular queremos resaltar las zonas verdes, por lo que nos dirigiremos al apartado “Points of interest” (Puntos de interés) y dentro de éste al subapartado “Park” (Parque). Una vez allí la herramienta nos permite modificar la geometría (trazos y rellenos de color) y etiquetas (texto e icono) de este tipo de elementos. Nosotros modificaremos el color a verde de forma que resalte sobre los colores grises que hemos asignado al resto del mapa. Para ello iremos al apartado “Geometry” (geometría) / “Fill” (relleno), activaremos la check de “Color”, y seleccionaremos el color deseado.

google-maps-api-styling-wizard-sevilla-3

Dado que en los primeros pasos redujimos al máximo la densidad de etiquetas, en este momento no aparece ninguna etiqueta sobre nuestro mapa. Sin embargo, para el ejemplo me gustaría que al menos se mostraran los nombres de las distintas localidades sobre el mapa. Para ello vamos ahora al apartado “Administrative” / “Locality”. Una vez allí, abrimos el apartado “Labels” y le indicamos que queremos mostrarlas (valor “Shown”) para este tipo de elementos:

google-maps-api-styling-wizard-sevilla-4

Ya podemos ver en la imagen anterior como se muestra la etiqueta “Sevilla” sobre el mapa.

Casi hemos llegado al resultado que buscábamos, pero si ampliamos el mapa sobre alguna de las zonas verdes resaltadas veremos que no se indica tampoco el nombre de dicha zona. Tendremos por tanto que activar también las etiquetas para estos elementos, así que volvemos al menú “Points of interest” / “Park” y nuevamente seleccionamos el valor “Shown” en el apartado “Labels”:

google-maps-api-styling-wizard-sevilla-5

Y con esto ya habríamos finalizado nuestro estilo personalizado. Por brevedad no me he extendido demasiado pero espero haber ilustrado las posibilidades que nos ofrece esta herramienta, os invito a experimentar por vosotros mismos para descubrir todas las opciones de estilo que se ofrecen.

google-maps-api-styling-wizard-sevilla-6

Ya podemos por tanto exportar el estilo creado a formato JSON para utilizarlo desde nuestra aplicación Android. Pulsaremos para ello el botón “FINISH” (ver imagen anterior) y nos aparecerá el cuadro de diálogo siguiente:

google-maps-api-styling-wizard-sevilla-7

En este cuadro podemos pulsar la opción “COPY JSON” para copiar el contenido completo y lo pegaremos y guardaremos en un fichero de texto con extensión “.json”. En mi caso lo he llamado “formato_mapa.json“.

Para la aplicación Android de ejemplo tomaré como base la ya creada en el primer artículo de la serie sobre Google maps.

Lo primero que deberemos hacer será añadir la referencia a la última versión de la librería de mapas de Google Play Services (versión 9.6) a nuestro fichero build.gradle:

dependencies {
    //...
    compile 'com.google.android.gms:play-services-maps:9.6.0'
}

Lo siguiente será crear (si no existe ya) una carpeta “raw” en la carpeta de recursos del proyecto. Esta carpeta debe quedar en la ruta “nombre-del-proyectoappsrcmainresraw“. Dentro de esta carpeta colocaremos el fichero de formato de mapa (“formato_mapa.json“) que hemos creado anteriormente. En Android Studio debería refrescarse la vista de proyecto automáticamente para mostrar estos cambios:

as-raw-formato-mapa-json

Ya solo nos quedaría utilizar este nuevo recurso del proyecto para dar formato a nuestro mapa. Hacer esto es tan sencillo como llamar al método setMapStyle() del objeto GoogleMap obtenido en el evento onMapReady(), pasándole como parámetro el nuevo recurso. Para cargar este recurso utilizaremos el método MapStyleOptions.loadRawResourceStyle() pasándole como ID el nombre del recurso precedido de R.raw. Veamos cómo quedaría el código completo:

public class MainActivity extends AppCompatActivity
        implements OnMapReadyCallback {

    private GoogleMap mapa;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MapFragment mapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);

        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap map) {
        mapa = map;

        //Aplicamos el estilo personalizado de mapa
        mapa.setMapStyle(
            MapStyleOptions.loadRawResourceStyle(
                this, R.raw.formato_mapa));
    }
}

Si ejecutamos ahora el proyecto sobre un emulador con los Google Play Services actualizados a la última versión (9.6) o sobre algún dispositivo real actualizado podremos ver nuestro mapa con el estilo personalizado que hemos definido:

demo-google-maps-styling-wizard

Con esto habríamos terminado este artículo dedicado a una de las novedades más relevantes que nos han llegado con la última versión de los Google Play Services. Espero que os sea de ayuda.

Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la página del curso en GitHub.

Curso Programación Android

Este artículo forma parte del Curso de Programación Android que tienes disponible de forma completamente gratuita en sgoliver.net