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

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

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

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');