Frage zu Google Maps in Verbindung mit Locr.com und Geo-Tagging.de

[Despoiler]

Hallo und mal wieder Grüße von mir aus Hannover!

Seit einigen Wochen spiele ich mit Google Maps herum und lasse mir mittlerweile alle meine Bilder in einer Übersichtkarte ausgeben.

Ich habe mir zahlreiche Webseiten angeschaut, wie z.B. http://www.geo-tagging.de und http://www.locr.com.

Meine erste Frage:
Wie kann man es realisieren, dass in einem gesonderten Abschnitt nur die Thumbnails der Bilder ausgegeben werden, die gerade auf der Karte als Marker geladen sind?
Ich meine, woher weiß das Skript welche Marker gerade auf der Karte gezeigt werden und welche ausserhalb des sichtbaren Bereichs liegen?

Meine zweite Frage:
Wenn ich mir den Quelltext der genannten Seiten anzeigen lasse, so sehe ich nie den Quellcode der von Google Maps generiert wird. Wie kriegen die das hin?
Befindet sich evtl. ein weiterer DIV-Container zwischen dem Skript und der Karte, der als Bindeglied dient?

Ich hatte noch eine Frage, die mir gerade unter den Tisch gefallen ist. Wenn ich sie finde werd ich sie einfach nachreichen.

Schonmal vielen Dank für die Hilfe.

 

[SCIPIO-AEMILIANUS]

Also auf die Frage mit wie die das hinkriegen, dass sie wissen welches Fleckchen Erde du grad beobachtest kann ich dir vermutlich beantworten. Ich kenn mich jetzt nicht wirklich mit der MAPS Api aus, aber man kann vermutlich abfragen bei der API welche GEO-Koordinaten man beobachtet.
locr sendet anschließend einen AJAX-Request an den Server mit den Koordinaten der dann die Datenbank durchpflügt nacht Koordinaten die innerhalb eines bestimmten "Rahmen" liegen. Anschließend liefert der Server eine XML Datei zurück in der Infos über die Bilder, die betrachteten Gegend drin sind.

Diese Theorie fand ich bestätigt nachdem ich mal FireBug anschmiss, was mir folgenden Request anzeigte:
http://de.locr.com/photo_world_xml....ngitudemax=9.958419799804688&start=0&count=24
indem alle benötigten Koordinaten enthalten sind um diesen Datenbank Request auszuführen.

Man hoft man konnte ne kleine Anregung liefern.

 

[Sven Mintel]

aber man würd ich mal meinen abfragen bei der API welche GEO-Koordinaten man beobachtet.

Jepp....die nötige Methode des GMap2-Objektes heisst getBounds() und liefert 2 Koordinaten, anhand derer sich der Kartenausschnitt konstruieren lässt, welchen der Benutzer gerade vor Augen hat.

 

[Despoiler]

Super, Dankeschön!

Die Daten zu meinen Bildern sind in einer Datenbank gespeichert.
Ich habe folgendes gefunden. Hier wird eine XML-Datei benutzt.

