Legenda corrigida no mashup do Google Maps

Question

Eu tenho uma página com um mashup do Google Maps que possui alfinetes codificados por cores por dia (segunda, terça, etc.). O IFrame que contém o mapa é dimensionado dinamicamente, por isso é redimensionado quando a janela do navegador é redimensionada.

Gostaria de colocar uma legenda no canto da janela do mapa que informa ao usuário o que cada cor significa.A API do Google Maps inclui um GScreenOverlay classe que tem o comportamento que eu quero, mas só permite especificar uma imagem para usar como sobreposição, e eu prefiro usar um DIV com texto nele.Qual é a maneira mais fácil de posicionar um DIV sobre a janela do mapa (por exemplo) no canto inferior esquerdo que permanecerá automaticamente no mesmo lugar em relação ao canto quando a janela do navegador for redimensionada?

Answer 1

Você pode adicionar seu próprio controle personalizado e usá-lo como legenda.

Este código irá adicionar uma caixa de 150w x 100h (borda cinza/com fundo branco) e as palavras "Hello World" dentro dela.Você troca o texto por qualquer HTML que desejar na legenda.Isso ficará ancorado no canto superior direito (G_ANCHOR_TOP_RIGHT) 10px para baixo e 50px acima do mapa.

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

Eu usaria HTML como o seguinte:

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

Você pode então estilizar isso para manter a legenda no canto inferior direito:

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

position: relative fará com que quaisquer elementos contidos sejam posicionados em relação ao #wrapper recipiente, e position: absolute causará o #legend div seja "puxado" para fora do fluxo e fique acima do mapa, mantendo sua borda inferior direita na parte inferior do #wrapper e esticar conforme necessário para conter as descrições dos marcadores.