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

Stilli Harita Ekle

Platformu seçin: Android iOS JavaScript

Bu eğiticide, Android uygulamanıza özel stil içeren bir haritanın nasıl ekleneceği gösterilmektedir. Özel eğitim örneği olarak gece modu kullanılır.

Stil seçenekleri sayesinde standart Google harita stillerinin sunulma şeklini özelleştirebilir, yollar, parklar, işletmeler ve diğer önemli noktalar gibi özelliklerin görsel görünümünü değiştirebilirsiniz. Bu sayede, haritanın belirli bileşenlerini vurgulayabilir veya uygulamanızın uygulamanızın stilini tamamlayıcı hale getirebilirsiniz.

Stil oluşturma yalnızca normal eşleme türünde kullanılabilir. Stil kullanımı iç mekan haritalarını etkilemez.

Kodu alın

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

Geliştirme projenizi oluşturma

Android Studio'da eğitim projesi 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.
Bu eğiticiyi okumaya başladığınızda Google Haritalar Android API'si v2 Örnekler deposunu klonlayın veya indirin.
Eğitim projesini içe aktarın:
- Android Studio'da Dosya > Yeni > Projeyi İçe Aktar'ı seçin.
- Google Haritalar Android API'si v2 Örnekler veri havuzunu indirdikten sonra kaydettiğiniz konuma gidin.
- StyledMap projesini şu konumda bulabilirsiniz:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- Proje dizinini seçin ve ardından OK'i (Tamam) tıklayın. Android Studio, Gradle derleme aracını kullanarak projenizi oluşturdu.

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

Bu eğiticiyi tamamlamak için, Android için Haritalar SDK'sını kullanma yetkisi olan bir Google API anahtarı gerekir.

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 rehberini inceleyin.

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. Gradle, uygulamanızı derlerken API anahtarını uygulamanın Android mantığı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 cihazınızı cihazı algılayacak şekilde yapılandırmak için talimatları uygulayın. (Alternatif olarak Android Sanal Cihaz (AVD) Yöneticisi'ni kullanarak sanal cihaz yapılandırabilirsiniz. Bir 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ği şekilde cihaz seçin.

Android Studio, uygulamayı oluşturmak için Gradle'ı çağırır, ardından uygulamayı cihazda veya emülatörde çalıştırır. Bu sayfadaki görsele benzer şekilde, koyu (gece modu) stilinde bir harita göreceksiniz.

Sorun giderme:

Bir harita görmüyorsanız bir API anahtarı alıp almadığınızı yukarıda açıklandığı gibi uygulamaya ekleyip eklemediğinizi kontrol edin. API anahtarıyla ilgili hata mesajları için Android Studio'nun Android Monitor sayfasındaki günlüğü kontrol edin.
Günlükleri görüntülemek ve uygulamada hata ayıklamak için Android Studio hata ayıklama araçlarını kullanın.

Kodu anlama

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

JSON stili nesne içeren bir kaynak ekleme

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

Ham kaynak

/res/raw/style_json.json içinde, 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 modunda, gece modu stili için JSON stil beyanını içeren bir dize kaynağı tanımlayın. Bu eğitimde style_json dize adı kullanılmaktadı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 stili nesne iletme

Haritanızın stilini belirlemek için, GoogleMap.setMapStyle() işlevini çağırarak JSON biçiminde stil beyanlarınızı içeren bir MapStyleOptions nesnesi iletin.

Ham kaynak

Aşağıdaki kod örneği, projenizin style_json adında bir ham kaynak içerdiğini varsayar:

// 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) aşağıdaki gibi görünür:

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

<!--
 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ği, projenizin style_json adında bir dize kaynağı içerdiğini varsayar:

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 bildirimleri hakkında daha fazla bilgi

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

Seçiciler haritada biçimlendirebileceğiniz coğrafi bileşenleri belirtir. Bunlar arasında yollar, parklar, su kaynakları ve daha fazlası ve etiketleri yer alır. Seçiciler, featureType ve elementType özellikleri olarak belirtilen özellikler ve öğeleri içerir.
Stil özellikleri, harita öğelerine uygulayabileceğiniz renk ve görünürlük özellikleridir. Gösterilen rengi ton, renk ve açıklık/gama değerlerinin bir kombinasyonuyla tanımlarlar.

JSON stil seçeneklerinin ayrıntılı açıklaması için stil referansını inceleyin.

Haritalar Platformu Stil Sihirbazı

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

JSON stil nesnesini oluşturmanın hızlı bir yolu olarak Haritalar Platformu Stil Sihirbazı'nı kullanın. Android için Haritalar SDK'sı, Maps JavaScript API ile aynı stil beyanlarını destekler.

Sonraki adım

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