<script type="text/javascript">
    
    var map = new GMap2(document.getElementById("mapdiv"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    var point = new GLatLng(38,-95);
    map.setCenter(point,4);
    loadPointsFromXML();
    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
    
    
    function loadPointsFromXML()
    {
        var request = GXmlHttp.create();
        //grab the xml
        request.open("GET", "http://timhibbard.com/wherestim/demo_poidata.xml", true);
        request.onreadystatechange = function() 
        {
            if (request.readyState == 4) 
            {
                var xmlDoc = request.responseXML;
                parseXML(xmlDoc);
            }
        }
        request.send(null);
        
    
    }
    
    function parseXML(xmlDoc)
    {
        var markers = xmlDoc.documentElement.getElementsByTagName("poi");
        //get the viewing area of the map...to be used later
        var bounds = map.getBounds();
        //get rid of existing markers
      map.clearOverlays();
        for (var i = 0; i < markers.length; i++) 
        {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            //create point from lat/lng
            var point = new GLatLng(lat,lng);
            //check if point is inside the viewing area of the map
            if (bounds.contains(point) == true)
            {
                var html = markers[i].getAttribute("info");
                var marker = createMarker(point,html);
                map.addOverlay(marker);
            }
        }
    
    }
    //function from Mike Williams http://www.econym.demon.co.uk/googlemaps/
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
    </script>

Ich möchte jetzt aber folgende PHP-Datei benutzen.

#Bilder auslesen
$query = mysql_query("SELECT * FROM images_eos WHERE EOSVisible = 'true' ORDER BY EOSID ASC");
while($row = mysql_fetch_array($query)) {
	echo $row;
}

Mit dieser Test-Datei habe ich schon rumprobiert, aber ich weiß momentan nicht wie ich das Array ausgeben kann. Habe schon viel gegoogelt und evtl. auch viel übersehen.

<html>
<head>
<title>TEST</title>
<script type="text/javascript"><!--
var http = null;
if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
}

if (http != null) {
   http.open("GET", "ajax_test.php", true);
   http.onreadystatechange = ausgeben;   
   http.send(null); 
}

function ausgeben() {
   if (http.readyState == 4) {
      document.getElementById("Ausgabe").innerHTML = http.responseText;
   }
}
//--></script>

</head>
<body>
<div id="Ausgabe"></div>
</body>
</html>

Nochmals vielen Dank

 

[Despoiler]

Ok jetzt gehe ich doch den Weg der XML-File.
Ich lasse mir mit Hilfe der make_xml.php die Daten aus der Datenbank lesen und in eine XML (markers.xml) schreiben.
Das funktioniert prima, alle Daten landen wie gewollt in der XML.

Danach habe ich versucht das Script (Welches ich hier gefunden habe: http://geekswithblogs.net/thibbard/articles/googlemapsgetbounds.aspx) an meine XML anzupassen.
Ich weiß nicht ob ich schon mittlerweile blind oder einfach nur doof bin. Jedenfalls gibt er mir in der test.html nur ein leeres DIV aus. Die Karte wird nicht geladen.

Ist bestimmt wieder nur ein Denkfehler von mir, aber wahrscheinlich kann ich gerade nicht mehr richtig Denken....
Bin für jede Hilfe sehr dankbar!

Hier meine Dateien!

make_xml.php

<?php
include('inc/db.inc.php');
header("Content-type: text/xml");
#Starten der XML-File und schreiben des Eltern-Elements
$doc = new DomDocument('1.0', "iso-8859-15");
$node = $doc->createElement('markers');
$parnode = $doc->appendChild($node);

#Bilder auslesen
$query = mysql_query("SELECT * FROM images_eos WHERE EOSVisible = 'true' ORDER BY EOSID ASC");
while($row = mysql_fetch_array($query)) {
	#Erstellen des Marker-Nodes
	$node = $doc->createElement('marker');
	$newnode = $parnode->appendChild($node);
	#Schreiben der Werte in das Marker-Node
	$newnode->setAttribute("EOSName", $row['EOSName']);
	$newnode->setAttribute("EOSBreite", $row['EOSBreite']);
	$newnode->setAttribute("EOSLaenge", $row['EOSLaenge']);
}

#XML speichern
$doc->save("markers.xml");
?>

markers.xml

<markers>
<marker EOSName="001" EOSBreite="52.475798871696327" EOSLaenge="9.760890569085989"/>
<marker EOSName="002" EOSBreite="52.475972029725803" EOSLaenge="9.761142643518852"/>
<marker EOSName="003" EOSBreite="52.476507193698069" EOSLaenge="9.761856068963326"/>
<marker EOSName="004" EOSBreite="52.476641309966361" EOSLaenge="9.762323081540655"/>
<marker EOSName="005" EOSBreite="52.477921083277600" EOSLaenge="9.766520659704623"/>
<marker EOSName="006" EOSBreite="52.473572003254340" EOSLaenge="9.759280041461819"/>
<marker EOSName="007" EOSBreite="52.466695941905883" EOSLaenge="9.708102031796756"/>
<marker EOSName="008" EOSBreite="39.584792593422662" EOSLaenge="3.388221053862282"/>
<marker EOSName="009" EOSBreite="39.585310187199063" EOSLaenge="3.387921769462210"/>
<marker EOSName="010" EOSBreite="39.585314991777061" EOSLaenge="3.387838389147731"/>
<marker EOSName="011" EOSBreite="39.585594119031427" EOSLaenge="3.387696672546852"/>
<marker EOSName="012" EOSBreite="39.567068968562907" EOSLaenge="2.646875829654491"/>
<marker EOSName="013" EOSBreite="47.950075628637123" EOSLaenge="11.109360042253170"/>
</markers>

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.122&amp;key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
  </head>
  <body">
    <div id="mapdiv" style="background-color:#000000; width: 500px; height: 300px"></div>
  </body>
  
	<script type="text/javascript">
    var map = new GMap2(document.getElementById("mapdiv"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    var point = new GLatLng(38,-95);
    map.setCenter(point,4);
    loadPointsFromXML();
    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
    
    
    function loadPointsFromXML()
    {
        var request = GXmlHttp.create();
        //grab the xml
        request.open("GET", "markers.xml", true);
        request.onreadystatechange = function() 
        {
            if (request.readyState == 4) 
            {
                var xmlDoc = request.responseXML;
                parseXML(xmlDoc);
            }
        }
        request.send(null);
        
    
    }
    
    function parseXML(xmlDoc)
    {
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        //get the viewing area of the map...to be used later
        var bounds = map.getBounds();
        //get rid of existing markers
      map.clearOverlays();
        for (var i = 0; i < markers.length; i++) 
        {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("EOSBreite"));
            var lng = parseFloat(markers[i].getAttribute("EOSLaenge"));
            //create point from lat/lng
            var point = new GLatLng(lat,lng);
            //check if point is inside the viewing area of the map
            if (bounds.contains(point) == true)
            {
                var html = markers[i].getAttribute("info");
                var marker = createMarker(point,html);
                map.addOverlay(marker);
            }
        }
    
    }
    //function from Mike Williams http://www.econym.demon.co.uk/googlemaps/
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
    </script>
</html>

 

[Despoiler]

So langsam wird das was.
Ich habe jetzt beide Varianten miteinader kombiniert und es funktioniert soweit.

- Die XML wird generiert und local gespeichert
- Die XML wird vom Script ausgelesen
- Nur die sichtbaren Punkte werden geladen
- Die Bilder (bis jetzt nur der EOSName) werden parallel in ein zweites DIV geladen

Alles wunderbar!
Doch ich möchte gerne, dass die die Bilder (EOSName) immerwieder neu geladen werden, sobald die Karte z.B. gezoomt wird. Er soll also immer nur die Bilder anzeigen, die auch als Marker auf der Karte angezeigt werden.
Ich dachte eigentlich, dass das DIV (side_bar) bei jedem Laden überschrieben wird, aber stattdessen wird die Liste immer länger. Er läd immer wieder alle Bilder nach und die Liste wird unendlich lang.

Ich hab jetzt schon alles rauf und runter gegoogelt und viele Möglichkeiten ausprobiert, doch ohne Erfolg.

Ich habe versucht das DIV einfach zu überschreiben.

document.getElementById("side_bar").innerHTML = "";

Dann habe ich in dem ElternElement side_bar weitere DIV's (side_bar_+id+) erzeugt um die dann zu löschen.
Die Schleife for (var x = 0; x < 100; x++) ist nur ein Beispiel, wollte schauen ob es wenigstens funktioniert.

side_bar_html += '<div id="side_bar_' + i + '"><a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'marker.png\')" onmouseout="gmarkers['+i+'].setImage(\'coldmarker.png\')">' + name + '<\/a></div><br>';

	function freimachen() {
		for (var x = 0; x < 100; x++) {
			var remove = "side_bar_' + x + '";			
			var child = document.getElementById(remove);
          	var parent = document.getElementById(side_bar);
          	parent.removeChild(child);
		}
	}

Hier nochmal mein kompletter Quellcode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.122&amp;key=xxxxxxxxxxxxxxxxxxxx"></script>
  </head>
  <body>
    <div id="mapdiv" style="background-color:#000000; width: 500px; height: 300px"></div>
    <div id="side_bar" style="background-color:#066; color:#FFF; width: 500px; height: 300px"></div>
  </body>
  
	<script type="text/javascript">
	//<![CDATA[
	var side_bar_html = "";
	var gmarkers = [];
	var htmls = [];
	var i = 0;	
	var x = 0;
			   
    var map = new GMap2(document.getElementById("mapdiv"));
	var geocoder = new GClientGeocoder();;
	map.addMapType(G_PHYSICAL_MAP);
	map.enableScrollWheelZoom();
	map.addControl(new GOverviewMapControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng( 0, 0), 1);
    loadPointsFromXML();

    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
	GEvent.addListener(map,"bla", function(){freimachen();});
    
	function freimachen() {
		for (var x = 0; x < 100; x++) {
			var remove = "side_bar_' + x + '";			
			var child = document.getElementById(remove);
          	var parent = document.getElementById(side_bar);
          	parent.removeChild(child);
		}
	}
	
    function loadPointsFromXML() {
        var request = GXmlHttp.create();
        //Laden der XML-File
        request.open("GET", "test2.xml", true);
        request.onreadystatechange = function() 
        {
            if (request.readyState == 4) {
                var xmlDoc = request.responseXML;
                parseXML(xmlDoc);
            }
        }
        request.send(null);
    }
    
    function parseXML(xmlDoc) {
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        //Laden des sichtbaren Bereichs
        var bounds = map.getBounds();
        map.clearOverlays();
        for (var i = 0; i < markers.length; i++) {
            // Auslesen der XML-Daten
            var lat = parseFloat(markers[i].getAttribute("EOSBreite"));
            var lng = parseFloat(markers[i].getAttribute("EOSLaenge"));
            var point = new GLatLng(lat,lng);
			// Hier wird überprüft welche Marker gerade im Kartenausschnitt sichtbar sind
            if (bounds.contains(point) == true) {
                var html = markers[i].getAttribute("EOSName");
                var marker = createMarker(point,html);
                map.addOverlay(marker);	
				// Hier wird der Inhalt von side_bar_html an das DIV side_bar übergeben
				document.getElementById("side_bar").innerHTML = side_bar_html; 
            }			
        }		   
    }
	
      function createMarker(point,name,html) {
        var marker = new GMarker(point);	
		
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("marker.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("coldmarker.png");
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        // Hier wird der Inhalt des DIV's generiert, der dann durch "document.getElementById("side_bar").innerHTML = side_bar_html" an das DIV side_bar übergeben wird
        side_bar_html += '<div id="side_bar_' + i + '"><a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'marker.png\')" onmouseout="gmarkers['+i+'].setImage(\'coldmarker.png\')">' + name + '<\/a></div><br>';
        i++;
        return marker;
      }
	  
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }	  
		//]]>
    </script>
</html>

Vielleicht kann mir jemand noch einen Schuss in die richtige Richtung geben?!

 

[SCIPIO-AEMILIANUS]

Hab doch nochmal 5 Minuten Zeit gefunden. Das Problem war das die Variabel bei jedem Aufruf von createMarker immer weiter gefüllt wurde, ohne diese zu leeren.

Habs diese eine Script Zeile erweitert und es scheint zu klappen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.122&amp;key=xxxxxxxxxxxxxxxxxxxx"></script>
  </head>
  <body>
    <div id="mapdiv" style="background-color:#000000; width: 500px; height: 300px"></div>
    <div id="side_bar" style="background-color:#066; color:#FFF; width: 500px; height: 300px"></div>
  </body>
  
    <script type="text/javascript">
    //<![CDATA[
    var side_bar_html = "";
    var gmarkers = [];
    var htmls = [];
    var i = 0;    
    var x = 0;
               
    var map = new GMap2(document.getElementById("mapdiv"));
    var geocoder = new GClientGeocoder();;
    map.addMapType(G_PHYSICAL_MAP);
    map.enableScrollWheelZoom();
    map.addControl(new GOverviewMapControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng( 0, 0), 1);
    loadPointsFromXML();

    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
    GEvent.addListener(map,"bla", function(){freimachen();});
    
    function freimachen() {
        for (var x = 0; x < 100; x++) {
            var remove = "side_bar_' + x + '";            
            var child = document.getElementById(remove);
              var parent = document.getElementById(side_bar);
              parent.removeChild(child);
        }
    }
    
    function loadPointsFromXML() {
        var request = GXmlHttp.create();
        //Laden der XML-File
        request.open("GET", "markers.xml", true);
        request.onreadystatechange = function() 
        {
            if (request.readyState == 4) {
                var xmlDoc = request.responseXML;
                parseXML(xmlDoc);
            }
        }
        request.send(null);
    }
    
    function parseXML(xmlDoc) {
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        //Laden des sichtbaren Bereichs
        var bounds = map.getBounds();
        map.clearOverlays();
        side_bar_html="";
        for (var i = 0; i < markers.length; i++) {
            // Auslesen der XML-Daten
            var lat = parseFloat(markers[i].getAttribute("EOSBreite"));
            var lng = parseFloat(markers[i].getAttribute("EOSLaenge"));
            var point = new GLatLng(lat,lng);
            // Hier wird überprüft welche Marker gerade im Kartenausschnitt sichtbar sind
            if (bounds.contains(point) == true) {
                var html = markers[i].getAttribute("EOSName");
                var marker = createMarker(point,html);
                map.addOverlay(marker);    
                // Hier wird der Inhalt von side_bar_html an das DIV side_bar übergeben
                document.getElementById("side_bar").innerHTML = side_bar_html; 
            }            
        }           
    }
    
      function createMarker(point,name,html) {
        var marker = new GMarker(point);    
        
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("marker.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("coldmarker.png");
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        // Hier wird der Inhalt des DIV's generiert, der dann durch "document.getElementById("side_bar").innerHTML = side_bar_html" an das DIV side_bar übergeben wird
        side_bar_html += '<div id="side_bar_' + i + '"><a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'marker.png\')" onmouseout="gmarkers['+i+'].setImage(\'coldmarker.png\')">' + name + '<\/a></div><br>';
        i++;
        return marker;
      }
      
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }      
        //]]>
    </script>
</html>

In der Funktion parseXml einfach ein side_bar_html=""; eingefügt.

 

[Despoiler]

Hallo SCIPIO,

vielen Dank für deine Antwort, sie hat mich wirklich gerettet.
Und da haben wir mal wieder den Beweis dafür, dass ich manchmal ganz schön blind sein kann.

Ich bin mit dem ganzen noch nicht zufrieden, werde also noch eein paar Funktionen einbauen, wie z.B. eine Pagination.
Dazu werd ich mich erstmal schlaumachen wie man das in Etwa umsetzen kann.

Wenn du nichts dagegen hast, lasse ich diesen Thread vorerst geöffnet um evtl. weitere Probleme mit dir/euch zu besprechen?!

Danke schonmal, Florian! =)

 

[Despoiler]

Hallo! Ich muss dieses Thema nochmal aufgreifen.

Ich habe immernoch das Problem, die Bilder, welche in der side_bar ausgegeben werden, über mehrere Seiten zu verteilen. Also quasi eine Pagination zu erstellen.

Folgenden Ansatz habe ich aus meinen PHP-Kenntnissen übernommen.

var summebilder = markers.length;
var proseite = 10;
var seiten = Math.ceil(sumimages/proseite);

Jetzt stellt sich mir nur die Frage, wo pack ich das Ganze am besten hin?
Wie kann ich mir die Seiten ausgeben lassen? Mit einer Schleife nehme ich an.
Wie übergebe ich den Klick auf die Seite (z.B. auf Seite 3) an JavaScript?

Um es kurz zu sagen, mir fehlt einfach der Ansatz um weiterzumachen.

Hier noch mal der komplette Code und ein Screenshot wie es bis jetzt ausschaut.

<script type="text/javascript">
//<![CDATA[
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;	
var x = 0;
// === Create a custom Control ===
var labelContainer;

function LabelControl() {  }
LabelControl.prototype = new GControl();	
LabelControl.prototype.initialize = function(map) {
labelContainer = document.createElement("div");
labelContainer.style.overflow="auto";
labelContainer.style.backgroundColor = "#000000";
labelContainer.style.border = "1px solid black";
labelContainer.style.width="250px";
labelContainer.style.height="475px";       
labelContainer.style.padding="5px";
labelContainer.style.opacity = "0.8";
labelContainer.style.overflow = "hidden";
labelContainer.style.float = "left";

map.getContainer().appendChild(labelContainer);
return labelContainer;
}

LabelControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}


	
var map = new GMap2(document.getElementById("mapdiv"));

map.addControl(new LabelControl());

var geocoder = new GClientGeocoder();;
map.setMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);
new GKeyboardHandler(map);
map.enableScrollWheelZoom();
map.addControl(new GOverviewMapControl());



