【コピペで簡単】Google Mapをおしゃれにカスタマイズしよう

プロクラスの中山です！
だいぶ寒くなってきましたね･･･秋が終わる前に、先日プロクラススタッフ一同で紅葉を見に行ってきました！

プロクラスは京都にあるので紅葉の名所がたくさんありますが、今回は12月3日までライトアップが行われている永観堂にいきました！

↓永観堂マップ↓

GoogleMapをちょっと紅葉っぽい色のマップにカスタマイズしてみました。
オマケにちょっとウザイぴょんぴょん跳ねるピンも設置しています！
今日はこのGoogleMapのカスタマイズの仕方をご紹介します。サイトの雰囲気に合わせてオリジナルな地図に変えてみませんか？

GoogleMapをカスタマイズしよう！

①準備するもの

■地図を載せたいHTMLファイル
■Mapのピンにする画像(ぴょんぴょんしてるやつ)

②地図の座標を調べる

載せたい住所をGoogleMapで検索します。住所の場所で右クリックして「この場所について」を押すと座標が出てきます。これをメモっておきましょう。

③HTMLにコードを貼り付け！

地図を表示するためのコードと、地図を表示するdivタグを設置します。
これだけでデフォルトの地図は表示される、はず！

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(35.014370, 135.795566);
/* この数字の所にさっきGoogleMapで調べた住所の座標を入れる！ */

var myOptions = {
	zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/
	center: latlng,/*地図の中心を指定*/
	mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
/*'map'の部分は地図を表示させたいdivのid名を入れよう*/

/*アイコン設定*/
var icon = new google.maps.MarkerImage('./images/mapicon.png',/*アイコンのURL*/
new google.maps.Size(58,42),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコンの位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '永観堂',/*タイトル*/

animation: google.maps.Animation.BOUNCE
/*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。
動かなくていい場合はこの1行は不要*/

};
var marker = new google.maps.Marker(markerOptions);
var styleOptions = [
/*★★ここに後でカスタマイズするデザインの内容が入ります★★*/
];
var styledMapOptions = { name: '永観堂' }/*地図の上に表示されるタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>

<div id="map" style="width: 100%; height: 300px;">
<!--このdiv内に地図を表示させる。サイズなどはcssで調整してね-->
</div>

上記を丸ごとぺたっとhtmlの地図を表示したい場所にコピペして、住所やアイコンの部分を変えればOK！コピペを想定しているので、詳しい説明は省きます。

さぁ、あとは好きな色に地図をカスタマイズしましょう。
④GoogleMapを好きな色に変える！
Styled Map Wizardで色を調整します。
英語で書いてあるのでわかりにくいですが、好きに触ってみてください！直感的に触っているうちにアーティスティックな地図が完成するかもしれないので、こちらも詳しい説明は省きます。(言い訳)

ちゃんと詳しい説明が見たい人は下記の参考サイトをご覧下さい。
Googleマップのお手軽カスタマイズできる「Styled Maps Wizard」の使い方
いい感じの色に調整できたら右下の「Show JSON」を押すとコードが表示されます。

それを/*★★ここに後でカスタマイズするデザインの内容が入ります★★*/と書いていた場所へ貼り付ける！

そして完成したものがこちら。
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(35.014370, 135.795566);/* さっきGoogleMapで調べた座標を入れる */
var myOptions = {
	zoom: 17, /*拡大比率。0～17で数字が大きいほど拡大！0にすると世界地図になっちゃうよ*/
	center: latlng,/*地図の中心を指定*/
	mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
/*mapの部分は地図を表示されるdivのid名を入れよう*/

/*アイコン設定*/
var icon = new google.maps.MarkerImage('./images/mapicon.png',/*アイコンのURL*/
new google.maps.Size(58,42),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '永観堂',/*タイトル*/

animation: google.maps.Animation.BOUNCE
/*ずっとぴょんぴょんしているBOUNCEか、最初にボトッと落ちてくるDROP。
動かなくていい場合はこの1行は不要*/

};
var marker = new google.maps.Marker(markerOptions);
var styleOptions = [

/*★★ここからカスタマイズしたデザインのJSONコードを貼り付け！★★*/
  {
    "featureType": "poi",
    "stylers": [
      { "hue": "#ff4d00" }
    ]
  },{
    "elementType": "labels.text",
    "stylers": [
      { "hue": "#ff3300" },
      { "visibility": "simplified" },
      { "color": "#e43500" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "hue": "#ffff00" }
    ]
  }			
/*★★ここまでカスタマイズしたデザインのJSONコードを貼り付け！★★*/

];
var styledMapOptions = { name: '永観堂' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('style', sampleType);
map.setMapTypeId('style');
};
google.maps.event.addDomListener(window, 'load', function() {
googleMap();
});
</script>

<div id="map" style="width: 100%; height: 300px;">
<!--このdiv内に地図を表示させる-->
</div>

いろんなものを飛ばしたざっくりとした説明なので、怒られるかもしれませんが･･･普段から雑なもので･･･

もっと知りたいと思った方は是非くわしく調べてみてください！
彩度を下げたり枠線を薄くしたりするだけでもだいぶ印象が変わるので、いろいろチャレンジしてみましょう♪
参考にしたサイト：

コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール

GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法


	
関連