Yeni harita stilleri yakında Google Haritalar Platformu'nda kullanıma sunulacak. Harita stilinde yapılan bu güncelleme, yeni bir varsayılan renk paletinin yanı sıra harita deneyimleri ve kullanılabilirliğiyle ilgili iyileştirmeler içermektedir. Tüm harita stilleri Mart 2025'te otomatik olarak güncellenecektir. Bu özelliğin kullanılabilirliği ve bu özelliğe daha önce nasıl katılacağınız hakkında daha fazla bilgi edinmek için Google Haritalar Platformu için yeni harita stili başlıklı makaleyi inceleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Stilli Harita Ekle

Platform seçin: Android iOS JavaScript

Bu eğiticide, Android cihazınıza özel stil özellikleri olan bir haritayı nasıl ekleyeceğiniz gösterilmektedir uygulamasını indirin. Eğitim, özel stile örnek olarak gece modu'nu kullanır.

Stil seçenekleri sayesinde standart Google harita stillerinin sunumunu özelleştirebilir, yollar, parklar, işletmeler ve diğer önemli yerler gibi özelliklerin görsel görüntüsünü değiştirebilirsiniz. Bu da ekip üyelerinizin haritanın belirli bileşenlerini yapabilir veya haritayı, işletmenizin tarzını tamamlayacak şekilde uygulamasını indirin.

Stillendirme yalnızca normal harita türünde çalışır. Stil etkilemez iç mekan haritalarını kullanın.

Kodu alın

GitHub'dan Google Haritalar Android API v2 Örnekleri deposunu klonlayın veya indirin.

Geliştirme projenizi oluşturma

Android Studio'da eğitim projesini oluşturmak için aşağıdaki adımları uygulayın.

Android Studio'yu indirin ve yükleyin.
Android Studio'ya Google Play Hizmetleri paketini ekleyin.
Google Haritalar Android API v2 Samples deposunu klonlama veya indirme bu işlemi yapmamış olmanız gerekir.
Eğitim projesini içe aktarın:
- Android Studio'da Dosya > Yeni > Projeyi İçe Aktarın.
- Google Haritalar Android API v2 Sana Özel'i kaydettiğiniz konuma gidin depolanacağı tarihtir.
- StyledMap projesini şu konumda bulun:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- Proje dizinini seçin ve Tamam'ı tıklayın. Android Studio artık Gradle derleme aracını kullanarak projenizi derliyor.

API anahtarı alın ve gerekli API'leri etkinleştirin

Bu eğiticiyi tamamlamak için, kullanım izni olan bir Google API anahtarı gerekir Google Haritalar SDK'sı.

Bir anahtar almak ve API'yi etkinleştirmek için aşağıdaki düğmeyi tıklayın.

Anahtar al

Daha fazla bilgi için API Anahtarı Alma kılavuzuna bakın.

API anahtarını uygulamanıza ekleme

Projenizin gradle.properties dosyasını düzenleyin.
API anahtarınızı GOOGLE_MAPS_API_KEY özelliğinin değerine yapıştırın. Uygulamanızı derlediğinizde Gradle, API anahtarını uygulamanın Android manifest dosyasına kopyalar.
```
GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
```

Uygulamanızı derleyip çalıştırma

Bilgisayarınıza bir Android cihaz bağlayın. Android cihazınızda geliştirici seçeneklerini etkinleştirmek ve sisteminizi cihazı algılayacak şekilde yapılandırmak için talimatları uygulayın. (Alternatif olarak, sanal cihaz yapılandırmak için Android Sanal Cihaz (AVD) Yöneticisi'ni kullanabilirsiniz. Emülatör seçerken Google API'lerini içeren bir resim seçtiğinizden emin olun. Daha fazla bilgi için başlangıç kılavuzuna bakın.)
Android Studio'da Çalıştır menü seçeneğini (veya oynat düğmesi simgesini) tıklayın. İstendiğinde bir cihaz seçin.

Android Studio, uygulamayı derlemek için Gradle'i çağırır ve ardından uygulamayı cihazda veya emülatörde çalıştırır. Bu sayfadaki resme benzer şekilde, koyu (gece modu) stilin kullanıldığı bir harita görürsünüz.

Sorun Giderme:

