Cómo ocultar los elementos del mapa con los ajustes de diseño

Seleccionar plataforma: Android iOS JavaScript

Además de cambiar el estilo de los elementos del mapa, puedes ocultarlos por completo. En este ejemplo, se muestra cómo ocultar en el mapa los íconos de lugares de interés comerciales y de transporte público.

El diseño solo funciona en el tipo de mapa normal. Sin embargo, no afecta los mapas de interiores, por lo que utilizar el diseño para ocultar los elementos no impedirá que se muestren los planos de interiores del edificio en el mapa.

Pasa un objeto de estilo JSON al mapa

Si deseas definir el estilo de tu mapa, llama a GoogleMap.setMapStyle(). Para ello, pasa un objeto MapStyleOptions que contenga tus declaraciones de estilo en formato JSON. Puedes cargar la declaración JSON a través de un recurso sin procesar o una string, como se muestra en los siguientes ejemplos:

Recurso sin procesar

La siguiente muestra de código presupone que tu proyecto contiene un recurso sin procesar llamado style_json:

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Define un recurso sin procesar en /res/raw/style_json.json que contenga la siguiente declaración de estilo JSON para ocultar los lugares de interés comerciales:

La siguiente declaración de estilo oculta los lugares de interés comerciales y los íconos de transporte público:

El diseño (activity_maps.xml) tiene el siguiente aspecto:

Recurso de strings

La siguiente muestra de código presupone que tu proyecto contiene un recurso de strings llamado style_json:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Define un recurso de strings en /res/values/style_strings.xml que contenga la siguiente declaración de estilo JSON para ocultar los lugares de interés comerciales. En este archivo, debes utilizar una barra inversa para escapar las comillas:

La siguiente declaración de estilo oculta los lugares de interés comerciales y los íconos de transporte público:

El diseño (activity_maps.xml) tiene el siguiente aspecto:

Declaraciones de estilo JSON

En los mapas con estilos, se utilizan dos conceptos para aplicar colores y otros cambios de estilo a un mapa:

  • Los selectores especifican los componentes geográficos a los que puedes ajustarles el estilo en el mapa. Estos componentes incluyen rutas, parques y masas de agua, entre otros, así como sus respectivas etiquetas. Los selectores incluyen características y elementos, que se especifican como propiedades featureType y elementType.
  • Los parámetros de estilo 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 estilo para acceder a una descripción detallada de las opciones de diseño del objeto JSON.

Asistente de diseño de Maps Platform

Utiliza el Asistente de diseño de Maps Platform como una forma rápida de generar un objeto de diseño JSON. Maps SDK for Android admite 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.