모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

스타일 참조

스타일 옵션으로 표준 Google 지도 스타일의 표현을 맞춤 설정하고 도로, 공원, 기업 및 기타 관심 지점 등과 같은 지형의 시각적 표시를 변경할 수 있습니다. 이러한 지형지물의 스타일을 변경할 뿐만 아니라 지형지물을 완전히 숨길 수 있습니다. 즉, 지도의 특정 요소를 강조하거나 지도로 주변 페이지의 스타일을 보완할 수 있습니다.

다음 JSON 스타일 선언에서는 모든 지도 지형지물을 회색으로 바꾸고, 간선도로 구조를 파란색으로 칠하고, 풍경 레이블을 완전히 숨깁니다.

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

JSON 객체

JSON 스타일 선언은 다음 요소로 구성됩니다.

  • featureType(선택 항목) - 스타일을 변경하기 위해 선택된 지형지물. 지형지물은 지도상의 지리적 특성이며 여기에는 도로, 공원, 호수/바다 등이 포함됩니다. 지형지물을 지정하지 않으면 모든 지형지물이 선택됩니다.
  • elementType(선택 항목) - 선택할 지정된 지형지물의 속성. 요소는 지형지물의 하위 부분이며 레이블과 기하학적 형태를 포함합니다. 요소를 지정하지 않으면 지형지물의 모든 요소가 선택됩니다.
  • stylers - 선택한 지형지물과 요소에 적용할 규칙. 스타일러는 지형지물의 색상, 가시성 및 가중치를 나타냅니다. 하나의 지형지물에 하나 이상의 스타일러를 적용할 수 있습니다.

스타일을 지정하려면, featureTypeelementType 선택기와 stylers를 하나의 스타일 배열로 조합해야 합니다. 모든 조합의 지형지물이 단일 배열에 배치될 수 있습니다. 그러나 동시에 적용할 수 있는 스타일 수는 제한됩니다. 스타일 배열이 최대 문자 수를 초과하면 스타일이 적용되지 않습니다.

이 페이지의 남은 부분에서는 지형지물, 요소 및 스타일러에 대해 추가로 설명합니다.

featureType

다음 JSON 스니펫은 지도상의 모든 도로를 선택합니다.

{
  "featureType": "road"
}

지형지물 또는 지형지물 유형은 지도상의 지리적 특성이며 여기에는 도로, 공원, 호수/바다, 사업체 등이 포함됩니다.

지형지물은 all을 루트로 하는 카테고리 트리를 형성합니다. 지형지물을 지정하지 않으면 모든 지형지물이 선택됩니다. all로 지형지물을 지정하는 것과 효과가 동일합니다.

일부 지형지물에는 점(.) 표기법을 사용하여 지정하는 하위 지형지물이 포함됩니다. 예: landscape.natural 또는 road.local. 상위 지형지물만을 지정하는 경우(예: road), 상위 지형지물에 지정한 스타일이 모든 하위 지형지물에 적용됩니다(예: road.localroad.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는 호수/바다를 선택합니다.

elementType

다음 JSON 스니펫은 모든 지역 도로에 대한 레이블을 선택합니다.

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

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

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

  • all(기본값)은 지정된 지형지물의 모든 요소를 선택합니다.
  • geometry는 지정된 지형지물의 모든 기하학적 요소를 선택합니다.
    • geometry.fill은 지형지물의 기하학적 구조의 채우기만 선택합니다.
    • geometry.stroke는 지형지물의 기하학적 구조의 스트로크만 선택합니다.
  • labels는 지정된 지형지물과 연관된 텍스트 레이블을 선택합니다.
    • labels.icon은 지형지물 레이블 내에 표시된 아이콘만 선택합니다.
    • labels.text는 레이블의 텍스트만 선택합니다.
    • labels.text.fill은 레이블의 채우기만 선택합니다. 레이블의 채우기는 일반적으로 레이블 텍스트를 둘러싼 컬러 윤곽선으로 렌더링됩니다.
    • labels.text.stroke는 레이블 텍스트의 스트로크만 선택합니다.

stylers

스타일러는 지도 지형지물 및 요소에 적용할 수 있는 서식 옵션입니다.

다음 JSON 스니펫은 RGB 값을 사용하여 지형지물을 밝은 녹색으로 표시합니다.

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

이 스니펫은 지형지물의 시작 색상에 상관없이 지형지물 색상에서 모든 강도를 제거합니다. 그 효과는 지형지물을 회색조로 렌더링하는 것입니다.

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

이 스니펫은 지형지물을 완전히 숨깁니다.

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

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

  • 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 이상)는 지형지물의 선 두께를 픽셀 단위로 설정합니다. Weight를 높은 값으로 설정하면 타일 테두리 근처가 잘릴 수도 있습니다.

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

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

색조, 채도, 밝기 모델

스타일 지정 지도는 색조, 채도, 밝기(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가 변경되지 않습니다.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.