• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

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

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
2018.12.03追記
APIキーの取得方法のリンク先を変更しました!
2017.09.01追記
コードの表示がバグっていたので修正しました!

プロクラスの中山です!
だいぶ寒くなってきましたね・・・秋が終わる前に、先日プロクラススタッフ一同で紅葉を見に行ってきました! 紅葉 プロクラスは京都にあるので紅葉の名所がたくさんありますが、今回は12月3日までライトアップが行われている永観堂にいきました! ↓永観堂マップ↓ GoogleMapをちょっと紅葉っぽい色のマップにカスタマイズしてみました。GoogleMapをオリジナルの色を変えるのは楽しいですよ♪
オマケにちょっとウザイぴょんぴょん跳ねるピンも設置しています!
今日はこのGoogleMapのカスタマイズの仕方をご紹介します。サイトの雰囲気に合わせてオリジナルな地図に変えてみませんか?

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

①準備するもの

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

【追記】GoogleマップのAPIキーについて

2016年6月22日よりGoogleマップを設置する際に「APIキー」が必要になりました!
それ以前にGoogleマップをサイト内に設置している場合はそのまま表示されるのですが、2016年6月22日以降にGoogleマップを設置するとAPIキーを取得していない場合はこちらの画像が表示されてしまいます。 706-353 無料ですぐに取得することができるので、地図を作成する前に準備しましょう。
取得方法は下記の参考サイトをご覧下さい。 GoogleマップAPIキーを取得する
※キーを入力しても数分~しばらくの間は地図が表示されないおそれがあります。

②地図の座標を調べる

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

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

地図を表示するためのコードと、地図を表示するdivタグを設置します。
これだけでデフォルトの地図は表示される、はず!
まだGoogleMapデフォルトの色なので、まずは普通の色の地図が表示されるか試してみてください。

<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の埋め込みと、デザインやアイコンの変更などをカスタマイズする方法

ただサイト上にGoogleMapを表示したいだけなら…

色を変える必要がない場合はとっても簡単にGoogleMapを設置できます!
WebでGoogleMapを開いて「共有」というボタンを押したら埋め込み用のコードが生成されます。

プロクラスGoogleMap

または、WordPressなどをお使いの方はGoogleMapを埋め込むためのプラグインもあります。こちらは住所を入れるだけで自動で地図を出してくれるので便利ですよ!

かなり手軽なのでお好みの地図にカスタマイズするまでの間、とりあえず載せておきたい!という方におすすめです♪

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら