디자이너를 위한 GoogleMap 스타일 지정 방법

GoogleMap의 스타일 지정 방법이 조금 알기 어렵게 느꼈기 때문에, 나름대로 해석해 보았습니다.
그때의 메모 입니다◯

기본 규칙



GoogleMap 스타일은

  • featureType (스타일을 적용하는 대상)

  • elementType (대상을 구성하는 디자인 요소)

  • stylers (스타일)

  • 라는 세 세트를 JSON 형식으로 지정합니다. ↓ 같은 느낌입니다.
    [
      {
        "featureType": "road",
        "elementType": "geometry.fill", 
        "stylers": [{ 
            "color": "#ff0000"
          }
        ]
      }
    ]
    

    featureType, elementType, styler란 무엇입니까?



    세 세트 중 스타일러스는 어쩐지 상상할 수 있지만 featureType, elementType은 지금 핀과 오지 않는 분도 있을까 생각합니다.
    GoogleMapAPI의 스타일 참조을 본 나 나름의 해석은 다음과 같은 느낌입니다.

  • featureType (스타일을 적용할 대상)
  • 지도상의 어디를 바꾸는지를 지정하기 위한 것.
  • 도로, 공원, 수역 등지도의 지리적 특징 (feature)으로 지정할 수있는 것이 특징입니다 ◯


  • elementType (그 대상을 구성하는 디자인 요소)
  • 위에서 지정한 featureType의 어느 부분을 바꿀지 지정하기 위한 것.
  • 채우기, 선, 텍스트 색상 등입니다.


  • stylers (스타일)
  • 위에서 지정한 어느 부분을 어떻게 할 것인지를 지정하기 위한 것.
  • 색은 빨강, 색조는 이것 정도, 채도는 80・・・등입니다.


  • 구체적으로 어떤 지정을 할 수 있는지는 스타일 참조 에서 자세하게 설명해 줍니다 ◯

    css에 비유해 보면...



    어쩐지 css를 닮았을까라고 느꼈으므로, css에 비유해 해석해 보았습니다.
    라는 것도 CSS도

  • 선택기 (스타일을 적용하는 대상)

  • 속성 (대상을 구성하는 디자인 요소)

  • 의 3개 세트로 지정하고 있는 곳이 비슷하기 때문입니다.

    예를 들어, css에서 .road 라는 클래스를 가진 요소의 채우기를 변경하려면 다음과 같이 됩니다.
    .road { /* セレクター */
        background: #ff0000; /* プロパティ:値; */
    }
    

    이것을 GoogleMapAPI로 실현하려면 ↓과 같은 느낌입니다 ◯
    [
      {
        "featureType": "road", //featureType
        "elementType": "geometry.fill", //elementType
        "stylers": [{ //stylers
            "color": "#ff0000"
          }
        ]
      }
    ]
    

    정리하면
  • featureType → 선택기
  • elementType → 속성
  • stylers → 값

  • 처럼 파악하면 조금 알기 쉬운 것일까.

    다만, css와 GoogleMap는 별개이므로, 위와 같은 포착 방법은 조금 어폐도 있을지도 모릅니다.
    어디까지나, 분위기를 잡기 위한 해석의 하나라고 생각해 주시면 좋겠습니다◯

    덧붙여서 위의 결과는 ↓와 같습니다.



    도로의 칠이 빨간색입니다 ◯

    더 스타일을 변경하려면



    css와 마찬가지로 featureType, elementType, styler의 세 세트를 여러 개 작성하면 그만큼 많은 스타일을 지정할 수 있습니다.
    [
      {
        "featureType": "road", 
        "elementType": "geometry.fill",
        "stylers": [{ 
            "color": "#ff0000"
          }
        ]
      },{
        "featureType": "water", 
        "elementType": "geometry.fill",
        "stylers": [{ 
            "color": "#3399ff"
          }
        ]
      },
        . . .
    ]
    

    또한 featureType, elementType을 지정하지 않을 수도 있습니다.
    이 경우는 모든 featureType, 모든 elementType이 각각 지정됩니다.

    참고


  • 공식 참조
  • Google Map Style Reference

  • 쉽게 스타일을 바꿀 수 있는 편리한 서비스

  • Styled MapWizard
  • SNAZZY MAPS

  • 좋은 웹페이지 즐겨찾기