Google Styled Map 에 대해서 알아보자 (2)

아랫글에 이어서..

Google Styled Map은

1.현재 구글에서 제공되는 Default Map을 변경시키는 방법이 있고

2.아싸리 그냥 처음부터? 만드는 방법이 있어

1번은 아래 박스에 설명할께

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];                --> 이렇게 내가 주저리 주저리 variables 를 정해놓은걸

map.setOptions({styles: styles});    --> 여기서 세팅을 하게되면 적용되는거지

뭐 1번은 그렇고 그런거고

아마 2번이 중요할꺼같아

2.번은 StyledMapType 이라는 variable을 아예 만드는거지

function initialize() {

  // Create an array of styles.    --> 스타일 어레이를 만들라네?
  var styles = [                    --> 어때 좀 익숙하지 이제?
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});      --> StyledMapType 객체를 만들어서 styles 어레이에 넣음
  
// Create a map object, and include the MapTypeId to add
  // to the map type control.

  var mapOptions = {        --> 지도객체 옵션에서 mapTypeIds어레이에 새로운거 표시
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);    -->mapTypeIds 랑 새 스타일 지도랑 연결
  map.setMapTypeId('map_style'); 
}

이런식이야..

나도 프로그래머는 아니라서 완벽한 설명은 못해주겠어

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

여기서 GUI 식으로 구성이 되어있으니까 한번 가지고 노는것도 나쁘지 않아

the Styled Maps Wizard 니까.