VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップ(23)地図に独自のスタイルを設定

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

(1)サンプルコード


 
デモ表示へ
  

(2)サンプルコードの内容


 
1)スタイル付地図の設定
 
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’);
 
2)projection_changedイベント
 
地図が表示される際に一度発行されるprojection_changedイベントを使って上記スタイルを設定します。

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

モバイルバージョンを終了