Maps JavaScript API için Stil Referansı

Platform seçin: Android iOS JavaScript

Stil seçenekleriyle, standart Google harita stillerinin sunumunu özelleştirebilir, yollar, parklar, işletmeler 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 gizleyebilirsiniz. Bu sayede, haritanın belirli bileşenlerini vurgulayabilir veya haritanın, bulunduğu sayfanın stilini tamamlamasını sağlayabilirsiniz.

Örnekler

Aşağıdaki JSON stil beyanı, tüm harita özelliklerini griye dönüştürür, ardından ana yol geometrisini maviye boyar ve çevre etiketlerini tamamen gizler:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]
 Bir haritaya JSON stil bildirimi uygulamak için haritayı oluştururken veya Map.setOptions() yöntemini çağırırken stil dizisini MapOptions.styles özelliğine iletin. Bir uygulamada JSON stilinin nasıl kullanılacağını gösteren eksiksiz bir örnek için Stil Özellikli Harita Seçimi başlıklı makaleyi inceleyin.

JSON nesnesi

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

  • featureType (isteğe bağlı): Bu stil değişikliği için seçilecek özellikler. Özellikler; yollar, parklar, su kütleleri ve daha fazlası dahil olmak üzere haritadaki coğrafi özelliklerdir. Bir özellik belirtmezseniz tüm özellikler seçilir.
  • elementType (isteğe bağlı): Belirtilen özelliğin seçilecek özelliği. Öğeler, etiketler ve geometri 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 oluşturucular, özelliğin rengini, görünürlüğünü ve ağırlığını belirtir. Bir özelliğe bir veya daha fazla stil uygulayabilirsiniz.

Bir stil belirtmek için bir dizi featureType ve elementType seçiciyi ve stylers öğenizi bir stil dizisinde birleştirmeniz gerekir. Tek bir dizide özelliklerin herhangi bir kombinasyonunu hedefleyebilirsiniz. Ancak tek seferde uygulayabileceğiniz stil sayısı sınırlıdır. Stil diziniz maksimum karakter sayısını aşarsa hiçbir stil uygulanmaz.

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

featureType

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

{
  "featureType": "road"
}

Özellikler veya özellik türleri; yollar, parklar, su kütleleri, işletmeler ve daha fazlası dahil olmak üzere haritadaki coğrafi özelliklerdir.

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

Bazı özellikler, nokta gösterimi kullanarak belirttiğiniz alt özellikleri içerir. Örneğin, landscape.natural veya road.local. Yalnızca üst öğeyi (ör. road) 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 özelliklerinde bulunmayan bazı öğeler 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, coğrafi sınırları veya dolguyu değil, yalnızca bağlı olduğu yerlerin etiketlerini etkiler.
    • administrative.country, ülkeleri seçer.
    • administrative.land_parcel, arazi parsellerini seçer.
    • administrative.locality, yerleşim yerlerini seçer.
    • administrative.neighborhood, mahalleleri seçer.
    • administrative.province, illeri seçer.
  • landscape tüm yatay resimleri 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ünya yüzeyini kaplayan fiziksel malzeme olan arazi örtüsü özelliklerini (ör. ormanlar, çayırlar, sulak alanlar ve çıplak zemin) seçer.
    • landscape.natural.terrain, bir kara yüzeyinin rakım, 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, polis, doktorlar ve diğerleri dahil olmak üzere acil durum hizmetlerini seçer.
    • poi.park, parkları seçiyor.
    • poi.place_of_worship; kiliseler, tapınaklar, camiler ve diğerleri dahil olmak üzere 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, erişimi denetlenen otoyolları seçer.
    • road.local, yerel yolları seçer.
  • transit, tüm toplu taşıma istasyonlarını ve hatlarını 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 havaalanlarını seçer.
    • transit.station.bus, otobüs duraklarını seçer.
    • transit.station.rail, tren istasyonlarını seçer.
  • water, su kütlelerini seçer.

elementType

Aşağıdaki JSON snippet'i, tüm yerel yolların etiketlerini 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, bazılarını veya tümünü desteklemeyebileceğini unutmayın:

Etiket metni fill ve stroke renkleri, yakınlaştırma seviyesine göre değişir. Deneyimi yakınlaştırma seviyeleri arasında tutarlı hale getirmek için her zaman hem fill hem de stroke değerlerini tanımlayı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 konturunu 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 yalnızca etiketin dolgusunu seçer. Etiketin dolgusu genellikle etiket metnini çevreleyen renkli bir çerçeve olarak oluşturulur.
    • labels.text.stroke, yalnızca etiketin metninin konturunu seçer.

stylers

Stil oluşturucular, harita özelliklerine ve öğelerine uygulayabileceğiniz biçimlendirme seçenekleridir.