Harita görmüyorsanız yukarıda açıklandığı gibi bir API anahtarı alıp uygulamaya eklediğinizden emin olun. API anahtarıyla ilgili hata mesajları için Android Studio'nun Android İzleyici'sindeki günlüğü kontrol edin.
Günlükleri görüntülemek ve hata ayıklamak için Android Studio hata ayıklama araçlarını kullanın. görebilirsiniz.

Kodu anlama

Bu eğiticinin bu bölümünde, benzer bir uygulamayı nasıl oluşturacağınızı anlamanıza yardımcı olmak için StyledMap uygulamasının en önemli bölümleri açıklanmaktadır.

JSON stil nesnesi içeren bir kaynak ekleme

Geliştirme projenize stil beyanlarınızı içeren bir kaynak ekleyin JSON biçiminde dışa aktarabilirsiniz. Aşağıdaki örneklerde gösterildiği gibi ham bir kaynak veya dize kullanabilirsiniz.

Ham kaynak

Gece modu stili için JSON stil beyanını içeren bir ham kaynak tanımlayın:

JSON dosyasını göster/gizle.

[
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#242f3e"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -80
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#263c3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6b9a76"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2b3544"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9ca5b3"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#1f2835"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f3d19c"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2f3948"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#17263c"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#515c6d"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -20
      }
    ]
  }
]

Dize kaynağı

/res/values/style_strings.xml içinde bir dize kaynağı tanımlayın, içerir. Bu eğiticide style_json dize adı kullanılmıştır. Bu dosyada, tırnak işaretlerini kod dışına almak için ters eğik çizgi kullanmanız gerekir:

JSON dosyasını göster/gizle.

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"all\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#242f3e\"
        }
      ]
    },
    {
      \"featureType\": \"all\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -80
        }
      ]
    },
    {
      \"featureType\": \"administrative\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"administrative.locality\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#263c3f\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#6b9a76\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#2b3544\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#9ca5b3\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#1f2835\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#f3d19c\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"transit\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#2f3948\"
        }
      ]
    },
    {
      \"featureType\": \"transit.station\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#17263c\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#515c6d\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -20
        }
      ]
    }
  ]
  </string>
</resources>

Haritanıza JSON stilinde bir nesne iletin

Haritanıza stil uygulamak için GoogleMap.setMapStyle() işlevini çağırın. Bu işleve, stil beyanlarınızı JSON biçiminde içeren bir MapStyleOptions nesnesi gönderin.

Ham kaynak

Aşağıdaki kod örneğinde, projenizde style_json adlı ham bir kaynak bulunduğu varsayılmaktadır:

// 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)));
    }
}

Düzen (activity_maps_raw.xml) şuna benzer:

Düzen dosyasını gösterir/gizler.

<!--
 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.
-->

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityRaw"
    map:cameraZoom="10" />

Dize kaynağı

Aşağıdaki kod örneğinde, projenizin bir dize kaynağı içerdiği varsayılır style_json adlı:

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)));
    }
}

Düzen (activity_maps_string.xml) aşağıdaki gibi görünür:

Düzen dosyasını göster/gizle.

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityString"
    map:cameraZoom="10" />

JSON stil beyanları hakkında daha fazla bilgi

Stilize haritalar, haritaya renk ve diğer stil değişikliklerini uygulamak için iki kavram kullanır:

Seçiciler, oluşturabileceğiniz coğrafi bileşenleri belirtir. stilini de değiştirebilirsiniz. Buna yollar, parklar, su alanları ve daha fazlası ile bunların etiketleri dahildir. Seçiciler, featureType ve elementType özellikleri olarak belirtilen özellikleri ve öğeleri içerir.
Stil uygulayıcılar, harita öğelerine uygulayabileceğiniz renk ve görünürlük özellikleridir. Bunlar; ton, renk ve açıklık/gama değerlerinin bir kombinasyonuyla gösterilen rengi tanımlar.

Ayrıntılı açıklama için stil referansına JSON stil seçenekleri.

Haritalar Platformu Stil Sihirbazı

Google Haritalar Platformu API'leri için özel stiller oluşturma

Aşağıdakileri oluşturmak için hızlı bir yol olarak Haritalar Platformu Stil Sihirbazı'nı kullanın: JSON stil nesnesi. Android için Haritalar SDK'sı aynı stili destekler Maps JavaScript API olarak bildirin.

Sonraki adım

Stil ile haritadaki özellikleri nasıl gizleyeceğinizi öğrenin.