Google Maps XML ausgeben

individual85 · 16.02.2010, 16:00

Hallo, ich möchte unterhalb meiner Google Maps Karte Daten von xml ausgeben lassen. Das Einbinden der Daten aus xml in die Map funktioniert einwandfrei. Ich schaffe es einfach nicht die Ausgabe unterhalb der Karte von xml zu realisieren. Kann mir vielleicht jemand helfen? Ich wäre sehr dankbar.

Hier mein Java Script Code:

Code:

<script type="text/javascript">
    //<=!=[=C=D=A=T=A=[

    var iconRed = new GIcon(); 
    iconRed.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    iconRed.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
    
    var customIcons = [];
    customIcons["1"] = iconRed;


    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);
        }
    
        GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var strasse = markers[i].getAttribute("strasse");
            var typ = markers[i].getAttribute("typ");
            var plz = markers[i].getAttribute("plz")
            var ort = markers[i].getAttribute("ort");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("breitengrad")),
                                    parseFloat(markers[i].getAttribute("laengengrad")));
            var marker = createMarker(point, name, strasse, plz, ort, typ);
            map.addOverlay(marker);
          }
        });
      }
    
    function createMarker(point, name, strasse, plz, ort, typ) {
      var marker = new GMarker(point, customIcons[typ]);
      var html = "<b>" + name + "<\/b> <br/>" + strasse + "<br/>" + plz + "\&nbsp;" + ort;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    
    //]=]=>
  </script>

Und hier der Code aud der php Datei

Code:

<?php 
        
        require("phpsqlajax_dbinfo.php");
        
        function parseToXML($htmlStr) 
        { 
        $xmlStr=str_replace('<','&lt;',$htmlStr); 
        $xmlStr=str_replace('>','&gt;',$xmlStr); 
        $xmlStr=str_replace('"','&quot;',$xmlStr); 
        $xmlStr=str_replace("'",''',$xmlStr); 
        $xmlStr=str_replace("&",'&amp;',$xmlStr); 
        return $xmlStr; 
        } 

        

        // Opens a connection to a MySQL server
        $connection=mysql_connect ($localhost, $username, $password);
        mysql_query("SET NAMES 'utf8'");
        if (!$connection) {
        die('Not connected : ' . mysql_error());
        }

        // Set the active MySQL database
        $db_selected = mysql_select_db($database, $connection);
        if (!$db_selected) {
        die ('Can\'t use db : ' . mysql_error());
        }

        // Select all the rows in the markers table
        $query = "SELECT * FROM hotels WHERE 1";
        $result = mysql_query($query);
        if (!$result) {
        die('Invalid query: ' . mysql_error());
        }

        header("Content-type: text/xml");

        // Start XML file, echo parent node
        echo '<markers>';

        // Iterate through the rows, printing XML nodes for each
        while ($row = @mysql_fetch_assoc($result)){
        // ADD TO XML DOCUMENT NODE
        echo '<marker ';
        echo 'name="' . parseToXML($row['name']) . '" ';
        echo 'strasse="' . parseToXML($row['strasse']) . '" ';
        echo 'plz="' . $row['plz'] . '" ';
        echo 'ort="' . parseToXML($row['ort']) . '" ';
        echo 'breitengrad="' . $row['breitengrad'] . '" ';
        echo 'laengengrad="' . $row['laengengrad'] . '" ';
        echo 'typ="' . $row['typ'] . '" ';
        echo '/>';
        }
        // End XML file
        
        
        echo '</markers>';
        
?>

So soll das dann aussehen.
karte.jpg

individual85 · 16.02.2010, 21:28

Oder bekommt jemand aus diesem Tutorial

http://translate.google.com/translate?client=tmpg&hl=de&u=http%3A%2F%2Feconym. org.uk%2Fgmap%2Fbasic2.htm&langpair=en|de

den Code in meine Seite eingebunden. Ich bin noch etwas neu auf dem Gebiet.

Es gibt die function "create marker", welche die Marker auf der Karte bei mir ausgibt. Nun brauche ich eine Funktion, die die Werte vom Marker im DIV "adresse" ausgibt. Also zum Beispiel straße, ort usw.

infected · 16.02.2010, 22:00

Hi schau Dir mal diesen Beitrag an: http://forum.wordpress-deutschland.o...-auslesen.html

Ich hatte damals genau sowas vor und mir wurde dort so manches erklärt. Leider konnte ich die entsprechenden Dateien auf die Schnelle nicht wieder ausgraben, aber irgendwo müssten die noch liegen. Aber ansich solltest Du Dein Vorhaben mit dem im Beitrag verwendeten Codes umsetzen können. Bei mir hat's ja nachher auch geklappt...

individual85 · 17.02.2010, 14:40

Hallo, genau durch deinen Beitrag bin ich auf dieses Forum gestoßen.
Ich hatte es schon ausprobiert, hat aber nicht funktioniert.

infected · 17.02.2010, 17:22

Gerade nochmal gesucht und getestet. Funktioniert einwandfrei:
testxml.html (XXXXX... da gehört der API Key rein)

Code:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>GMAPS XML TEST</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>

  </head>
  
  <body>
    <div id="map_canvas" style="width: 500px; height: 500px"></div>
    <div id="filialen" style="font-size: 18px; font-weight: bold; color: Green;"><p style="border-bottom-style: dotted; border-bottom-width: 2px; border-bottom-color: Green; width: 500px;">Standorte</p></div>
    <div id="adressen"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
    
      var adressen_html = "";
    
      var gmarkers = [];
      var i = 0;
     
      // EIGENES MARKERICON
      var baseIcon = new GIcon();
      baseIcon.image = "http://www.picbutler.de/bild/117940/markerq9lz3.gif";
      baseIcon.iconSize = new GSize(64, 64);
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.shadowSize = new GSize(70, 64);
      baseIcon.iconAnchor = new GPoint(30, 50);
      baseIcon.infoWindowAnchor = new GPoint(30, 30);
      
      //MARKER ERZEUGEN
      function createMarker(point,name,html) {
        var marker = new GMarker(point, {icon:baseIcon});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          map.setCenter(marker.getLatLng(), 14, G_NORMAL_MAP)
        });
        gmarkers[i] = marker;
        adressen_html += '<a href="javascript:openMarker(' + i + ')">' + name + '</a><br />';
        document.getElementById("adressen").innerHTML = adressen_html;
        i++;
        return marker;
      }

      function openMarker(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
      var map = new GMap2(document.getElementById("map_canvas"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(51.165691,10.451526), 6);
      var geocoder = new GClientGeocoder();

      var request = GXmlHttp.create();
      request.open("GET", "data.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
    		var label = markers[i].getAttribute("adresse");
    		var html = markers[i].getAttribute("adresse");
    		var adresse = markers[i].getAttribute("adresse");
    		geoCoding( label, adresse, html );
          }
        }
      }
      request.send(null);
      
      function geoCoding(name, address, html) {
		if (geocoder) {
			geocoder.getLatLng(
				address,
				function( point ) {
					var marker = createMarker(point, name, html);
					map.addOverlay( marker );
					map.setCenter();
				}
			);
		}
      }
      
    }
    //]]>
    </script>
  </body>
</html>

und die dazugehörige
data.xml

Code:

<?xml version="1.0" encoding="utf-8" ?>
<markers>
  <marker adresse="Konrad-Adenauer-Platz 14, 40210 Düsseldorf" />
  <marker adresse="Schadowplatz 12, 40212 Düsseldorf " />
  <marker adresse="Hindenburgstr. 112, 41061 Mönchengladbach" />
  <marker adresse="Holzheimer Weg 44, 41464 Neuss" />
</markers>

EDIT: Hier nochmal ein Screenshot, wie das Ergebnis am Bildschirm aussieht. Sollte im etwa das sein, was Du oben gesucht hast:

individual85 · 17.02.2010, 18:15

Danke, ich werde es mal ausprobieren.

individual85 · 19.02.2010, 10:11

So, es funktioniert jetzt.

Jetzt möchte ich, wenn ich in die Karte reinzoome und somit weniger Marker angezeigt werden, die die nicht mehr zu sehen sind auch in der Ausgabe unterhalb der Karte verschwinden.