[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

公開日: : javascript, Web制作 ,

まだまだあるぞ!Google Maps javaScript API v3

さて、2回にわたって紹介してきたGoogle Maps javaScript API v3ですが、まだまだ出来る事があるんです。

今回は、Mapの色を変更する事に焦点を当ててみたいと思います。

色を変更する設定は、地味に大変

ということで、ネットで公開されているサービスを使用します!

http://code.prostaff1.com/sample/10_google-map/styledmaps/

ここで色々設定できます!
では使い方を見ていきましょう。

img_20140827_01

このような画面になっています。

では、道路を消すにはどうしたらいいでしょう?
やってみましょう!

img_20140827_02

まず、「対象物タイプ」の項目から、道路 > 高速道路と選択していき、下のスタイルで表示状態にチェック!
そして、オフを選択すると、見事に消えました。

そのまま、高速道路を幹線道路に選択を変えると、高速道路はまた表示されてしまいます。
ですので、右の「スタイルの追加」ボタンで追加しなければなりません。

これを繰り返し、全ての道路を消す事ができます。

色の変更もしてみよう

次に、色の変更をしてみたいと思います。
変更するのは、全体!
いざ、まいる!

img_20140827_03

実は、全体の色を変更するのはとても簡単で、一カ所変更するだけです。
「対象物タイプ」は、すべてのままで、スタイルの色相をチェックし、自由に色を選びましょう。

これだけで、デザインに合った地図に変更できますね!

実際のマップに適用させよう!

では、この変更したものを実際のソースに落とし込んでいきたいと思います。

まずは、コードの生成。

img_20140827_04

「JSONコードを表示」ボタンでコードを表示させます。

img_20140827_05

なんだかいかついコードが表示されますが、大丈夫です。
全部コピーしちゃいましょう。

コピーしたものを前回のソースにはりつけちゃいます。

・・・・・・・・・・

・・・・

うまくいかない・・・。
何がいけないのかわからない・・・。

そんなとき、救世主が現れました!
もっとわかりやすいサービス見つけました。

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

こちらを使っていきますが、先に紹介したサイトのコードも必要なので保存しておきましょう。

もう、読んで字の如くで本当に簡単にコードを生成してくれます。

img_20140827_07

この必要な部分を埋めるだけ!
埋めたら緑のボタンをプッシュ!

<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.70564,139.751891);/* 座標 */
var myOptions = {
zoom: 16, /*拡大比率*/
center: latlng,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById('map1'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: 'hidef',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#003366' }
]
}
];
var styledMapOptions = { name: 'hidef' }/*地図右上のタイトル*/
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="map1" style="width:600px; height:400px; margin:0 auto;"></div>

親切に、apiのリンクまで生成してくれますよ!

このソースを元に、最初に作って生成したコードの必要部分を移植していきます。

<script>
function googleMap() {
	var latlng = new google.maps.LatLng(35.70564,139.751891);/* 座標 */
	var myOptions = {
		zoom: 16, /*拡大比率*/
		center: latlng,
		mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
	/*アイコン設定*/
	var image = new google.maps.MarkerImage(
				"images/icon.png",
        new google.maps.Size(57,86), //ここでサイズを変更
        new google.maps.Point(0,0)
        );
	var markerOptions = {
		position: latlng,
		map: map,
		icon: image,
		title: 'hidef',/*タイトル*/
		animation: google.maps.Animation.DROP/*アニメーション*/
	};
	var marker = new google.maps.Marker(markerOptions);
	/*取得スタイルの貼り付け*/
	var styleOptions = [
  {
    featureType: "road.highway",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.local",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "all",
    elementType: "all",
    stylers: [
      { hue: "#00b2ff" }
    ]
  }
];
	var styledMapOptions = { name: 'hidef' }/*地図右上のタイトル*/
	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>

こうです!
アイコンの部分なども前回と一致するように変更しました。

img_20140827_06

 

いやー、うまくいきました。
途中、どうなる事かと思いましたが、なんとか形にできましたし、よりお手軽なサービスも見つかりました。

サンプルを用意しました。よかったらご覧下さい。

まとめ

今回は、一時挫折しかけましたが、最後までたどり着けました。
未だに原因がわからないのですが、追加した場所が悪かったのかなー?と思ってます。

兎にも角にも、両方のサービスを合わせる事で、思い通りのマップを作り上げる事が出来ますのでデザインに合ったマップが必要な方は、是非試してみてください。

本当に簡単ですよ!

ad

関連記事

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