스타일 지도

Maps Static API를 사용할 때 나만의 스타일을 적용하여 표준 Google 지도의 표현을 맞춤설정합니다. 도로, 공원, 시가지 및 기타 관심 장소와 같은 지형지물의 시각적 표시를 변경할 수 있습니다. 색상이나 스타일을 변경하여 특정 콘텐츠를 강조하거나, 페이지 주변 콘텐츠를 보완하거나, 지형지물을 완전히 숨길 수도 있습니다.

예

다음 예시는 지역 도로를 밝은 녹색으로 표시하고 거주지는 검정으로 표시하는 스타일을 적용한 미국 브루클린 지도를 보여줍니다. 또한 레이블의 밝기를 반전시켜 어두운 배경에서 더욱 눈에 띄도록 합니다. 이 작업 샘플은 URL 인코딩을 사용합니다.

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

다음 예에서는 스타일링 작업과 단순화를 사용하여 미국의 도로 지도를 대략적으로 표시합니다.

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE

스타일 구문

맞춤설정된 스타일 지도를 만들려면 요청 URL에 하나 이상의 style 매개변수를 포함합니다.

각 style 선언에는 파이프 문자("|")로 구분한 다음 인수가 포함될 수 있습니다.

• feature(선택사항)는 이 스타일 변경에서 선택할 지형지물을 나타냅니다. 지형지물에는 도로, 공원 또는 기타 관심 장소 등과 같이 지도상의 사물이 포함됩니다. feature 인수가 없으면 지정된 스타일이 모든 지형지물에 적용됩니다.
• element(선택사항)는 이 스타일 수정에서 선택할 지정된 지형지물의 요소를 나타냅니다. 요소는 기하학적 구조나 레이블 등과 같은 지형지물의 특성입니다. element 인수가 없다면 스타일은 지정된 지형지물의 모든 요소에 적용됩니다.
• 지정된 지형지물과 요소에 적용할 스타일 규칙 세트(필수)입니다. API는 style 선언에서 나타나는 순서대로 규칙을 적용합니다. Maps Static API의 일반적인 URL 길이 제약 조건 내에서 규칙을 몇 개든 포함할 수 있습니다.

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

기능

다음 style 선언은 지도의 모든 도로에 색을 칠합니다.

style=feature:road|color:0xffffff

일반적인 지형지물 선택 항목은 다음과 같습니다.

• feature:all(기본값)은 지도의 모든 지형지물을 선택합니다.
• feature:road는 지도의 모든 도로를 선택합니다.
• feature:road.local는 모든 지역 도로를 선택합니다.

지형지물 또는 지형지물 유형은 지도상의 지리적 특성에 해당되며 여기에는 도로, 공원, 호수/바다, 비즈니스 등이 포함됩니다.

지형지물은 all을 루트로 사용하는 카테고리 트리를 형성합니다. 지형지물을 지정하지 않으면 모든 지형지물이 선택됩니다. 지형지물을 all로 지정하는 경우에도 동일한 효과가 나타납니다.

일부 지형지물에는 점(.) 표기법을 사용하여 지정하는 하위 지형지물이 포함됩니다. 예를 들면 landscape.natural 또는 road.local입니다. 상위 지형지물만 지정하는 경우(예: road) 상위 요소에 지정한 스타일이 모든 하위 요소(예: road.local, road.highway)에 적용됩니다.

참고로, 상위 지형지물에는 모든 하위 지형지물에 포함되지 않은 요소가 일부 포함될 수도 있습니다.

사용할 수 있는 지형지물은 다음과 같습니다.

• all(기본값)은 모든 지형지물을 선택합니다.
• administrative에서는 모든 행정 구역을 선택합니다. 스타일 지정은 행정 구역의 라벨에만 영향을 미치며 지리적 경계나 채우기에는 영향을 미치지 않습니다.
  • administrative.country에서는 국가를 선택합니다.
  • administrative.land_parcel에서는 필지를 선택합니다.
  • administrative.locality에서는 지역을 선택합니다.
  • administrative.neighborhood에서는 주변 지역을 선택합니다.
  • administrative.province에서는 주/도를 선택합니다.
• landscape에서는 모든 풍경을 선택합니다.
  • landscape.man_made에서는 건물, 기타 구조물 등 인공 지형지물을 선택합니다.
  • landscape.natural에서는 산, 강, 사막, 빙하 등 자연 지형지물을 선택합니다.
  • landscape.natural.landcover에서는 삼림, 초원, 습지, 지면 등 지표면을 덮는 육상 지형지물과 물리적 대상을 선택합니다.
  • landscape.natural.terrain에서는 고도, 경사, 방향 등 지표면의 지형지물을 선택합니다.
• poi에서는 모든 관심 장소를 선택합니다.
  • poi.attraction에서는 관광명소를 선택합니다.
  • poi.business에서는 비즈니스를 선택합니다.
  • poi.government에서는 정부 건물을 선택합니다.
  • poi.medical에서는 병원, 약국, 경찰서, 의사 등 응급 서비스를 선택합니다.
  • poi.park에서는 공원을 선택합니다.
  • poi.place_of_worship에서는 교회, 사찰, 모스크 등 예배 장소를 선택합니다.
  • poi.school에서는 학교를 선택합니다.
  • poi.sports_complex에서는 스포츠 단지를 선택합니다.
