• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Anzeige von Adressen in Karte aus unterschiedlichen DB-Tabellen

BDC

New member
Hallo Zusammen,

ich lasse mir auf einer Karte Adressen anzeigen.
Das klappt auch ganz gut.

Nun möchte ich aus unterschiedlichen Tabellen Adressen in einer Karte anzeigen lassen, wobei die Typen ( Hotels, Baustoffhändler) unterschiedliche Farben haben sollten.

In der XML verwende ich einmal "Marker" und " Hotelmarker "

Allerdings komme ich mit der Karte nicht weiter !

Kann hier jemand helfen ?


XML:
PHP:
<?php  

ini_set('display_errors', 0);
error_reporting( E_ALL ); 

$pdo = new PDO('mysql:host=localhost;dbname=XX', 'root', 'XX');

$sql = "SELECT * FROM baustoffe
        WHERE baustoffe_status = 0";

$sql1 = "SELECT * FROM hotel
        WHERE hotel_status = 0";

// Start XML file, create parent node 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node);  

 

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

// Iterate through the rows, adding XML nodes for each 

foreach ($pdo->query($sql) as $row) {  
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("marker");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("name",$row['baustoffe_name']); 
  $newnode->setAttribute("plz", $row['baustoffe_plz']); 
  $newnode->setAttribute("ort", $row['baustoffe_ort']); 
  $newnode->setAttribute("anmerkungen", $row['baustoffe_anmerkungen']); 
  $newnode->setAttribute("telefon", $row['baustoffe_telefon']); 
  $newnode->setAttribute("strasse", $row['baustoffe_strasse']); 
  $newnode->setAttribute("mail", $row['baustoffe_mail']); 
  $newnode->setAttribute("lat", $row['baustoffe_lat']);   
  $newnode->setAttribute("lng", $row['baustoffe_lng']);   
 
}  

foreach ($pdo->query($sql1) as $row) {  
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("hotelmarker");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("hotelname",$row['hotel_name']); 
  $newnode->setAttribute("hotelplz", $row['hotel_plz']); 
  $newnode->setAttribute("hotelort", $row['hotel_ort']); 
  $newnode->setAttribute("hotelanmerkungen", $row['hotel_anmerkungen']); 
  $newnode->setAttribute("hoteltelefon", $row['hotel_telefon']); 
  $newnode->setAttribute("hotelstrasse", $row['hotel_strasse']); 
  $newnode->setAttribute("hotelmail", $row['hotel_mail']); 
  $newnode->setAttribute("hotellat", $row['hotel_lat']);   
  $newnode->setAttribute("hotellng", $row['hotel_lng']);   
 
}  

echo $dom->saveXML(); 

?>


Karte:
PHP:
<!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>NuBIS - Hotel Übersicht</title> 
      <div>
         <a href="javascript:window.close()">zurück zu NuBIS-Hotels</a>
    </div>
    <link rel="stylesheet" type="text/css" href="style_casinosearcher.css"> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=api&v=2&key=***"  
       type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var iconBlue = new GIcon();  
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconBlue.iconSize = new GSize(12, 20); 
    iconBlue.shadowSize = new GSize(22, 20); 
    iconBlue.iconAnchor = new GPoint(6, 20); 
    iconBlue.infoWindowAnchor = new GPoint(5, 1); 

    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["extended"] = iconBlue; 
    customIcons["normal"] = iconRed; 

    function load() { 
      if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map")); 
        map.addControl(new GSmallMapControl()); 
        map.addControl(new GMapTypeControl()); 
        map.setCenter(new GLatLng(51.92277778, 10.43083333), 7); 

        // Change this depending on the name of your PHP file 
        GDownloadUrl("hotel_xml.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 anmerkungen = markers[i].getAttribute("anmerkungen"); 
            var plz = markers[i].getAttribute("plz"); 
            var ort = markers[i].getAttribute("ort"); 
            var strasse = markers[i].getAttribute("strasse"); 
            var telefon = markers[i].getAttribute("telefon"); 
            var mail = markers[i].getAttribute("mail"); 
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                                    parseFloat(markers[i].getAttribute("lng"))); 
            var marker = createMarker(point, name, anmerkungen, plz, ort, strasse, telefon, mail); 
            map.addOverlay(marker); 
          } 
        }); 
      } 
    } 

    function createMarker(point, name, anmerkungen, plz, ort, strasse, telefon, mail) { 
      var marker = new GMarker(point, customIcons[name]); 
      
      
      var html = "<b><x1> Hotel "+ name +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + " " + ort + "<br><br/><b>Telefon:</b><br><br/>" +telefon + "<br><br/><b>E-Mail:</b><br><br/>" + mail + "<br><br/><b>Anmerkungen:</b><br><br/>" + anmerkungen; 
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowHtml(html); 
      }); 
      return marker; 
    } 
    //]]> 
  </script> 
  </head> 

  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 1950px; height: 900px"></div> 
  </body> 
