Maps JavaScript API için Stil Referansı

Platform seçin: Android iOS JavaScript

Stil seçenekleriyle standart Google harita stillerinin sunumunu özelleştirebilir, yol, park, işletme ve diğer önemli yerler gibi özelliklerin görsel görünümünü değiştirebilirsiniz. Bu özelliklerin stilini değiştirmenin yanı sıra özellikleri tamamen de gizleyebilirsiniz. Bu, haritanın belirli bileşenlerini vurgulayabileceğiniz veya haritayı çevreleyen sayfanın stilini tamamlayabileceği anlamına gelir.

Aynı stili birden fazla uygulamada kolayca güncellemek istiyorsanız Google Cloud Console'daki bulut özelleştirmesini inceleyin. Bulut özelleştirmesini kullanmak için harita kimliği oluşturup eklemeniz gerekir. Gelecekte oluşabilecek çakışmaları önlemek için bulut özelleştirmesi ile sabit kodlu stilleri aynı uygulamada birleştirmemenizi öneririz.

Örnekler

Aşağıdaki JSON stil bildirimi tüm harita özelliklerini griye dönüştürür, ardından ana yol geometrisini mavi renkle renklendirir ve yatay etiketleri tamamen gizler:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

JSON nesnesi

JSON stil bildirimi aşağıdaki öğelerden oluşur:

• featureType (isteğe bağlı) - Bu stil değişikliği için seçilecek özellikler. Özellikler, haritadaki yollar, parklar, su kütleleri gibi coğrafi niteliklerdir. Bir özellik belirtmezseniz tüm özellikler seçilir.
• elementType (isteğe bağlı) - Seçilecek belirtilen özelliğin özelliğidir. Öğeler, etiketler ve geometri de dahil olmak üzere bir özelliğin alt parçalarıdır. Bir öğe belirtmezseniz özelliğin tüm öğeleri seçilir.
• stylers - seçilen özelliklere ve öğelere uygulanacak kurallar. Stil araçları özelliğin rengini, görünürlüğünü ve ağırlığını belirtir. Bir özelliğe bir veya daha fazla stil uygulayabilirsiniz.

Stil belirtmek için bir featureType ile elementType seçicileri grubunu ve stylers öğenizi bir stil dizisinde birleştirmeniz gerekir. Tek bir dizide herhangi bir özellik kombinasyonunu hedefleyebilirsiniz. Bununla birlikte, tek seferde uygulayabileceğiniz stillerin sayısı sınırlıdır. Stil diziniz maksimum karakter sayısını aşıyorsa stil uygulanmaz.

Bu sayfanın geri kalanında özellikler, öğeler ve stil araçları hakkında daha fazla bilgi bulabilirsiniz.

featureType

Aşağıdaki JSON snippet'i haritadaki tüm yolları seçer:

{
  "featureType": "road"
}

Özellikler veya özellik türleri, haritadaki coğrafi niteliklerdir (yollar, parklar, su kütleleri, işletmeler vb.).

Özellikler, kök all olan bir kategori ağacı oluşturur. Bir özellik belirtmezseniz tüm özellikler seçilir. all için bir özellik belirtmek de aynı etkiye sahiptir.

Bazı özellikler, nokta gösterimi kullanarak belirttiğiniz alt özellikler içerir. Örneğin, landscape.natural veya road.local. road gibi yalnızca üst özelliği belirtirseniz üst öğe için belirttiğiniz stiller, tüm alt öğelerine (ör. road.local ve road.highway) uygulanır.

Üst özelliklerin, tüm alt özelliklere dahil olmayan bazı öğeleri içerebileceğini unutmayın.

Aşağıdaki özellikler kullanılabilir:

• all (varsayılan) tüm özellikleri seçer.
• administrative tüm bağlı olduğu yerleri seçer. Stil, yalnızca idari bölgelerin etiketlerini etkiler, coğrafi sınırları veya dolguyu etkilemez.
  • administrative.country ülkeleri seçer.
  • administrative.land_parcel, arsa parselleri seçer.
  • administrative.locality şehirleri seçer.
  • administrative.neighborhood mahalleleri seçer.
  • administrative.province illeri seçer.
• landscape tüm manzaraları seçer.
  • landscape.man_made, binalar ve diğer yapılar gibi insan yapımı özellikleri seçer.
  • landscape.natural dağlar, nehirler, çöller ve buzullar gibi doğal özellikleri seçer.
  • landscape.natural.landcover, dünyanın yüzeyini kaplayan fiziksel malzeme olan ormanlar, çayırlar, sulak alanlar ve çıplak zemin gibi arazi örtüsü özelliklerini seçer.
  • landscape.natural.terrain, bir kara yüzeyinin yükseklik, eğim ve yön gibi arazi özelliklerini seçer.
