Google Maps API Styled Map Wizardでできること
店舗の場所などを掲載するときに Google Map APIを利用されることもあると思います
Google Maps(グーグルマップ)はとても便利なんですが
サイトのデザインとGoogle Mapが合わないんだよね って思う人も多いでしょう
そこで「Google Maps API Styled Map Wizard」を利用して
簡単にGoogle Mapのデザインを変更する方法を紹介します
ご紹介ありがとうございます
バシャログ。さま
アクセスが急に増えてびっくりしてます！
目次
Google Maps API Styled Wizardの使い方
「Google Maps API Styled Map Wizard」
この画面から スタイルを変更できます
※最近デザインが一新されました(2011/10/5に確認)
- 「Feature type」でスタイルを変更したい項目を選択
- 「Stylers」でどんなスタイルにしたいのか設定
- 「Add Style」をクリックしてスタイルを適用
- 変更したスタイルは プレビューマップにリアルタイムに反映され
適用したスタイルは「Map Style」に追加されていきます - 最後に「showJSON」をクリックすると コードが表示されるので
そのコードを貼り付ければOKです
設定項目
Google Maps API Styled Map Wizard設定項目の詳細もあります
Google Maps API Styled Map Wizard使ってサンプル作ってみた
Google Map APIを利用したGoogleマップの表示例
sample.html
<html>
<head>
:
<link rel="stylesheet" href="sample.css">
<script src="http://www.google.com/jsapi/"></script>
<script src="sample.js"></script>
:
</head>
<body>
:
<div id="map"></div>
:
</body>
</html>
- 「<script src=”http://www.google.com/jsapi/”></script>」はGoogle Ajax APIを使うときに必要です
- 「<script src=”sample.js”></script>」で外部ファイルの「sample.js」を読み込みます
- 「<div id=”map”></div>」ここにGoogleマップが表示されます
sample.js
google.load("maps", "3.x", {"other_params":"sensor=false"});
//マップの初期設定
function initialize() {
//マップの中心座標
var myLatLng = new google.maps.LatLng(35.47381, 139.59031);
//マップの設定オプション
var myOptions = {
zoom: 10, //ズームレベル
center: myLatLng, //中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP //マップタイプ
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
//作成したマップの呼び出し
google.setOnLoadCallback(initialize);
sample.css
@charset "utf-8";
html,body{
width: 100%;
height: 100%;
}
#map{
width: 100%;
height: 100%;
}
表示したいGoogleマップのサイズ指定を100%にしたいときは
親要素のサイズ指定がないとGoogleマップが表示されないことがあります
Google Maps API Styled Map Wizardを使ってスタイルを変えていきます
1.海の色を明るくしてみます
【Feature type】 : 「All > Water」
【Stylers】 : 「Hue : #00ffff」 「Lightness : 50」
こんな感じに設定して「Add Style」をクリック
2.公園の緑を濃くしてみます
【Feature type】 : 「All > Point of interest > Park」
【Stylers】 : 「Gamma : 0.4」
「Add Style」をクリック
3.道路を消してみます
【Feature type】 : 「All > Road」
【Stylers】 : 「Visibility : off」
「Add Style」をクリック
5.線路も消してみます
【Feature type】 : 「All > Transit」
【Stylers】 : 「Visibility : off」
「Add Style」をクリック
できたJSONコードを貼り付ける
いろいろスタイルを設定できたら
「showJSON」をクリックすると JSONコードが表示されます
できあがったJSONコード
[
{
featureType: "poi.park",
elementType: "all",
stylers: [
{ gamma: 0.4 }
]
},{
featureType: "water",
elementType: "all",
stylers: [
{ hue: "#00ffff" },
{ lightness: 50 }
]
},{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "all",
elementType: "all",
stylers: [
]
}
]
このコードをsample.jsに貼りつけてみましょう
スタイルを追加したsample.js
google.load("maps", "3.x", {"other_params":"sensor=false"});
//マップの初期設定
function initialize() {
//マップの中心座標
var myLatLng = new google.maps.LatLng(35.47381, 139.59031);
//マップの設定オプション
var myOptions = {
zoom: 10, //ズームレベル
center: myLatLng, //中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP, //マップタイプ
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var samplestyle = [
{
featureType: "poi.park",
elementType: "all",
stylers: [
{ gamma: 0.4 }
]
},{
featureType: "water",
elementType: "all",
stylers: [
{ hue: "#00ffff" },
{ lightness: 50 }
]
},{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "all",
stylers: [
{ gamma: 0 },
{ visibility: "off" }
]
}
];
var samplestyleOptions = {
name: "シンプル"
};
var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
map.mapTypes.set('simple', sampleMapType);
map.setMapTypeId('simple');
}
//作成したマップの呼び出し
google.setOnLoadCallback(initialize);
samplestyleとしてスタイルを設定
var samplestyle = [
{
featureType: "poi.park",
elementType: "all",
stylers: [
{ gamma: 0.4 }
]
},{
featureType: "water",
elementType: "all",
stylers: [
{ hue: "#00ffff" },
{ lightness: 50 }
]
},{
featureType: "road",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "all",
stylers: [
{ visibility: "off" }
]
},{
featureType: "transit",
elementType: "all",
stylers: [
{ gamma: 0 },
{ visibility: "off" }
]
}
];
スタイルのオプションを設定
var samplestyleOptions = {
name: "シンプル"
};
追加したスタイルの名前を「シンプル」と付けました
「new google.maps.StyledMapType(スタイルの設定, オプション)」でマップスタイルを作成
var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
追加したスタイルとオプション設定を 変数「sampleMapType」とします
Googleマップに表示させるためにマップタイプを作成
map.mapTypes.set('simple', sampleMapType);
作成したマップスタイルを「simple」というIDを付けてマップタイプを作成します
マップタイプIDには「ROADMAP」「SATELLITE」「HYBRID」「TERRAIN」が用意されており
「google.maps.MapTypeId.ROADMAP」のように指定することができます
Googleマップでマップタイプ「simple」を選択できるようにする
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
}
「mapTypeIds:」はGoogleマップで選択できるマップタイプを設定できます
※通常 画面右上に表示されているボタン部分です
初期のマップタイプを「simple」に設定する
map.setMapTypeId('simple');
こうすることで Googleマップを表示したときのマップタイプを「simple」に設定することができます
サンプルの完成
今回作ったサンプルマップ
右上のボタンからスタイルを切り替えることもできます
だいぶ印象が変わりますね
こんな感じで サイトのデザインに合わせたGoogleマップを作ることができます
日本語表示とかアレンジもしてみた
いつの間にか使えなくなってました…
ちょっと他の方法を考えてみます
※2011/8/11現在 日本語版も利用できます
一時的に動かなかっただけかもしれません
Google Maps API Styled Map Wizard日本語版
変更ポイント
- 各設定項目を日本語表記
- MAPのサイズを大きくした