Corretta la legenda nel mashup di Google Maps

Question

Ho una pagina con un mashup di Google Maps con simboli codificati a colori in base al giorno (lunedì, martedì, ecc.). L'IFrame contenente la mappa è dimensionato dinamicamente, quindi viene ridimensionato quando la finestra del browser viene ridimensionata.

Mi piacerebbe inserire una legenda nell'angolo della finestra della mappa che indichi all'utente il significato di ciascun colore.L'API di Google Maps include a GScreenOverlay che ha il comportamento che desidero, ma ti consente solo di specificare un'immagine da utilizzare come sovrapposizione e preferirei utilizzare un DIV con testo al suo interno.Qual è il modo più semplice per posizionare un DIV sopra la finestra della mappa (ad esempio) nell'angolo in basso a sinistra che rimarrà automaticamente nella stessa posizione rispetto all'angolo quando la finestra del browser viene ridimensionata?

Answer 1

Puoi aggiungere il tuo controllo personalizzato e utilizzarlo come legenda.

Questo codice aggiungerà una casella di 150 l x 100 di altezza (bordo grigio/con sfondo bianco) e le parole "Hello World" al suo interno.Sostituisci il testo con qualsiasi codice HTML che desideri nella legenda.Questo rimarrà ancorato in alto a destra (G_ANCHOR_TOP_RIGHT) 10px in basso e 50px in alto sulla mappa.

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

Vorrei utilizzare HTML come il seguente:

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

Puoi quindi modellarlo per mantenere la legenda in basso a destra:

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

position: relative farà sì che tutti gli elementi contenuti vengano posizionati rispetto a #wrapper contenitore e position: absolute causerà il #legend div per essere "tirato" fuori dal flusso e sedersi sopra la mappa, mantenendo il bordo inferiore destro nella parte inferiore della mappa #wrapper e allungamento come richiesto per contenere le descrizioni dei marcatori.