map.addControl(new GLargeMapControl(), 
new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(6, 40)));

map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 0, 0), 1);

var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "gmapper/marker_first.png";
icon.iconSize = new GSize(14, 20);
icon.shadowSize = new GSize(14, 20);

loadPointsFromXML();
GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});

function loadPointsFromXML() {
	var request = GXmlHttp.create();
	//Laden der XML-File
	request.open("GET", "xml/my_points.xml", true);
	request.onreadystatechange = function() 
	{
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;
			parseXML(xmlDoc);
		}
	}
	request.send(null);
}

function parseXML(xmlDoc) {
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	//Laden des sichtbaren Bereichs
	
	var bounds = map.getBounds();
	map.clearOverlays();
	side_bar_html="";
	for (var i = 0; i < markers.length; i++) {
		// Auslesen der XML-Daten
		var lat = parseFloat(markers[i].getAttribute("EOSBreite"));
		var lng = parseFloat(markers[i].getAttribute("EOSLaenge"));
		var point = new GLatLng(lat,lng);
		// Hier wird überprüft welche Marker gerade im Kartenausschnitt sichtbar sind
		if (bounds.contains(point) == true) {
			var name = markers[i].getAttribute("EOSName");
			var html = '<div style="color:#000000;">' + markers[i].getAttribute("EOSName") + '</div><div><img src="images/gallery/eos_gallery/thumbs/' + markers[i].getAttribute("EOSName") + '.gif" width="120" height="75" /></div>';
			var marker = createMarker(point, name, html);
			map.addOverlay(marker);	
			// Hier wird der Inhalt von side_bar_html an das DIV side_bar übergeben
			labelContainer.innerHTML = side_bar_html; 

		}			
	}		   
}

function createMarker(point, name, html) {
var marker = new GMarker(point, icon);	

GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
});
GEvent.addListener(marker, "mouseover", function() {
  marker.setImage("gmapper/marker_first.png");
});
GEvent.addListener(marker, "mouseout", function() {
  marker.setImage("gmapper/marker_first.png");
});
gmarkers[i] = marker;
htmls[i] = html;
//Hier wird der Inhalt des DIV's generiert, der dann durch "document.getElementById("side_bar").innerHTML = side_bar_html" an das DIV side_bar übergeben wird
//side_bar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'gmapper/143.png\')" onmouseout="gmarkers['+i+'].setImage(\'gmapper/marker_first.png\')">' + name + '<\/a><br>';
side_bar_html += '<div class="left mrg_right mrg_bottom"><a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'gmapper/143.png\')" onmouseout="gmarkers['+i+'].setImage(\'gmapper/marker_first.png\')"><img src="images/gallery/eos_gallery/thumbs/' + name + '.gif" width="80" height="50"\/><\/a></div>';
i++;
return marker;
}

function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}	  
//]]>
</script>