2008-08-31 9 views
9

J'ai une page avec un mashup Google Maps avec des punaises qui sont codées en couleur par jour (lundi, mardi, etc.) Le IFrame contenant la carte est dimensionné dynamiquement, donc il est redimensionné quand la fenêtre du navigateur est redimensionnée.Correction d'une légende dans Google Maps Mashup

Je voudrais mettre une légende dans le coin de la fenêtre de carte qui indique à l'utilisateur ce que chaque couleur signifie. L'API Google Maps inclut une classe GScreenOverlay qui a le comportement que je souhaite, mais elle ne vous permet que de spécifier une image à utiliser en superposition, et je préfère utiliser un DIV avec du texte. Quel est le moyen le plus simple de positionner un DIV sur la fenêtre de 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?

Répondre

9

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

Ce code ajoutera une boîte 150w x 100h (bordure grise/avec fond blanc) et les mots "Hello World" à l'intérieur. Vous échangez le texte pour n'importe quel HTML que vous voudriez dans la légende. Cela restera Ancré en haut à droite (G_ANCHOR_TOP_RIGHT) 10px vers le bas et 50px plus 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()); 
3

J'utiliser HTML comme ce qui suit:

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

Vous pouvez alors le style cela pour garder la légende en bas à droite:

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

position: relative provoquera tout contenu des éléments à être positionné par rapport au conteneur #wrapper, et position: absolute entraînera la sortie du flux du #legend div et sera placé au-dessus de la carte, en gardant son bord inférieur droit au bas du #wrapper et étirement selon les besoins pour contenir les descriptions des marqueurs.

+2

Cette solution a été rendue obsolète avec les versions plus récentes de l'API Google Maps. À partir de la version 3.8, ce tutoriel montre comment créer un contrôle personnalisé et peut être facilement adapté pour afficher une légende: https://developers.google.com/maps/documentation/javascript/controls#CustomControls – Kevin

+0

Vous aurez probablement besoin d'un z -index pour la légende div – byroncorrales