Behobene Legende in Google Maps Mashup

Question

Ich habe eine Seite mit einem Google Maps-Mashup, die über farblich nach Tag (Montag, Dienstag usw.) codierte Pins verfügt. Das IFrame, das die Karte enthält, wird dynamisch skaliert, sodass die Größe geändert wird Das Browserfenster wird in der Größe angepasst.

Ich mag eine Legende in der Ecke des Kartenfensters setzen, die den Benutzer, was jede Farbe mittels erzählt. Das Google Maps-API enthält eine GScreenOverlay Klasse, die das von mir gewünschte Verhalten aufweist. Sie können jedoch nur ein Bild angeben, das als Overlay verwendet werden soll, und ich würde lieber ein DIV mit Text verwenden. Was ist der einfachste Weg, um ein DIV über dem Kartenfenster zu positionieren, z. B. in der unteren linken Ecke, die sich automatisch an der gleichen Stelle gegenüber der Ecke befindet, wenn die Größe des Browserfensters geändert wird?

Answer 1

Sie können Ihr eigenes benutzerdefiniertes Steuerelement hinzufügen und es als Legende verwenden.

Dieser Code fügt eine Box 150w x 100h (Grey Border/mit weißem Hintergrund) und die Wörter "Hello World" darin hinzu. Sie tauschen den Text für jeden beliebigen HTML-Code in der Legende aus. Dies bleibt oben rechts verankert (G_ANCHOR_TOP_RIGHT) 10px nach unten und 50px über der Karte.

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

würde ich HTML wie folgt verwendet werden:

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

Anschließend können Sie Stil dies die Legende in der rechten unteren Ecke zu halten:

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

position: relative bewirkt, dass alle Elemente enthalten positioniert werden relativ zum #wrapper Behälter und position: absolute wird das #legend div "aus dem Fluss heraus" gezogen werden und über der Karte sitzen, seinen unteren rechten Rand an der Unterseite desbehaltendund Dehnung wie erforderlich, um die Markerbeschreibungen zu enthalten.