Aşağıdaki JSON snippet'i, RGB değeri kullanarak bir özelliği 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. Bu efekt, özelliği gri tonlamalı olarak oluşturur:

"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 belirtir.

    Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluğu ve açıklığı korurken tonu ayarlar. Elde edilen renk, temel haritanın stiline bağlıdır. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın hue ile stillendirilmiş özelliklerini etkiler. Mümkünse mutlak color stil aracını kullanmanız daha iyi olur.

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

    Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluğu ve tonu korurken parlaklığı ayarlar. Elde edilen renk, temel haritanın stiline bağlıdır. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın lightness ile stillendirilmiş özelliklerini etkiler. Mümkünse mutlak color stil aracını kullanmanız daha iyi olur.

  • 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. Elde edilen renk, temel haritanın stiline bağlıdır. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın saturation ile stillendirilmiş özelliklerini etkiler. Mümkünse mutlak color stil aracını kullanmanız daha iyi olur.

  • gamma (0.01 ile 10.0 arasında bir kayan nokta değeri; burada 1.0, düzeltme uygulanmadığını gösterir), öğeye uygulanacak gama düzeltme miktarını gösterir. Gama düzeltmeleri, beyaz veya siyah değerleri etkilemeden renklerin parlaklığını doğrusal olmayan bir şekilde değiştirir. Gama düzeltme 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 gamayı değiştirebilirsiniz.

    Not: Bu seçenek, gama eğrisi kullanarak parlaklığı varsayılan Google stiline göre ayarlar. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın gamma ile stillendirilmiş özelliklerini etkiler. Mümkünse mutlak color stil aracını kullanmak daha iyidir.

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

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

  • visibility (on, off veya simplified), öğenin haritada görünüp görünmeyeceğini ve nasıl görüneceğini belirtir. simplified görünürlüğü, etkilenen özelliklerden bazı stil özelliklerini kaldırır. Örneğin, yollar ana hatları olmadan daha ince çizgilere basitleştirilirken parklar etiket metinlerini kaybeder ancak etiket simgesini korur.
  • color (#RRGGBB biçiminde bir RGB onaltılık dizesi), özelliğin rengini ayarlar.
  • weight (sıfıra eşit veya sıfırdan büyük bir tam sayı değeri), özelliğin ağırlığını piksel cinsinden ayarlar. Ağırlığın yüksek bir değere ayarlanması, karo sınırları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şmeli olmadığından sıra önemlidir. Stil işlemleriyle değiştirilen özellikler ve/veya öğeler (genellikle) mevcut stillere sahiptir. İşlemler, varsa mevcut stiller üzerinde gerçekleştirilir.

Ton, doygunluk, parlaklık modeli

Stil özellikli haritalar, stil oluşturucu işlemlerinde rengi belirtmek için ton, doygunluk, parlaklık (HSL) modelini kullanır. Ton temel rengi, doygunluk bu rengin yoğunluğunu, parlaklık ise bileşen renkteki göreceli beyaz veya siyah miktarını gösterir.

Gama düzeltme, genellikle kontrastı artırmak veya azaltmak için renk uzayındaki parlaklığı değiştirir. Ayrıca HSL modeli, rengi bir koordinat uzayında tanımlar. Bu uzayda hue, renk çarkındaki yönü belirtirken doygunluk ve açıklık, farklı eksenlerdeki genlikleri belirtir. Renk tonları, RGB renk alanında ölçülür. Bu alan, beyaz ve siyah tonlarının olmaması dışında çoğu RGB renk alanına benzer.

Ton, doygunluk, parlaklık modeli

hue, HTML onaltılık renk değeri alsa da bu değeri yalnızca temel rengi belirlemek için kullanır. Yani renk çarkındaki yönünü belirler, doygunluğunu veya açıklığını belirlemez. Bunlar yüzde değişimleri olarak ayrı ayrı belirtilir.

Örneğin, saf yeşil için tonu hue:0x00ff00 veya hue:0x000100 olarak tanımlayabilirsiniz. İki renk de aynıdır. Her iki değer de HSL renk modelinde saf yeşili gösterir.

RGB renk çarkı

Eşit miktarda kırmızı, yeşil ve mavi içeren RGB hue değerleri, HSL koordinat uzayında bir yön belirtmediği için ton belirtmez. Örnekler arasında "#000000" (siyah), "#FFFFFF" (beyaz) ve tüm saf gri tonları yer alır. Siyah, beyaz veya griyi belirtmek için tüm saturation değerlerini 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 özellikleri değiştirirken hue gibi bir değeri değiştirmek, mevcut saturation veya lightness değerini değiştirmez.