• road에서는 모든 도로를 선택합니다.
  • road.arterial에서는 간선도로를 선택합니다.
  • road.highway에서는 고속도로를 선택합니다.
  • road.highway.controlled_access에서는 접근이 통제된 고속도로를 선택합니다.
  • road.local에서는 지방도로를 선택합니다.
• transit에서는 모든 대중교통 역과 노선을 선택합니다.
  • transit.line에서는 대중교통 노선을 선택합니다.
  • transit.station에서는 모든 대중교통 역/정류장을 선택합니다.
  • transit.station.airport에서는 공항을 선택합니다.
  • transit.station.bus에서는 버스 정류장을 선택합니다.
  • transit.station.rail에서는 기차역을 선택합니다.
• water에서는 호수/바다를 선택합니다.

요소

다음 style 선언은 모든 지역 도로의 레이블에 색을 칠합니다.

style=feature:road.local|element:labels|color:0xffffff

요소는 한 지형지물의 세부 구획을 나타냅니다. 예를 들어 도로는 지도상의 그래픽 선(도형)과 그 이름(라벨)을 표시하는 텍스트로 구성됩니다.

다음과 같은 요소를 사용할 수 있으며 다만 특정 지형지물은 어떤 요소도 사용하지 않거나 일부 또는 모든 요소를 사용할 수도 있습니다.

• all(기본값)에서는 지정된 지형지물의 모든 요소를 선택합니다.
• geometry에서는 지정된 지형지물의 모든 도형 요소를 선택합니다.
  • geometry.fill에서는 지형지물 도형의 채우기만 선택합니다.
  • geometry.stroke에서는 지형지물 도형의 획만 선택합니다.
• labels에서는 지정된 지형지물과 연관된 텍스트 라벨을 선택합니다.
  • labels.icon에서는 지형지물 라벨 내에 표시된 아이콘만 선택합니다.
  • labels.text에서는 라벨의 텍스트만 선택합니다.
  • labels.text.fill에서는 라벨의 채우기만 선택합니다. 라벨의 채우기는 대체로 라벨 텍스트를 둘러싼 컬러 윤곽선으로 렌더링됩니다.
  • labels.text.stroke에서는 라벨 텍스트의 획만 선택합니다.

스타일 규칙

스타일 규칙은 각 style 선언 내에 지정된 지형지물과 요소에 적용되는 형식 지정 옵션입니다.

다음 style 선언은 지도의 도로에 두 가지 스타일 규칙을 적용합니다. 첫 번째 규칙은 도로에 색상을 적용합니다. 두 번째 규칙은 도로 표시를 단순화하여 윤곽선이 없는 더욱 얇은 선으로 표현합니다.

style=feature:road|color:0xffffff|visibility:simplified

각 style 선언에는 파이프('|') 문자를 사용하여 구분된 하나 이상의 작업이 포함되어야 합니다. 각 연산은 콜론(":") 문자를 사용하여 인수 값을 지정하고 모든 연산은 지정된 순서대로 해당 선택에 적용됩니다.

다음과 같은 스타일 옵션이 지원됩니다.