</html>
 
Zuletzt bearbeitet von einem Moderator:
Hi,

vielen Dank für die Antwort !
Ich habe es so verändert, jedoch bekomme ich nichts angezeigt.
Eine Fehlermeldung erhalte ich aber auch nicht.

Letztlich ist das Ziel unterschiedliche Tabellen aus einer DB anzuzeigen, wobei jeder Tabellen INhalt eine unterschiedliche Farbe als Marker haben soll.

PHP:
<!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>NuBIS - Hotel Übersicht</title> 
      <div>
         <a href="javascript:window.close()">zurück zu NuBIS-Hotels</a>
    </div>
    
    <script src="http://maps.google.com/maps?file=api&v=2&key=api&v=2&key=***"  
       type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var iconBlue = new GIcon();  
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; 
    iconBlue.iconSize = new GSize(12, 20); 
    iconBlue.shadowSize = new GSize(22, 20); 
    iconBlue.iconAnchor = new GPoint(6, 20); 
    iconBlue.infoWindowAnchor = new GPoint(5, 1); 

    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["extended"] = iconBlue; 
    customIcons["normal"] = iconRed; 

    function load() { 
      if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map")); 
        map.addControl(new GSmallMapControl()); 
        map.addControl(new GMapTypeControl()); 
        map.setCenter(new GLatLng(51.92277778, 10.43083333), 7); 

        // Change this depending on the name of your PHP file 
        GDownloadUrl("testxml.php", function(data) { 
          var xml = GXml.parse(data); 
          var markers = xml.documentElement.getElementsByTagName("marker,hotelmarker"); 
          for (var i = 0; i < markers.length; i++) { 
            var name = markers[i].getAttribute("name"); 
            var anmerkungen = markers[i].getAttribute("anmerkungen"); 
            var plz = markers[i].getAttribute("plz"); 
            var ort = markers[i].getAttribute("ort"); 
            var strasse = markers[i].getAttribute("strasse"); 
            var telefon = markers[i].getAttribute("telefon"); 
            var mail = markers[i].getAttribute("mail"); 
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                                    parseFloat(markers[i].getAttribute("lng")));

            var marker = createMarker(point, name, anmerkungen, plz, ort, strasse, telefon, mail); 
            map.addOverlay(marker); 

            var hotelname = markers[i].getAttribute("hotelname"); 
            var hotelanmerkungen = markers[i].getAttribute("hotelanmerkungen"); 
            var hotelplz = markers[i].getAttribute("hotelplz"); 
            var hotelort = markers[i].getAttribute("hotelort"); 
            var hotelstrasse = markers[i].getAttribute("hotelstrasse"); 
            var hoteltelefon = markers[i].getAttribute("hoteltelefon"); 
            var hotelmail = markers[i].getAttribute("hotelmail"); 
            var hotelpoint = new GLatLng(parseFloat(markers[i].getAttribute("hotellat")), 
                                    parseFloat(markers[i].getAttribute("hotellng")));

            var hotelmarker = createMarker(hotelpoint, hotelname, hotelanmerkungen, hotelplz, hotelort, hotelstrasse, hoteltelefon, hotelmail); 
            map.addOverlay(hotelmarker); 
          } 
        }); 
      } 
    } 

    function createMarker(point, name, anmerkungen, plz, ort, strasse, telefon, mail) { 
      var marker = new GMarker(point, customIcons[name]); 
      
      
      var html = "<b><x1> Hotel "+ name +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + " " + ort + "<br><br/><b>Telefon:</b><br><br/>" +telefon + "<br><br/><b>E-Mail:</b><br><br/>" + mail + "<br><br/><b>Anmerkungen:</b><br><br/>" + anmerkungen; 
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowHtml(html); 
      }); 
      return marker; 
    } 

    function createhotelMarker(hotelpoint, hotelname, hotelanmerkungen, hotelplz, hotelort, hotelstrasse, hoteltelefon, hotelmail) { 
      var hotelmarker = new GMarker(hotelpoint, customIcons[hotelname]); 
      
      
      var html = "<b><x1> Hotel "+ hotelname +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ hotelname + "<br/>" + hotelstrasse + "</hr><br/>" + hotelplz + " " + hotelort + "<br><br/><b>Telefon:</b><br><br/>" +hoteltelefon + "<br><br/><b>E-Mail:</b><br><br/>" + hotelmail + "<br><br/><b>Anmerkungen:</b><br><br/>" + hotelanmerkungen; 
      GEvent.addListener(hotelmarker, 'click', function() { 
        hotelmarker.openInfoWindowHtml(html); 
      }); 
      return hotelmarker; 
    } 
    //]]> 
  </script> 
  </head> 

  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 1950px; height: 900px"></div> 
  </body> 
