Ocultar funciones de los mapas con ajustes de estilo

Selecciona la plataforma: Android iOS JavaScript

Además de cambiar el diseño de los componentes del mapa, puedes ocultarlos por completo. En este ejemplo, se muestra cómo ocultar en el mapa los lugares de interés comerciales y los íconos 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 componentes no impedirá que se muestren los planos de interiores del edificio en el mapa.

Pasa un objeto de diseño JSON al mapa

Si deseas definir el diseño de tu mapa, llama a GoogleMap.setMapStyle(). Para ello, pasa un objeto MapStyleOptions que contenga tus declaraciones de diseño en formato JSON. Puedes cargar la declaración JSON a través de un recurso sin procesar o una cadena, 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 diseño JSON para ocultar los lugares de interés comerciales:

La siguiente declaración de diseño 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 cadenas

La siguiente muestra de código presupone que tu proyecto contiene un recurso de cadenas 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 cadenas en /res/values/style_strings.xml que contenga la siguiente declaración de diseño 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 diseño 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 diseño JSON

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.

Asistente de diseño de Maps Platform

Crea diseños personalizados para las APIs de Google Maps Platform

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