HOME > > > Googleマップのコントローラーを全て無効(表示しない)にする方法

Googleマップのコントローラーを全て無効(表示しない)にする方法

コントローラーを非表示

Googleマップのコントローラー達を非表示にする

Googleマップをサイトに設置する時は対象サイトの位置を知らせる事が殆どです。
場所によっては細かい説明が必要な場合もありますが、「逆にココしかありません、周りには何もありません、ココです!」という場合もあるかもしれません。
そんな場合は特別コントローラーがいらない時もあります。コントローラー達の役割が必要ない場合は消しちゃって、ユーザーにビタッと場所を知らせちゃいましょう。

サンプルはこちら

マップの設置方法

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

javascript全体

ソースは「アイコン設置」「コントローラー非表示」の設定のみをしています。


<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 = 'アイコン画像のパス';
  var mapMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    title: 'コントローラーを非表示',
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

非表示のオプション

非表示にしているオプションが書かれているのが7行目の「disableDefaultUI: true,」。 これを記述する事で全てのコントローラーが非表示になります。


disableDefaultUI: true,

設置完了

以上で設置完了です。でも今さらですが殆ど使う事は無いかもしれませんね。
シンプルなデザインを使いたい時はスッキリしていいかもしれません。

まとめ

しかし、Googleマップの記事を書き出してから3回に1回はGoogleマップネタです。
1ページでまとめてしまってもいいのですがかなり長くなりますし、何と言っても見づらいです。
ちょい出しみたくなっちゃってますが、「辞書」みたいなのが好きです。

このページを共有する

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