OpenLayers 16a Popupの表示

OpenLayers サイトの Example の Popup Matrix（popupMatrix.html ポップアップ表示（外観）のリスト）、Popup Mayhem（popups.html ポップアップ作成と削除など）を参考に Popup を表示してみます。

ポップアップウィンドウを表示します。
地図表示部分のスクリプトに次のPopup のための基本スクリプトを追加します。

---
<script type="text/javascript">
  var popup;
---
  popup = new OpenLayers.Popup(
    "chicken",                            // 名前 id（文字列 String） 
    new OpenLayers.LonLat(-25500,-74500), // 座標（経度緯度 lon,lat）これはmeter
    new OpenLayers.Size(100,100),         // サイズ（ピクセル px）
    "example popup",                      // 内容 contentHTML
    true);                                // 閉じるボタン closeBox（真偽 Boolean）
  map.addPopup(popup);

// 確認のためにマーカーを表示します。

  markers = new OpenLayers.Layer.Markers("Marker");
  map.addLayer(markers);

  markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-26000,-74000)));

} //function init() の最後
---

サイズが150x150の画像を表示してみます。

---
popup = new OpenLayers.Popup(
  "chicken", 
  new OpenLayers.LonLat(-25500,-74500),
  new OpenLayers.Size(100,100),
  "<img src='./mapsign/tatsu2.png'></img>", //用意した画像のパス
  true
);
map.addPopup(popup);
---

設定サイズより大きい場合はスクロールバーが自動で追加されます。