HOME > > > Googlemapを設置する時にマップの色を「Google Maps API Styled Map Wizard」を使って変更する方法

Googlemapを設置する時にマップの色を「Google Maps API Styled Map Wizard」を使って変更する方法

Googlemap

Googleマップの色を変更します

Googleマップをそのまま使うのも良いのですが、サイトのテイストに合わせてマップの色も変更出来たら嬉しいですね。そこで「Google Maps API Styled Map Wizard」を使ってスタイルを設定します。
ちなみに今まで記事に書いてきた建物名の非表示などもGoogle Maps API Styled Map Wizardを使って行う事ができます。
Googleマップも色々出来るようになって嬉しいですね。

サンプルはこちら

「The Styled Map Wizard」の使い方

左メニュー「Selectors」で色を変えたり、非表示にしたりと細かな設定ができます。
右メニュー「Map Style」は現在設定しているスタイルです。


1つの設定で1つのスタイルを設定する形をなっているので、新たに設定を追加したい場合は右メニューにある「Add」をクリックして、新しいスタイルを追加していきます。


設定が完了したら右メニューの下にある「Show JSON」をクリックするとスタイルのソースが表示されるので、そのソースをhead内に貼り付けると設定完了です。

ソース

ソースの設置方法

例として以下のソースをhead内に貼り付ける方法です。


[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "hue": "#00ff77" },
      { "color": "#144580" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "weight": 0.1 },
      { "hue": "#004cff" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "color": "#8db1e2" }
    ]
  }
]

head内に貼り付ける時はこんな感じになります。


<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.689487, 139.691706);
  var myOptions = {
    zoom: 5,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  
  /* スタイル */
  var styleOptions = [
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "hue": "#00ff77" },
      { "color": "#144580" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "weight": 0.1 },
      { "hue": "#004cff" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "color": "#8db1e2" }
    ]
  }
];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');
  
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

最後に

「Google Maps API Styled Map Wizard」はもっと細かな設定ができます。
色々と変更する事で、ポップにもスタイリッシュなマップにする事が出来ますので色々と実験してみてください。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.05.07