Leyenda fija en Google Maps Mashup

Question

Tengo una página con un mashup de Google Maps que tiene marcadores codificados por colores por día (lunes, martes, etc.). El tamaño del IFrame que contiene el mapa tiene un tamaño dinámico, por lo que cambia de tamaño cuando se cambia el tamaño de la ventana del navegador.

Me gustaría poner una leyenda en la esquina de la ventana del mapa que le diga al usuario qué significa cada color.La API de Google Maps incluye una Superposición de pantalla GS clase que tiene el comportamiento que quiero, pero solo te permite especificar una imagen para usar como superposición, y preferiría usar un DIV con texto.¿Cuál es la forma más sencilla de colocar un DIV sobre la ventana del mapa en (por ejemplo) la esquina inferior izquierda que permanecerá automáticamente en el mismo lugar en relación con la esquina cuando se cambie el tamaño de la ventana del navegador?

Answer 1

Puede agregar su propio control personalizado y usarlo como leyenda.

Este código agregará un cuadro de 150 ancho x 100 alto (borde gris/con fondo blanco) y las palabras "Hola mundo" dentro de él.Cambia el texto por cualquier HTML que desees en la leyenda.Esto permanecerá anclado en la parte superior derecha (G_ANCHOR_TOP_RIGHT) 10 px hacia abajo y 50 px por encima del 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

Yo usaría HTML como el siguiente:

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

Luego puedes diseñar esto para mantener la leyenda en la parte inferior derecha:

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

position: relative hará que cualquier elemento contenido se posicione en relación con el #wrapper contenedor, y position: absolute causará el #legend div se "sacará" del flujo y se ubicará encima del mapa, manteniendo su borde inferior derecho en la parte inferior del #wrapper y estirándose según sea necesario para contener las descripciones de los marcadores.