nicht angemeldet
Hallo,
ich habe es nun hinbekommen verschiedene icons der Map zuzufügen. Nun möchte ich zu jedem Marker noch einen Tootip erzeugen. Der Tooltip wird auch erzeugt - _aber_ es wird nur der letzte Eintrag aus der XML angezeigt.
Im Quelltext habe ich die entsprechenden Stellen gekennzeichnet. Zum testen lade ich diesen mal komplett hier hinein. Der API-Key gilt für /localhost.
test.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GMap Test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAew-EY58I8BsKJ6g-7x-EuRSK9iZUbkcQdhjZ7alwPmbMoL4XHRQ1O5Ngwd99UAYpKVikg7sHK5W0wA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.165691,10.451526), 6);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// EIGENE MARKER
var baseIcon = new GIcon();
baseIcon.image = "GMap/green.gif";
baseIcon.iconSize = new GSize(14, 14);
baseIcon.iconAnchor = new GPoint(3, 8);
var baseIcon2 = new GIcon();
baseIcon2.image = "GMap/blue.gif";
baseIcon2.iconSize = new GSize(14, 14);
baseIcon2.iconAnchor = new GPoint(3, 8);
var baseIcon3 = new GIcon();
baseIcon3.image = "GMap/red.gif";
baseIcon3.iconSize = new GSize(14, 14);
baseIcon3.iconAnchor = new GPoint(3, 8);
// DATEN AUS XML LADEN
GDownloadUrl("data.xml", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
//ToolTips
function ToolTip(mark,html,width){
this.html_ = html;
this.width_ = (width ? width = 'px' : 'auto');
this.mark_ = mark;
}
ToolTip.prototype = new GOverlay();
ToolTip.prototype.initialize = function(map){
var div = document.createElement("div");
div.style.display = 'none';
map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
this.map_ = map;
this.container_ = div;
}
ToolTip.prototype.remove = function(){
this.container_.parentNode.removeChild(this.container_);
}
ToolTip.prototype.copy = function(){
return new ToolTip(this.html_);
}
ToolTip.prototype.redraw = function(force){
if (!force) return;
var pixelLocation = this.map_.fromLatLngToDivPixel(this.mark_.getPoint());
this.container_.innerHTML = this.html_;
this.container_.style.position = 'absolute';
this.container_.style.left = pixelLocation.x + "px";
this.container_.style.top = pixelLocation.y + "px";
this.container_.style.width = this.width_;
this.container_.style.font = 'bold 10px/10px Verdana';
this.container_.style.border = '1px solid black';
this.container_.style.background = 'yellow';
this.container_.style.padding = '4px';
this.container_.style.whiteSpace = 'nowrap';
if(this.width_ != 'auto')
this.container_.style.overflow = 'hidden';
this.container_.style.display = 'block';
}
GMarker.prototype.ToolTipInstance = null;
GMarker.prototype.openToolTip = function(content){
if(this.ToolTipInstance == null){
this.ToolTipInstance = new ToolTip(this,content)
map.addOverlay(this.ToolTipInstance);
}
}
GMarker.prototype.closeToolTip = function(){
if(this.ToolTipInstance != null){
map.removeOverlay(this.ToolTipInstance);
this.ToolTipInstance = null;
}
}
//Ende ToolTips
var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var text = markers[i].getAttribute("text");
var bild = markers[i].getAttribute("bild");
var n = markers[i].getAttribute("n");
// (1) Ab hier müssten wohl die "var mark" in "var mark(n)" oder "var mark[i]" gewandelt werden?
// Wenn das so ist - wie geht das?
var mark = new GMarker(latlng, {icon : eval(bild)});
GEvent.addListener(mark, 'mouseover', function(){
mark.openToolTip(text);
});
GEvent.addListener(mark, 'mouseout', function(){
mark.closeToolTip();
});
map.addOverlay(mark);
// (1) bis hier?
} //Ende for
}
); //Ende GDownloadUrl
} //Ende GBrowserIsCompatible()
} //Ende initialize()
window.onload = initialize;
window.onunload = GUnload();
</script></head>
<body>
<div id="map" style="width:100%; height:600px; border:1px solid #000000; margin-top:10px;"></div>
</body>
</html>
data.xml :
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker n="1" lat="48.275293" lng="8.85432" text="TSG 1848 Balingen" bild="baseIcon" />
<marker n="2" lat="48.223111" lng="10.108097" text="SpVgg 1928 Au/Iller" bild="baseIcon2" />
<marker n="3" lat="48.893046" lng="9.21323" text="SpVgg 07 Ludwigsburg" bild="baseIcon3" />
</markers>
Gruß Rainer