Rainer: Tooltips zu GoogleMap hinzufügen

SELF-Forum

Tooltips zu GoogleMap hinzufügen

Rainer
– Informationen zu den Bewertungsregeln

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&amp;v=2&amp;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

Beitrag melden
–
Informationen zu den Bewertungsregeln