スタイル付き地図の機能を使って、公園、川、湖などの色を変えて目立たせるようする事ができます。

（１）サンプルコード

　
デモ表示へ
　　

（２）サンプルコードの内容

　
１）スタイル付地図の設定
　
StyledMapTypeオプジェクトを使って独自の地図のスタイルを設定します。
　
①スタイルの設定
　
・featureType: “all”
すべての地図上の要素を灰色にします。
　
・featureType: “water”,
水に関する対象物の設定。青色で表示
　
・featureType: “poi.park”,
公園に関する対象物の設定。緑色、名前を赤文字
　
②マップタイプを定義
　
StyledMapTypeオブジェクトを生成
　
var styledMap = new google.maps.StyledMapType(styles,{name: “Styled Map”});
　
③地図にマップタイプを設定
　
マップのmapTypes属性に定義したマップタイプを設定します。
　
map.mapTypes.set(‘map_style’, styledMap);
　
④mapTypeIds配列にマップタイプを設定
　
map.setMapTypeId(‘map_style’);
　
２）projection_changedイベント
　
地図が表示される際に一度発行されるprojection_changedイベントを使って上記スタイルを設定します。

AngularJS、Googleマップの他の記事の目次

関連記事の目次