ナビゲーションコントロールの種類

広告

「ナビゲーションコントロールの有効/無効」で記述した通り、ナビゲーションコントロールは地図の大きさに従って自動的に表示する種類が変わります。今回はこの表示されるナビゲーションコントロールの種類を明示的に指定する方法を確認します。

ナビゲーションコントロールをどの種類にするのかはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「navigationControlOptions」プロパティに設定することで選ぶことができます。

「navigationControlOptions」プロパティに設定する値はNavigationControlOptionsオブジェクトです。このオブジェクトには2つのプロパティが用意されているのですが、その中の「style」プロパティに使用するナビゲーションコントロールの種類を表す値を設定します。

指定可能な値はNavigationControlStyleクラスで定数として定義されています。

定数説明
ANDROID小さいズーム コントロールは、Android のネイティブ マップ アプリケーションで使用されるものと類似しています。
DEFAULTデフォルトのナビゲーション コントロール。地図のデフォルトのコントロールは、地図のサイズやその他の要素によって異なります。API の将来のバージョンでは変更される可能性があります。
SMALL小さい、ズームのみのコントロール。
ZOOM_PANズーム スライドと双方向の移動パッドが付いた大きなコントロール。

例えば「ZOOM_PAN」タイプのナビゲーションコントロールを使用する場合は次のように記述します。 

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.ZOOM_PAN
    }
};

このように地図上に表示されるナビゲーションコントロールの種類を設定することができます。

サンプルコード

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

var map;

function initialize() {
  var latlng = new google.maps.LatLng(33.595533,130.361795);
  var opts = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

function setDefault() {
  var opts = {
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.DEFAULT
    }
  };

  map.setOptions(opts);
}

function setAndroid() {
  var opts = {
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.ANDROID
    }
  };

  map.setOptions(opts);
}

function setSmall() {
  var opts = {
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL
    }
  };

  map.setOptions(opts);
}

function setZoomPan() {
  var opts = {
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.ZOOM_PAN
    }
  };

  map.setOptions(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/code4_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>

    <form>
    <p>
    <input type="button" id="default" value="DEFAULT" onclick="setDefault()" />
    <input type="button" id="android" value="ANDROID" onclick="setAndroid()" />
    <input type="button" id="small" value="SMALL" onclick="setSmall()" />
    <input type="button" id="zoompan" value="ZOOM_PAN" onclick="setZoomPan()" />
    </p>
    </form>
  </body>
</html>

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

p4-1

初期値として種類は「DEFAULT」を指定してあるため、地図のサイズから判断されて「SMALL」を指定した場合と同じ種類のナビゲーションコントロールが表示されています。

今回は画面下にあるボタンを押すとナビゲーションコントロールの種類を変更するようにしました。(変更する方法については「地図の作成」を参照下さい)。では「ZOOM_PAN」ボタンを押してみます。

p4-2

大画面の時に表示される種類のナビゲーションコントロールが表示されました。

次に「ANDROID」ボタンを押してみます。

p4-3

Androidを使ったアプリケーションで表示されるような種類のナビゲーションコントロールが表示されました。表示される位置も中央下に変わっています。

( Written by Tatsuo Ikura )