</html>
 
Zuletzt bearbeitet von einem Moderator:
var markers = xml.documentElement.getElementsByTagName("marker,hotelmarker");
So funktioniert getElementsByTagName nicht. Da kannst du nur einen TagName übergeben. Entweder du arbeitest mit .querySelectorAll oder machst zwei Aufrufe von .getElementsByTagName.

Aber generell würde ich das XML einfach anders aufbauen. Wenn die beiden Type exakt die gleichen Inhalte haben, sich aber nur im Typ unterscheiden (und deswegen eine andere Farbe bekommen sollen), würde ich das XML da auch komplett identisch aufbauen, nur ein Attribut "type" machen, indem dann der unterschied gespeichert wird. Dieses Attribut kannst du dann auslesen und dann entsprechend einfärbe.

PS: Ich würde den Key nicht hier im Forum posten... ist zwar technisch gesehen kein Geheimniss, aber trotzdem.
 
Vielen Dank für deine Hilfe. jedoch scheitere ich durch meine Unwissenheit an der Umsetzung.

Müsste nicht jedem Attribut der Typ mitgegeben werden ? Wie bezieht sich die Karte darauf ?

Vielleicht kannst du mir ein Beispiel geben damit ich auf den richtigen Weg komme.
Leider bin ich nicht ganz so sattelfest in JavaScript.
 
Müsste nicht jedem Attribut der Typ mitgegeben werden ?
Nein, warum? Das ganze ist im XML doch eine Einheit und da brauchst du den Typ nur ein mal.

Wie bezieht sich die Karte darauf ?
Über das Attribut... Ich verstehe nicht genau, was dein Problem ist.

Im Grunde musst du dein PHP umschreiben:
PHP:
<?php  

ini_set('display_errors', 0);
error_reporting( E_ALL ); 

$pdo = new PDO('mysql:host=localhost;dbname=XX', 'root', 'XX');

$sql = "SELECT * FROM baustoffe
        WHERE baustoffe_status = 0";

$sql1 = "SELECT * FROM hotel
        WHERE hotel_status = 0";

// Start XML file, create parent node 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node);  

 

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

// Iterate through the rows, adding XML nodes for each 

foreach ($pdo->query($sql) as $row) {  
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("marker");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("name",$row['baustoffe_name']); 
  $newnode->setAttribute("plz", $row['baustoffe_plz']); 
  $newnode->setAttribute("ort", $row['baustoffe_ort']); 
  $newnode->setAttribute("anmerkungen", $row['baustoffe_anmerkungen']); 
  $newnode->setAttribute("telefon", $row['baustoffe_telefon']); 
  $newnode->setAttribute("strasse", $row['baustoffe_strasse']); 
  $newnode->setAttribute("mail", $row['baustoffe_mail']); 
  $newnode->setAttribute("lat", $row['baustoffe_lat']);   
  $newnode->setAttribute("lng", $row['baustoffe_lng']);   
  $newnode->setAttribute("typ", "baustoff");   
 
}  

foreach ($pdo->query($sql1) as $row) {  
  // ADD TO XML DOCUMENT NODE   
  $node = $dom->createElement("marker");   
  $newnode = $parnode->appendChild($node);    
  $newnode->setAttribute("name",$row['hotel_name']); 
  $newnode->setAttribute("plz", $row['hotel_plz']); 
  $newnode->setAttribute("ort", $row['hotel_ort']); 
  $newnode->setAttribute("anmerkungen", $row['hotel_anmerkungen']); 
  $newnode->setAttribute("telefon", $row['hotel_telefon']); 
  $newnode->setAttribute("strasse", $row['hotel_strasse']); 
  $newnode->setAttribute("mail", $row['hotel_mail']); 
  $newnode->setAttribute("lat", $row['hotel_lat']);   
  $newnode->setAttribute("lng", $row['hotel_lng']);   
  $newnode->setAttribute("typ", "hotel");   
 
}  

