マップタイプコントールのスタイルの設定

広告

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

1.選択可能なマップタイプコントロールのスタイル
2.スタイルの設定
3.サンプルコード

選択可能なマップタイプコントロールのスタイル

利用可能なマップタイプの種類はgoogle.maps.MapTypeControlStyleクラスの定数として次の3つが定義されています。

ConstantDescription
DEFAULTUses the default map type control. The control which DEFAULT maps to will vary according to window size and other factors. It may change in future versions of the API.
DROPDOWN_MENUA dropdown menu for the screen realestate conscious.
HORIZONTAL_BARThe standard horizontal radio buttons bar.

HORIZONTAL_BARは水平方向に選択できるマップタイプを並べて表示します。

p4-1

DROPDOWN_MENUはドロップウダウン形式で選択できるマップタイプを並べて表示します。

p4-2

DEFAULTを設定している場合は、地図の横幅に応じて自動的にHORIZONTAL_BARかDROPDOWN_MENUが選択されて表示されます。

スタイルの設定

マップタイプコントロールに対してスタイルや位置そして選択可能なマップタイプを指定するにはのmapTypeControlOptionsプロパティを使います。mapTypeControlOptionsプロパティにはgoogle.maps.MapTypeControlOptionsクラスのオブジェクトを設定します。このクラスでは3つのプロパティが用意されており、スタイルの設定にはstyleプロパティを使います。

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

var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

このようにマップタイプコントロールのスタイルを設定することができます。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。今回のサンプルでは横幅の違う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 )