스타일을 지정하여 지도 지형지물 숨기기

플랫폼 선택: Android iOS의 경우 자바스크립트

지도에서 지형지물의 스타일을 변경할 수도 있고 완전히 숨길 수도 있습니다. 이 예에는 비즈니스 관심 장소(POI) 및 대중교통 아이콘을 지도에서 숨기는 방법이 나와 있습니다.

스타일 지정은 normal 지도 유형에서만 가능합니다. 스타일을 지정해도 실내 지도에는 영향을 미치지 않으므로 스타일을 지정하여 지형지물을 숨겨도 실내 평면도는 지도에 계속 표시됩니다.

지도에 JSON 스타일 객체 전달

지도의 스타일을 지정하려면 JSON 형식의 스타일 선언이 포함된 MapStyleOptions 객체를 전달하는 GoogleMap.setMapStyle()을 호출하세요. 다음 예와 같이 원시 리소스 또는 문자열에서 JSON을 로드할 수 있습니다.

원시 리소스

다음 코드 샘플에서는 프로젝트에 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)));
    }
}

/res/raw/style_json.json에 원시 리소스를 정의하고 다음과 같은 JSON 스타일 선언을 포함하여 비즈니스 관심 장소를 숨깁니다.

다음 스타일 선언은 비즈니스 관심 장소 및 대중교통 아이콘을 숨깁니다.

레이아웃(activity_maps.xml)은 다음과 같습니다.

문자열 리소스

다음 코드 샘플에서는 프로젝트에 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)));
    }
}

/res/values/style_strings.xml에 문자열 리소스를 정의하고 다음과 같은 JSON 스타일 선언을 포함하여 비즈니스 관심 장소를 숨깁니다. 이 파일에서는 백슬래시를 사용하여 따옴표를 이스케이프 처리해야 합니다.

다음 스타일 선언은 비즈니스 관심 장소 및 대중교통 아이콘을 숨깁니다.

레이아웃(activity_maps.xml)은 다음과 같습니다.

JSON 스타일 선언

스타일 지도에서는 두 가지 개념을 사용하여 지도에 색상과 기타 스타일 변경사항을 적용합니다.

  • 선택기는 지도에서 스타일을 지정할 수 있는 지리적 구성요소를 지정합니다. 여기에는 도로, 공원, 호수/바다 등과 해당 라벨이 포함됩니다. 선택기에는 featureType 및 elementType 속성으로 지정된 지형지물 및 요소가 포함됩니다.
  • 스타일러는 지도 요소에 적용할 수 있는 색상 및 표시 여부 속성으로 색조, 색상, 밝기/감마 값을 조합하여 표시되는 색상을 정의합니다.

JSON 스타일 지정 옵션에 관한 자세한 설명은 스타일 참조에서 확인하세요.

지도 플랫폼 스타일 지정 마법사

Google Maps Platform API의 맞춤 스타일 만들기

지도 플랫폼 스타일 지정 마법사를 사용하면 신속하게 JSON 스타일 지정 객체를 생성할 수 있습니다. Android용 Maps SDK는 Maps JavaScript API와 동일한 스타일 선언을 지원합니다.

전체 코드 샘플

GitHub의 ApiDemos 저장소에는 스타일 지정 사용법을 보여주는 샘플이 있습니다.