マップタイプコントールのスタイルと位置を設定する

広告

マップタイプコントロールは地図の大きさなどに合わせてコントロールが大きくなりすぎないようにいくつかのスタイルが用意されています。ここではマップタイプコントロールのスタイルについて設定する方法、そしてコントロールを表示する位置を設定する方法について解説します。

1.マップタイプコントロールのスタイルを設定する
2.スタイルの設定
3.サンプルコード

マップタイプコントロールで利用可能なスタイルはgoogle.maps.MapTypeControlStyleクラスの定数として定義されており、水平方向にマップタイプを並べる方法と、ドロップダウンメニューの形式でマップタイプを表示する方法があります。

DEFAULT         Uses the default map type control. When the DEFAULT control
                is shown, it will vary according to window size and other 
                factors. The DEFAULT control may change in future versions 
                of the API.
DROPDOWN_MENU   A dropdown menu for the screen realestate conscious.
HORIZONTAL_BAR  The standard horizontal radio buttons bar.

HORIZONTAL_BARを設定すると水平方向にマップタイプを並べて表示します。

p4-1

表示されていないマップタイプは「地図」または「航空写真」をクリックすると表示され選択できるようになります。

p4-2

DROPDOWN_MENUを設定するとマップタイプをドロップウダウンメニューの形式で表示します。

p4-3

現在選択されているマップタイプが表示されおり、マップタイプをクリックするとドロップダウンメニューが表示されて他のマップタイプを選択できるようになります。

p4-4

DEFAULTを設定すると、標準のマップタイプコントロールのスタイルが選択されます。ウィンドウのサイズやその他の条件によって適用されるスタイルが異なる場合があります。DEFAULTに関しては後でサンプルで試します。

-- --

マップタイプコントロールに対してスタイルを設定するには中心座標やズームレベルと同じようにmapTypeControlOptionsプロパティに値を設定します。mapTypeControlOptionsプロパティにはMapTypeControlOptionsクラスのオブジェクトを設定します。

MapTypeControlOptionsクラスでは「mapTypeIds」「position」「style」の3つのプロパティが用意されており、スタイルの設定にはstyleプロパティに対して値を設定します。設定する値はMapTypeControlStyleクラスで定義されている「DEFAULT」「DROPDOWN_MENU」「HORIZONTAL_BAR」のいずれか一つを指定します。

例えばDROPDOWN_MENUを設定する場合には次のように記述します。

var opts = {
    zoom: 13,
    center: new google.maps.LatLng(35.539001,134.228468),
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

var map = new google.maps.Map(document.getElementById("map"), opts);

では簡単なサンプルを作成して実際に試してみます。今回のサンプルでは横幅の違う2つの地図に対してマップタイプコントロールのスタイルを変更してみます。

var map1, map2;

function initialize() {
  var latlng1 = new google.maps.LatLng(43.768615,142.482462);
  var latlng2 = new google.maps.LatLng(43.768615,142.482462);

  var opts1 = {
    zoom: 14,
    center: latlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var opts2 = {
    zoom: 14,
    center: latlng2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map1 = new google.maps.Map(document.getElementById("map_canvas1"), opts1);
  map2 = new google.maps.Map(document.getElementById("map_canvas2"), opts2);
}

function setDefault() {
  var opts1 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT
    }
  };

  var opts2 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DEFAULT
    }
  };

  map1.setOptions(opts1);
  map2.setOptions(opts2);
}

function setDropdown() {
  var opts1 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };

  var opts2 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };

  map1.setOptions(opts1);
  map2.setOptions(opts2);
}

function setHorizon() {
  var opts1 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
  };

  var opts2 = {
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
  };

  map1.setOptions(opts1);
  map2.setOptions(opts2);
}
<!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" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Google Maps サンプル</title>

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false">
    </script>

    <script src="./js/code4_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>自宅の地図です。</p>

    <div id="map_canvas1" style="width:500px; height:200px"></div>
    <div id="map_canvas2" style="width:200px; height:200px;margin-top:10px"></div>

    <form>
    <p>
    <input type="button" id="default" value="DEFAULT" onclick="setDefault()" />
    <input type="button" id="dropdown" value="DROPDOWN_MENU" onclick="setDropdown()" />
    <input type="button" id="horizon" value="HORIZONTAL_BAR" onclick="setHorizon()" />
    </p>
    </form>
  </body>
</html>

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

p4-3

画面下にあるボタンをクリックするとマップタイプコントロールのスタイルを変更できます。まずは「DROPDOWN_MENU」ボタンをクリックしてみます。

p4-4

次に「HORIZONTAL_BAR」ボタンをクリックしてみます。

p4-5

最後に「DEFAULT」ボタンをクリックしてみます。スタイルをDEFAULTに設定した場合、地図の横幅に応じてどのように表示されるのか決まります。今回の場合は横幅が大きい方の地図ではHORIZONTAL_BAR形式のスタイルになり、横幅が小さい方の地図ではDROPDOWN_MENU形式のスタイルになりました。

p4-6

ボタンを押すまではスタイルを設定していなかったので、デフォルトで設定されているスタイルは「DEFAULT」であることが分かります。

( Written by Tatsuo Ikura )