HOME > > > Googlemapを設置する時に建物名やカテゴリーアイコンなど全て非表示にしてスタリッシュなマップを作る方法

Googlemapを設置する時に建物名やカテゴリーアイコンなど全て非表示にしてスタリッシュなマップを作る方法

googlemap

Googleマップで地図以外の文字とアイコンを非表示にする

Googleマップをサイトに設置する時、場所を示す沢山の文字やアイコンが表示されます。
対象場所の近くを示す意味では非常に大事ではありますが、デザイン上スタイリッシュなマップにしたい時があると思います。そんな時は思い切って全ての文字やアイコンを非表示にしてしまってはどうでしょうか。
マップがイラストの様に見えてスッキリすると思います。

サンプルはこちら

マップの設置方法

マップの設置方法は以前の記事を確認してください。

javascript全体

以下のソースをhead内に記述します。
ソースは「アイコン設置」「スタイルの非表示」の設定のみをしています。


<script>
function initialize() {
  var latlng = new google.maps.LatLng(37.4220, -122.08491731);
  var myOptions = {
    zoom: 17,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  /* アイコン設定 */ 
  var image = 'images/ico_map.png';
  var mapMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    title: 'コントローラーを非表示',
  });
  
  /* スタイル */
  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

非表示のスタイル

非表示にしているオプションが書かれているのが「/*スタイル*/」の部分からになります。 これを記述する事で全て文字やアイコンが非表示になります。


var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

スタイル解説

featureType

地図上のどの対象物に適用するか選択。

elementType

その対象物のどの要素に適用するかを選択。

stylers

offで非表示、onで表示になります。

設置完了

以上で設置完了です。かなりスタイリッシュになりますね。
対象場所にはアイコンを設置するととても解り易くなります。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket