javascript - gratis - Leyenda arreglada en Google Maps Mashup

google maps api key

Question

Tengo una página con un mashup de Google Maps que tiene marcadores que están codificados por colores por día (lunes, martes, etc.). El IFrame que contiene el mapa tiene un tamaño dinámico, por lo que se 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 dice al usuario qué significa cada color. La API de Google Maps incluye una clase GScreenOverlay que tiene el comportamiento que yo quiero, pero solo permite especificar una imagen para usar como una superposición, y prefiero usar una DIV con texto. ¿Cuál es la forma más fácil de colocar un DIV sobre la ventana del mapa en (por ejemplo) la esquina inferior izquierda que permanecerá automáticamente en el mismo lugar con respecto a la esquina cuando se cambia el tamaño de la ventana del navegador?

Answer 1

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>

A continuación, puede 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 los elementos contenidos se posicionen en relación con el contenedor #wrapper , y position: absolute hará que #legend div se "saque" del flujo y se siente sobre el mapa, manteniendo su borde inferior derecho en el parte inferior de la #wrapper y estirar según sea necesario para contener las descripciones de los marcadores.

Answer 2

Puede agregar su propio control personalizado y usarlo como leyenda.

Este código agregará un cuadro de 150w x 100h (Borde gris / con fondo blanco) y las palabras "Hola mundo" dentro de él. Cambia el texto por cualquier HTML que desee en la leyenda. Esto permanecerá Anclado arriba a la derecha (G_ANCHOR_TOP_RIGHT) 10px hacia abajo y 50px sobre el 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());