マップタイプコントールの有効/無効の切り替え

広告

地図のタイプを選択することができるマップタイプコントロールの有効と無効と切り替える方法について解説します。

1.マップタイプコントロールとは
2.有効/無効の切り替え
3.サンプルコード

マップタイプコントロールとは

マップタイプコントロールとは地図の画面右上に表示されている下記のコントロールのことです。明示的に指定しなければデフォルトで有効となっています。

p1-1

マップタイプコントロールをクリックすることで、表示されている地図のタイプを「地図」や「航空写真」に切り替えることができます。デフォルトで表示されている地図のタイプは「地図」です。では「航空写真」をクリックしてみて下さい。

p1-2

表示されている地図が「航空写真」のものに切り替わりました。このようにマップタイプコントロールを有効にしておくことで地図を閲覧しているユーザーが自由に地図タイプを切り替えることができます。

有効/無効の切り替え

マップタイプコントロールはデフォルトで有効となっていますが、無効にしたりまたは明示的に有効にするように設定することができます。

設定を行う方法の1つはgoogle.maps.MapOptionsクラスのmapTypeControlプロパティに"true"又は"false"を設定します。 

var latlng = new google.maps.LatLng(35.539001,134.228468);

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

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

"false"を指定すればマップタイプコントロールが無効となります。"true"を指定すれば有効となります。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(35.308401,136.131592);
  var opts = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: 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" />
    <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/code1_1.js" type="text/javascript"></script>

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

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

  </body>
</html>

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

p1-3

今回のサンプルではマップタイプコントロールを無効にして地図を表示してみました。右上に表示されていたマップタイプコントロールが表示されていないことが確認できます。

( Written by Tatsuo Ikura )