Google Map api その2 グーグルマップのデザインを変えてみる

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

DEMO
どうもこんばんは、前回に引き続きGoogle Map apiについてもう少し。今回はマップのデザインを変えるという話です。グレースケールのマップにしてみたり、赤青黄色のマップにしてみたり、かなり自由にデザイン変更が行えます。

グレースケールやカラフルなマップ等、11種類のデザインコード例

11種類のデザイン&コード例を作成してみましたのでご興味がございましたら遊んでみてください。


このデザイン変更はMapTypeStylerにて行うことができます。

使用方法は至って簡単かつ感覚的に行えます。
変更項目に関する説明をしておきます。
 

設定値 概要
Selecter 編集、変更したいパーツを選択します。マップの全部を変更する”all”〜細かいパーツ(例えば学校のみ)まで選択することができます。
Element type 選択したパーツの編集、変更する範囲を選択します。すべて/パス(線系)/ラベル系で選択します。
Visibility 表示/シンプル表示/非表示の選択が行えます
Inver lightness 明度の反転
Hue メイン色の選択
Saturation 色の濃さ
Lightness 明るさ
Gamma ガンマ値

 
基本的な編集の流れは 変更したいパーツ選び ⇒ 変更 ⇒ Map Styleに登録 ⇒ 重ねて更に変更したパーツを選択 ⇒ 変更 … という流れになります。
 
この編集ができましたら「show JSON」というボタンからコードを取得し
google map のスクリプト内にコピー&ペーストして半ば完成です。
 
コードは以下のようになりますがこのコードを単純にペーストしても動きません。
詳しくはデモかGoogle Maps API Version3 日本語ドキュメント(非公式)をご確認ください。

Map Styleの例


[
{
stylers: [
{ hue: "#0008ff" },
{ saturation: 65 }
]
},{
featureType: "poi",
stylers: [
{ visibility: "off" },
{ hue: "#00e5ff" },
{ saturation: 42 },
{ lightness: -25 }
]
},{
elementType: "geometry",
stylers: [
{ hue: "#00ff55" }
]
}
]

 
デモのコード


<title>google map api test</title>

var map;
var cent = new google.maps.LatLng(40.740494,-73.99704);

var MY_MAPTYPE_ID = ‘cool’;

function initialize() {

var stylez = [
{
featureType: "all",
elementType: "all",
stylers: [
{ visibility: "simplified" },
{ hue: "#ff4d00" },
{ saturation: -100 },
{ invert_lightness: true }
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];

var mapOptions = {
zoom: 12,
center: cent,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

var styledMapOptions = {
name: "type2"
};

var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);

map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

var markerOpts = {
position: new google.maps.LatLng(40.740494,-73.99704),
map: map,
title: "marker test",
icon:"images/pinB2.png"
};

var marker = new google.maps.Marker(markerOpts);
var infowin = new google.maps.InfoWindow({content:"test"});
google.maps.event.addListener(marker, ‘mouseover’, function(){infowin.open(map, marker);});
google.maps.event.addListener(marker, ‘mouseout’, function(){infowin.close();});

}

<div style="width: 100%;height: 100%"></div>