• poi tüm önemli yerleri seçer.
  • poi.attraction turistik yerleri seçer.
  • poi.business işletmeleri seçer.
  • poi.government devlet binalarını seçer.
  • poi.medical; hastaneler, eczaneler, polisler, doktorlar ve diğerleri dahil acil durum hizmetlerini seçer.
  • poi.park, parkları seçer.
  • poi.place_of_worship; kiliseler, tapınaklar, camiler vb. gibi ibadet yerlerini seçer.
  • poi.school okulları seçer.
  • poi.sports_complex spor komplekslerini seçer.
• road tüm yolları seçer.
  • road.arterial ana yolları seçer.
  • road.highway otoyolları seçer.
  • road.highway.controlled_access, kontrollü erişime sahip otoyolları seçer.
  • road.local yerel yolları seçer.
• transit tüm toplu taşıma istasyonlarını ve hatları seçer.
  • transit.line, toplu taşıma hatlarını seçer.
  • transit.station tüm toplu taşıma istasyonlarını seçer.
  • transit.station.airport, havalimanlarını seçer.
  • transit.station.bus, otobüs duraklarını seçer.
  • transit.station.rail, tren istasyonlarını seçer.
• water su kütlesi seçiyor.

elementType

Aşağıdaki JSON snippet'i tüm yerel yollar için etiketler seçer:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Öğeler, bir özelliğin alt bölümleridir. Örneğin bir yol, haritadaki grafik çizgiden (Geometri) ve adını belirten metinden (etiket) oluşur.

Aşağıdaki öğeler kullanılabilir ancak belirli bir özelliğin, öğelerin hiçbirini, bir kısmını veya tamamını desteklemeyebileceğini unutmayın:

• all (varsayılan), belirtilen özelliğin tüm öğelerini seçer.
• geometry, belirtilen özelliğin tüm geometrik öğelerini seçer.
  • geometry.fill, yalnızca özelliğin geometrisinin dolgusunu seçer.
  • geometry.stroke, yalnızca özelliğin geometrisinin fırçasını seçer.
• labels, belirtilen özellikle ilişkili metin etiketlerini seçer.
  • labels.icon yalnızca özelliğin etiketinde gösterilen simgeyi seçer.
  • labels.text yalnızca etiketin metnini seçer.
  • labels.text.fill, etiketin yalnızca dolgusunu seçer. Etiketin dolgusu genellikle etiket metnini çevreleyen renkli bir dış çizgi olarak oluşturulur.
  • labels.text.stroke, yalnızca etiket metninin çizgisini seçer.

stylers

Stil araçları, harita özelliklerine ve öğelerine uygulayabileceğiniz biçimlendirme seçenekleridir.

Aşağıdaki JSON snippet'i, bir özelliği RGB değerini kullanarak parlak yeşil olarak gösterir:

"stylers": [
  { "color": "#99FF33" }
]

Bu snippet, başlangıç rengi ne olursa olsun bir özelliğin rengindeki tüm yoğunluğu kaldırır. Sonuç, özelliği gri tonlamalı hale getirmektir:

"stylers": [
  { "saturation": -100 }
]

Bu snippet, bir özelliği tamamen gizler:

    "stylers": [
      { "visibility": "off" }
    ]

Aşağıdaki stil seçenekleri desteklenir:

