情報ウィンドウの表示順序

1つの地図上に複数の情報ウィンドウを表示することができますが、それぞれの位置によっては重なって表示されることになります。このような場合、緯度を基準に表示される順序が決まり、低い緯度の情報ウィンドウが高い緯度の情報ウィンドウより前に表示されます。

緯度は北極に近づくほど高くなり、南極に近づくほど低くなると考えて下さい。

では例として下記の赤い丸の箇所にそれぞれ情報ウィンドウを表示してみます。

p6-1

追加した順は「金山」「鶴舞」「山王」の順ですが、追加した順序とは関係無く情報ウィンドウの位置の緯度が低いものがより上に表示されていることが分かります。

p6-2

このように特に指定しなければ情報ウィンドウの表示順序は自動的に決まりますが、順序を指定することもできます。

表示順序の設定はInfoWindowクラスのオブジェクトを作成する時に指定するInfoWindowOptionsオブジェクトの「zIndex」プロパティに設定します。指定できる値は数値であり、高い値が設定された情報ウィンドウがより上に表示されることになります。

var iw_latlng1 = new google.maps.LatLng(35.142792,136.900635);
var infowindow1 = new google.maps.InfoWindow({
  content: 'ウィンドウ1',
  position: iw_latlng1,
  zIndex: 1
});

infowindow1.open(map);

var iw_latlng2 = new google.maps.LatLng(35.142792,136.900635);
var infowindow2 = new google.maps.InfoWindow({
  content: 'ウィンドウ2',
  position: iw_latlng2,
  zIndex: 2
});

infowindow2.open(map);

この場合、情報ウィンドウ2のほうが「zIndex」プロパティの値が高いため、緯度の値に関係なく上に表示されます。

メソッドを使った設定

InfoWindowOptionsオブジェクトのプロパティで設定する方法以外にInfoWindowクラスで用意されている「setZIndex」メソッドを使っても設定することができます。

setZIndex(zIndex:number)

--

引数には表示順序を表す数値を指定して下さい。実際には次のように使用します。

var infowindow = new google.maps.InfoWindow(iwopts);

infowindow.setZIndex(3);

後から表示順序を再設定する場合などはこの方法を使って下さい。

サンプルコード

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

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

  var iw_latlng1 = new google.maps.LatLng(35.142792,136.900635);
  var infowindow1 = new google.maps.InfoWindow({
    content: '金山',
    position: iw_latlng1,
    zIndex: 1
  });

  infowindow1.open(map);

  var iw_latlng2 = new google.maps.LatLng(35.15739,136.915913);
  var infowindow2 = new google.maps.InfoWindow({
    content: '鶴舞',
    position: iw_latlng2,
    zIndex: 2
  });

  infowindow2.open(map);

  var iw_latlng3 = new google.maps.LatLng(35.152267,136.888018);
  var infowindow3 = new google.maps.InfoWindow({
    content: '山王',
    position: iw_latlng3,
    zIndex: 3
  });

  infowindow3.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/code6_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>

  </body>
</html>

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

p6-3

今回は「山王」「鶴舞」「金山」の順に高い「zIndex」プロパティの値を設定していますので、値が高い情報ウィンドウほど上に表示されています。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。