ナビゲーションコントロールの有効/無効

広告

利用者が地図のズームレベルを変更するための用意されているのがナビゲーションコントロールです。ナビゲーションコントロールはデフォルトで次の位置に表示されているものです。

p1-1

ただ表示されているコントロールは小画面用のものです。地図の幅が400ピクセル以上で高さが350ピクセル以上の場合は大画面上のコントロールが表示されます。(ただし高さは他のコントロールの配置によってはもう少し必要だと思われる)。

p1-2

小画面用のものの場合、「+」をクリックするとより詳細な地図が表示され、「-」をクリックするとより広域な地図が表示されます。

p1-3

ナビゲーションコントロールはデフォルトで表示されていますが、明示的にナビゲーションコントロールを有効にしたり無効にしたりすることができます。

ナビゲーションコントロールを表示させないように無効にする場合はMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「navigationControl」プロパティに"false"を設定して下さい。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: false
};

これでナビゲーションコントロールが無効となり画面に表示されなくなります。もし明示的に有効にしたい場合には"true"を設定して下さい。

サンプルコード

では実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(34.454129,136.725798);
  var opts = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControl: false
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code1_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps APIを使ったサンプルです。</p>

    <div id="map_canvas" style="width:500px; height:300px"></div>

  </body>
</html>

ブラウザで上記ページを開くと次のように表示されます。

p1-4

左上に表示されていたナビゲーションコントロールが表示されなくなりました。(ストリートビュー用のペグマンは残ります)。

( Written by Tatsuo Ikura )