Legenda corrigida no mashup do Google Maps
-
09-06-2019 - |
Pergunta
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?
Solução
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());
Outras dicas
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.