echo $dom->saveXML();
und dann kannst du über markers[i].getAttribute("typ"); den Typ abfragen und dann den Marker entsprechend anders formatieren/gestalten.
 
Hallo,

soweit habe ich alles umgestellt, und denke das ich mit einer IF Anweisung am Besten auswerten könnte.
Jedoch bekomme ich nur die Karte angezeigt, aber nicht die Marker !

Was übersehe ich denn ? Habe diverse Sachen ausprobiert, komme aber nicht auf den Fehler :

PHP:
      var plz = markers[i].getAttribute("plz"); 
            var ort = markers[i].getAttribute("ort"); 
            var strasse = markers[i].getAttribute("strasse"); 
            var anmerkungen = markers[i].getAttribute("anmerkungen"); 
            var telefon = markers[i].getAttribute("telefon"); 
            var mail = markers[i].getAttribute("mail"); 
            var typ = markers[i].getAttribute("typ"); 
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                                    parseFloat(markers[i].getAttribute("lng"))); 
            var marker = createMarker(point, name, plz, ort, strasse, anmerkungen, telefon, mail); 
            map.addOverlay(marker); 
          } 
        }); 
      } 
    } 

    if (typ == "hotel") {
    


    function createMarker(point, name, plz, ort, strasse, anmerkungen, telefon, mail) { 

     
      var marker = new GMarker(point, customIcons['extended']); 
     
      var html = "<b><x1> Angebot "+ name +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Bauvorhaben:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + " " + ort + "<br><br/><b>Bearbeiter:</b><br><br/>" +anmerkungen + "<br><br/><b>Abgabetermin:</b><br><br/>" + telefon + "<br><br/><b>Bauherr:</b><br><br/>" + mail; 
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowHtml(html); 
      });
      
    
      return marker; 
    }

    } 
    //]]> 
  </script> 
  </head> 

  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 1950px; height: 900px"></div> 
  </body> 
</html>


Ich habe jetzt nochmal hin und her probiert.... und ich habe bemerkt das die IF Abfrage so nicht gehen kann da die Variable typ weiter unten nicht mehr zur Verfügung steht. Kann ich die nach Ende der Funktion denn wieder aufgreifen ?

- - - Aktualisiert - - -

Hallo,

vorab nochmal vielen Dank für eure Hilfe.
Ich habe es jetzt soweit zurecht gefriemelt.

Funktion ist gegeben, wobei ich nicht weiß ob es eine schönere Lösung gibt.

PHP:
function load() { 
      if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map")); 
        map.addControl(new GSmallMapControl()); 
        map.addControl(new GMapTypeControl()); 
        map.setCenter(new GLatLng(51.92277778, 10.43083333), 7); 

        // Change this depending on the name of your PHP file 
        GDownloadUrl("testxml.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 plz = markers[i].getAttribute("plz"); 
            var ort = markers[i].getAttribute("ort"); 
            var strasse = markers[i].getAttribute("strasse"); 
            var anmerkungen = markers[i].getAttribute("anmerkungen"); 
            var telefon = markers[i].getAttribute("telefon"); 
            var mail = markers[i].getAttribute("mail"); 
            var typ = markers[i].getAttribute("typ"); 
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
                                    parseFloat(markers[i].getAttribute("lng"))); 
            var marker = createMarker(point, name, plz, ort, strasse, anmerkungen, telefon, mail, typ); 
            map.addOverlay(marker);
            

          } 
        }); 
      } 
    } 


    


    function createMarker(point, name, plz, ort, strasse, anmerkungen, telefon, mail, typ) { 

     
      if (typ == "hotel"){
      var marker = new GMarker(point, customIcons['blau']); 
      }
      if (typ == "baustoff"){
      var marker = new GMarker(point, customIcons['rot']); 
      }
      if (typ == "subs"){
      var marker = new GMarker(point, customIcons['gruen']); 
      }

      var html = "<b><x1> Angebot "+ name +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Bauvorhaben:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + " " + ort + "<br><br/><b>Bearbeiter:</b><br><br/>" +anmerkungen + "<br><br/><b>Abgabetermin:</b><br><br/>" + telefon + "<br><br/><b>Bauherr:</b><br><br/>" + mail; 
      GEvent.addListener(marker, 'click', function() { 
        marker.openInfoWindowHtml(html); 
      });
      
    
      return marker; 
    
    } 
    //]]> 
  </script> 
  </head> 

  <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 1950px; height: 900px"></div> 
  </body> 
</html>
 
Zuletzt bearbeitet:
Zurück
Oben