地図位置の自動調整の有効/無効

広告

情報ウィンドウを地図上に表示すると、情報ウィンドウを表示するために必要であれば地図の位置が自動的に移動します。

p7-1

この地図で右下のほうにある位置に設定した情報ウィンドウを表示すると、情報ウィンドウが地図内に表示されるように地図の中心座標が自動的に移動します。

p7-2

この動作を無効にし、情報ウィンドウが表示された時でも地図が自動的に移動しないように設定することができます。

地図位置の自動調整を無効にするにはInfoWindowクラスのオブジェクトを作成する時に指定するInfoWindowOptionsオブジェクトの「disableAutoPan」プロパティに設定します。無効にする場合は"true"を指定して下さい。 

var iw_latlng = new google.maps.LatLng(35.142792,136.900635);
var infowindow = new google.maps.InfoWindow({
  content: 'ウィンドウ',
  position: iw_latlng,
  disableAutoPan: true
});

infowindow.open(map);

この場合、情報ウィンドウが表示された時に、情報ウィンドウが地図内に全て表示されない位置だっとしても地図の中心点は自動で移動しません。

この設定は地図に対してではなく情報ウィンドウに対して設定するため、情報ウィンドウ毎に設定することができます。
サンプルコード

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

var map;

function initialize() {
  var latlng = new google.maps.LatLng(35.47154,139.627175);
  var opts = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

function openAkarenga() {
  var iw_latlng = new google.maps.LatLng(35.45242,139.64314);
  var infowindow = new google.maps.InfoWindow({
    content: '赤レンガ倉庫',
    position: iw_latlng,
    disableAutoPan: true
  });

  infowindow.open(map);
}

function openYamashita() {
  var iw_latlng = new google.maps.LatLng(35.447753,139.646745);
  var infowindow = new google.maps.InfoWindow({
    content: '山下公園',
    position: iw_latlng,
    disableAutoPan: false
  });

  infowindow.open(map);
}

<!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/code7_1.js" type="text/javascript"></script>

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

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

    <form>
    <p>
    <input type="button" id="akarenga" value="赤レンガ倉庫" onclick="openAkarenga()" />
    <input type="button" id="yamasihta" value="山下公園" onclick="openYamashita()" />
    </p>
    </form>
  </body>
</html>

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

p7-3

地図下に表示されている「赤レンガ倉庫」と書かれたボタンを押すと情報ウィンドウが表示されますが、地図位置の自動調整は無効になっているので地図の位置は移動しません。

p7-4

右下のほうに情報ウィンドウの一部だけが見えていることが分かるかと思います。

次に「山下公園」と書かれたボタンを押すと同じように情報ウィンドウが表示されますが、今度は地図位置の自動調整は有効になっているので情報ウィンドウが地図内に全て表示されるように地図の位置が移動します。

p7-5

このように情報ウィンドウ単位で設定を行うことができます。

( Written by Tatsuo Ikura )