情報ウィンドウを開く/閉じる

広告

情報ウィンドウを地図上に表示するには情報ウィンドウを開く必要があります。情報ウィンドウを開くにはInfoWindowクラスで用意されている「open」メソッドを使います。 

open(map:Map|StreetViewPanorama, anchor?:MVCObject)

指定された地図でこの情報ウィンドウを開きます。オプションで、情報ウィンドウをアン
カーに関連付けることができます。コア API では、アンカーのみが Marker クラスです。
ただし、position プロパティとオプションで pixelOffset の計算用に pixelBounds を公
開する任意の MVCObject がアンカーとなることができます（情報ウィンドウ オプション
を参照）。

1番目の引数には情報ウィンドウを表示するMapクラスのオブジェクト又はStreetViewPanoramaクラスのオブジェクトを指定します。

省略可能な2番目の引数には情報ウィンドウを関連付けるアンカーと呼ばれるオブジェクトを指定することもできます。指定すると情報ウィンドウは指定したアンカーに関連付けられます。例えばMarkerクラスのオブジェクトを指定した場合、マーカーの座標などを基準として情報ウィンドウが表示されます(こちらはマーカーのところで詳しく確認します)。

実際には次のように記述します。 

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

var latlng = new google.maps.LatLng(35.539001,134.228468);
var iwopts = {
  content: 'Hello',
  positon: latlng
};

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

この場合、2番目の引数でアンカーが指定されていませんので1番目の引数で指定されている地図を対象に情報ウィンドウが開き地図上に表示されます。

情報ウィンドウを閉じる

開いた情報ウィンドウは、情報ウィンドウ上に表示されている「×」マークをクリックすることで閉じることもできますが、プログラムの中で閉じるにはInfoWindowクラスで用意されている「close」メソッドを使います。 

close()

DOM 構造から削除して、この情報ウィンドウを閉じます。

情報ウィンドウが開いている時にこのメソッドを呼び出すと情報ウィンドウが閉じます。

実際には次のように記述します。 

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

infowindow.close();
サンプルコード

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

var map;
var infowindow;

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

  infowindow = new google.maps.InfoWindow({
    content: '道後温泉本館',
    position: latlng
  });
}

function doOpen() {
  infowindow.open(map);
}

function doClose() {
  infowindow.close();
}

<!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/code2_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="open" value="開く" onclick="doOpen()" />
    <input type="button" id="close" value="閉じる" onclick="doClose()" />
    </p>
    </form>
  </body>
</html>

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

p2-1

地図下に表示されている「開く」ボタンを押して頂くと情報ウィンドウが開いて地図上に表示されます。

p2-2

地図下に表示されている「閉じる」ボタンを押して頂くと情報ウィンドウが閉じます。

p2-3

( Written by Tatsuo Ikura )