• hue(#RRGGBB 형식의 RGB 16진수 문자열)에서는 기본 색상을 나타냅니다.

  참고: 이 옵션은 기본 Google 스타일에 지정된(또는 지도에 정의한 기타 스타일 옵션에 지정된) 채도와 밝기를 유지하면서 색조를 설정합니다. 실제 색상은 기본 지도 스타일과 관련이 있습니다. Google에서 기본 지도 스타일을 변경하면 hue로 스타일이 지정된 지도 지형지물에 변경사항이 적용됩니다. 가능하다면 절대값의 color 스타일러를 사용하는 것이 좋습니다.

• lightness(-100 및 100 사이의 부동 소수점 값)에서는 요소 밝기의 비율 변화를 나타냅니다. 음수 값은 어둡게 하고(-100은 검은색을 지정) 양수 값은 밝게 합니다(+100은 흰색을 지정).

  참고: 이 옵션은 기본 Google 스타일에 지정된(또는 지도에 정의한 기타 스타일 옵션에 지정된) 채도와 색조를 유지하면서 밝기를 설정합니다. 실제 색상은 기본 지도 스타일과 관련이 있습니다. Google에서 기본 지도 스타일을 변경하면 lightness로 스타일이 지정된 지도 지형지물에 변경사항이 적용됩니다. 가능하다면 절대값의 color 스타일러를 사용하는 것이 좋습니다.

• saturation(-100 및 100 사이의 부동 소수점 값)에서는 요소에 적용될 기본 색상 강도의 비율 변화를 나타냅니다.

  참고: 이 옵션은 기본 Google 스타일에 지정된(또는 지도에 정의한 기타 스타일 옵션에 지정된) 색조와 밝기를 유지하면서 채도를 설정합니다. 실제 색상은 기본 지도 스타일과 관련이 있습니다. Google에서 기본 지도 스타일을 변경하면 saturation으로 스타일이 지정된 지도 지형지물에 변경사항이 적용됩니다. 가능하다면 절대값의 color 스타일러를 사용하는 것이 좋습니다.

• gamma(0.01 및 10.0 사이의 부동 소수점 값)에서는 요소에 적용할 감마 보정의 양을 나타냅니다(1.0이면 정정을 적용 안 함). 감마 보정은 비선형 방식으로 색상의 밝기를 수정하며 흑백 값에는 영향을 미치지 않습니다. 감마 보정은 대체로 여러 요소의 대비를 수정하는 데 사용됩니다. 예를 들어 감마값을 변경하여 요소 가장자리와 요소 내부 사이의 대비를 늘리거나 줄일 수 있습니다.

  참고: 이 옵션에서는 감마 곡선을 사용하여 기본 Google 스타일에 대해 상대적인 밝기를 조정합니다. Google에서 기본 지도 스타일을 변경하면 gamma로 스타일이 지정된 지도 지형지물에 변경사항이 적용됩니다. 가능하다면 절대값의 color 스타일러를 사용하는 것이 좋습니다.

• invert_lightness(true인 경우)에서는 기존 밝기를 반전시킵니다. 이 옵션은 예를 들면 흰색 텍스트가 포함된 어두운 지도로 빠르게 전환할 때 유용합니다.

  참고: 이 옵션은 기본 Google 스타일을 반전시킵니다. Google에서 기본 지도 스타일을 변경하면 invert_lightness로 스타일이 지정된 지도 지형지물에 변경사항이 적용됩니다. 가능하다면 절대값의 color 스타일러를 사용하는 것이 좋습니다.

• visibility(on, off 또는 simplified)에서는 요소가 지도에 표시되는지 여부 및 표시 방식을 나타냅니다. simplified 가시성은 영향을 받는 지형지물에서 스타일 지형지물을 제거합니다. 예를 들어 도로는 윤곽선 없는 얇은 선으로 단순화되지만 공원의 경우 라벨 텍스트는 사라지고 라벨 아이콘은 그대로 유지됩니다.
• color(#RRGGBB 형식의 RGB 16진수 문자열)에서는 지형지물 색상을 설정합니다.
• weight(0 이상의 정수 값)에서는 지형지물의 가중치를 픽셀로 지정합니다. 가중치를 높은 값으로 설정하면 타일 테두리 근처가 잘릴 수도 있습니다.

스타일 규칙은 지정된 순서대로 적용됩니다. 여러 작업을 단일 스타일 작업으로 병합하지 마십시오. 그 대신, 각 작업을 별도의 항목으로 스타일 배열에 정의하세요.

참고: 일부 작업은 교환 법칙이 적용되지 않으므로 순서가 중요합니다. 스타일 작업을 통해 수정되는 지형지물 및 요소들은 (대체로) 이미 기존 스타일이 있습니다. 기존 스타일이 있다면 해당 스타일에 작업이 진행됩니다.

색조, 채도, 밝기 모델

스타일 지도는 색조, 채도, 명도(HSL) 모델을 사용하여 스타일러 작업 내에 색상을 표시합니다. 색조는 기본 색상을 나타내고 채도는 색상의 강도를 나타내며 밝기는 색상 구성요소 중 흰색 또는 검은색의 상대적인 양을 나타냅니다.

감마 보정은 색 공간에서 밝기를 수정하며 일반적으로 대비를 늘리거나 줄입니다. 또한 HSL 모델은 좌표 공간 내에 있는 색상을 정의합니다. 여기에서 hue는 색상환 내 방향을 나타내며 채도와 밝기는 서로 다른 축에 따른 진폭을 나타냅니다. 색조는 RGB 색 공간 내에서 측정되며 이 색 공간은 흑백의 명암이 없다는 점을 제외하고는 대부분의 RGB 색 공간과 유사합니다.

hue는 HTML 16진수 색상 값을 취하기는 하지만 이 값은 기본 색상(즉, 색상환에서의 방향)을 결정하는 데만 사용되며 채도나 밝기는 결정하지 않습니다. 채도나 밝기는 백분율로 따로 표시됩니다.

예를 들어 순수 녹색의 색조를 hue:0x00ff00 또는 hue:0x000100으로 정의할 수 있습니다. 두 색조는 동일합니다. 두 값은 HSL 색상 모델에서 순수 녹색을 가리킵니다.

RGB 색상환

균등한 부분의 빨강, 녹색 및 파랑으로 구성되는 RGB hue 값은 색조를 나타내지 않는데, 그 이유는 이러한 값이 HSL 좌표 공간에서 방향을 나타내지 않기 때문입니다. 예를 들면 '#000000'(검은색), '#FFFFFF'(흰색), 회색의 모든 순수 음영이 있습니다. 검은색, 흰색 또는 회색을 나타내려면 모든 saturation(값을 -100으로 설정)을 삭제하고 그 대신 lightness를 조정해야 합니다.

또한 이미 색 구성표가 있는 기존 지형지물을 수정할 때 hue 등의 값을 변경해도 기존 saturation 또는 lightness는 변경되지 않습니다.