• hue (#RRGGBB biçiminde bir RGB onaltılık dizesi) temel rengi gösterir.

  Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluk ve açıklığı korurken tonu belirler. Ortaya çıkan renk, temel haritanın stiline bağlıdır. Google'ın temel harita stilinde değişiklik yapması halinde bu değişiklikler, haritanızın stili hue ile biçimlendirilen özelliklerini etkiler. Mümkünse mutlak color stilatörünü kullanmak daha iyidir.

• lightness (-100 ile 100 arasında bir kayan nokta değeri), öğenin parlaklığındaki yüzde değişimini gösterir. Negatif değerler koyuluğu artırır (-100 değeri siyahı belirtir), pozitif değerler parlaklığı artırır (+100 değeri beyazı belirtir).

  Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluk ve tonu korurken ışığı ayarlar. Ortaya çıkan renk, temel haritanın stiline bağlıdır. Google'ın temel harita stilinde değişiklik yapması halinde bu değişiklikler, haritanızın stili lightness ile biçimlendirilen özelliklerini etkiler. Mümkünse mutlak color stilatörünü kullanmak daha iyidir.

• saturation (-100 ile 100 arasında bir kayan nokta değeri), öğeye uygulanacak temel rengin yoğunluğundaki yüzde değişimini gösterir.

  Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen ton ve açıklığı korurken doygunluğu ayarlar. Ortaya çıkan renk, temel haritanın stiline bağlıdır. Google'ın temel harita stilinde değişiklik yapması halinde bu değişiklikler, haritanızın stili saturation ile biçimlendirilen özelliklerini etkiler. Mümkünse mutlak color stilatörünü kullanmak daha iyidir.

• gamma (0.01 ile 10.0 arasında bir kayan nokta değeri; burada 1.0 düzeltme uygulanmaz), öğeye uygulanacak gama düzeltmesi miktarını gösterir. Gama düzeltmeleri, renklerin açıklığını doğrusal olmayan bir şekilde değiştirir, beyaz veya siyah değerlerini etkilemez. Gama düzeltmesi genellikle birden fazla öğenin kontrastını değiştirmek için kullanılır. Örneğin, öğelerin kenarları ve iç kısımları arasındaki kontrastı artırmak veya azaltmak için gama üzerinde değişiklik yapabilirsiniz.

  Not: Bu seçenek, bir gama eğrisi kullanarak ışığı, varsayılan Google stiline göre ayarlar. Google'ın temel harita stilinde değişiklik yapması durumunda yaptığınız değişiklikler, haritanızın stili gamma ile biçimlendirilen özelliklerini etkiler. Mümkünse mutlak color stilatörünü kullanmak daha iyidir.

• invert_lightness (true ise) mevcut ışığı tersine çevirir. Bu özellik, örneğin beyaz metin içeren daha koyu bir haritaya hızlıca geçmek için yararlıdır.

  Not: Bu seçenek varsayılan Google stilini tersine çevirir. Google temel harita stilinde herhangi bir değişiklik yaparsa yaptığınız değişiklikler, haritanızın stili invert_lightness ile belirlenmiş özelliklerini etkiler. Mümkünse mutlak color stilatörünü kullanmak daha iyidir.

• visibility (on, off veya simplified), öğenin haritada görünüp görünmediğini ve nasıl görüneceğini belirtir. simplified görünürlüğü, bazı stil özelliklerini etkilenen özelliklerden kaldırır. Örneğin, yollar dış çizgi olmadan daha ince çizgilerle sadeleştirilirken parklar etiket metinlerini kaybeder ancak etiket simgesi korunur.
• color (#RRGGBB biçiminde bir RGB onaltılık dizesi) özelliğin rengini belirler.
• weight (sıfırdan büyük veya sıfıra eşit bir tam sayı değeri), özelliğin ağırlığını piksel cinsinden belirler. Ağın yüksek bir değere ayarlanması, karo kenarlıklarının yakınında kırpmaya neden olabilir.

Stil kuralları belirttiğiniz sırayla uygulanır. Birden fazla işlemi tek bir stil işleminde birleştirmeyin. Bunun yerine, her işlemi stil dizisinde ayrı bir giriş olarak tanımlayın.

Not: Bazı işlemler değişimli olmadığından sıralama önemlidir. Stil işlemleri aracılığıyla değiştirilen özelliklerin ve/veya öğelerin (genellikle) zaten mevcut stilleri vardır. İşlemler, varsa bu mevcut stillere göre hareket eder.

Ton, doygunluk, açıklık modeli

Not: Ton, doygunluk, açıklık ve gama ayarlarının etkisi, temel haritanın stiline bağlıdır. Google temel harita stilinde herhangi bir değişiklik yaparsa yapılan değişiklikler, haritanızın, bu seçeneklere göre biçimlendirilen özelliklerini etkiler. Mümkünse mutlak color styler aracını kullanmak daha iyidir.

Stilli haritalar, stil aracı işlemlerindeki rengi belirtmek için ton, doygunluk, açıklık (HSL) modelini kullanır. Ton temel rengi, doygunluk bu rengin yoğunluğunu ve açıklık, bileşen rengin beyaz veya siyahın göreli miktarını belirtir.

Gama düzeltme, genellikle kontrastı artırmak veya azaltmak için renk alanı üzerindeki ışığı değiştirir. Buna ek olarak, HSL modeli bir koordinat alanında renk tanımlar. Burada hue, bir renk çemberi içindeki yönü belirtirken doygunluk ve açıklık farklı eksenler boyunca genlikleri belirtir. Tonlar, RGB renk alanında ölçülür. Bu renk, beyaz ve siyah tonlarının olmaması dışında çoğu RGB renk alanına benzer.

hue, HTML onaltılık renk değerini alırken, bu değeri yalnızca temel rengi, yani renk çemberi etrafındaki yönünü belirlemek için kullanır. Doygunluk veya açıklık (yüzde değişiklikleri olarak ayrı olarak gösterilir) için kullanılmaz.

Örneğin, saf yeşilin tonunu hue:0x00ff00 veya hue:0x000100 olarak tanımlayabilirsiniz. Her iki ton da aynıdır. Her iki değer de HSL renk modelinde saf yeşili gösterir.

RGB Renk Çarkı

Eşit kırmızı, yeşil ve mavi parçalardan oluşan RGB hue değerleri, bu değerlerin hiçbiri HSL koordinat alanında bir yön belirtmediğinden bir ton belirtmez. Örneğin, "#000000" (siyah), "#FFFFFF" (beyaz) ve tüm saf gri tonları. Siyah, beyaz veya gri belirtmek için tüm saturation öğelerini kaldırmanız (değeri -100 olarak ayarlayın) ve bunun yerine lightness değerini ayarlamanız gerekir.

Ayrıca, halihazırda renk şeması olan mevcut özellikler değiştirilirken hue gibi bir değerin değiştirilmesi, mevcut saturation veya lightness değerini değiştirmez.