Google マップ マッシュアップの凡例を修正

Question

Google マップ マッシュアップを含むページがあります。このページには、曜日 (月曜、火曜など) ごとに色分けされたプッシュピンがあります。地図を含む IFrame は動的にサイズ変更されるため、ブラウザ ウィンドウのサイズが変更されるとサイズも変更されます。

マップ ウィンドウの隅に、各色の意味をユーザーに示す凡例を配置したいと考えています。Google Maps API には、 Gスクリーンオーバーレイ このクラスは私が望む動作を持っていますが、オーバーレイとして使用する画像を指定できるだけであり、テキストを含む DIV を使用したいと考えています。マップ ウィンドウ上の (たとえば) 左下隅に DIV を配置し、ブラウザ ウィンドウのサイズが変更されたときに隅に対して自動的に同じ位置に留まる最も簡単な方法は何ですか?

Answer 1

独自のカスタム コントロールを追加し、凡例として使用できます。

このコードは、幅 150 x 高さ 100 のボックス (灰色の枠線/背景が白) とその中に「Hello World」という文字を追加します。凡例内のテキストを任意の HTML に置き換えます。これは、マップの右上 (G_ANCHOR_TOP_RIGHT) 10 ピクセル下、50 ピクセル上に固定されたままになります。

function MyPane() {}
MyPane.prototype = new GControl;
MyPane.prototype.initialize = function(map) {
  var me = this;
  me.panel = document.createElement("div");
  me.panel.style.width = "150px";
  me.panel.style.height = "100px";
  me.panel.style.border = "1px solid gray";
  me.panel.style.background = "white";
  me.panel.innerHTML = "Hello World!";
  map.getContainer().appendChild(me.panel);
  return me.panel;
};

MyPane.prototype.getDefaultPosition = function() {
  return new GControlPosition(
      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
      //Should be _ and not _
};

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());

Answer 2

次のような HTML を使用します。

<div id="wrapper">
   <div id="map" style="width:400px;height:400px;"></div>
   <div id="legend"> ... marker descriptions in here ... </div>
</div>

次に、これをスタイル設定して、凡例を右下に維持することができます。

div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }

position: relative これにより、含まれる要素が相対的に配置されます。 #wrapper コンテナと、 position: absolute を引き起こします #legend div はフローから「プル」され、マップの上に配置され、右下端がマップの下部に維持されます。 #wrapper マーカーの説明を含めるために必要に応じてストレッチします。