Légende corrigée dans Google Maps Mashup

Question

J'ai une page avec un mashup Google Maps qui contient des punaises codées par couleur par jour (lundi, mardi, etc.). L'IFrame contenant la carte est dimensionné dynamiquement, il est donc redimensionné lorsque la fenêtre du navigateur est redimensionnée.

J'aimerais mettre une légende dans le coin de la fenêtre de la carte qui indique à l'utilisateur la signification de chaque couleur.L'API Google Maps comprend un GScreenOverlay classe qui a le comportement que je souhaite, mais elle vous permet uniquement de spécifier une image à utiliser comme superposition, et je préférerais utiliser un DIV contenant du texte.Quelle est la manière la plus simple de positionner un DIV sur la fenêtre de la carte dans (par exemple) le coin inférieur gauche qui restera automatiquement au même endroit par rapport au coin lorsque la fenêtre du navigateur est redimensionnée ?

Answer 1

Vous pouvez ajouter votre propre contrôle personnalisé et l'utiliser comme légende.

Ce code ajoutera une boîte de 150 l x 100 h (bordure grise/avec fond blanc) et les mots « Hello World » à l'intérieur.Vous remplacez le texte par le HTML que vous souhaitez dans la légende.Cela restera ancré en haut à droite (G_ANCHOR_TOP_RIGHT) 10 px vers le bas et 50 px au-dessus de la carte.

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

J'utiliserais du HTML comme suit :

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

Vous pouvez ensuite styliser ceci pour conserver la légende en bas à droite :

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

position: relative entraînera le positionnement de tous les éléments contenus par rapport au #wrapper conteneur, et position: absolute provoquera le #legend div doit être "tiré" du flux et s'asseoir au-dessus de la carte, en gardant son bord inférieur droit en bas de la #wrapper et étirement selon les besoins pour contenir les descriptions de marqueurs.