Google Maps - XML Daten auslesen

  • Ich beschäftige mich seit 2 Tagen mit Google Maps (API) und konnte trotz fehlender Javascript Kenntnisse (Google sei Dank!) erste Erfolge erzielen. Nach stundenlangem Rumprobieren habe ich es endlich hinbekommen, mittels etwas Javascript eine XML Datei auszulesen und die Daten auf der Karte auszugeben. Diese Daten (Orte) liegen aber leider nur als Koordinaten vor. Hier mal der Code des Scripts und der XML Datei:

    XML
    <?xml version="1.0" encoding="utf-8" ?>
    <markers>
      <marker lat="51.222346" lng="6.779281"/>
      <marker lat="50.947456" lng="6.959176"/>
      <marker lat="48.136984" lng="11.575938"/>
      <marker lat="49.136984" lng="11.575938"/>
      <marker lat="52.5163" lng="13.3771"/>
    </markers>

    Mein Problem: Wie bekomme ich das nun hin, dass wenn in der XML Datei nur Adressen (Name, Straße, PLZ, Ort) eingetragen sind, diese mittels JS in Koordinaten umgewandelt werden und dann auf der Karte erscheinen? So wie ich das verstanden habe, nennt sich das Prozedere "Geocoding"?! Google spuckt dazu ne ganze Menge aus, aus dem ich aber leider nicht schlau werde.

    Hat sich hier schonmal einer damit befasst und könnte mir eventuell unter die Arme greifen?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Japp, Geocoding ist das richtige Schlüsselwort, und dafür hat die API auch das passende Objekt parat: GClientGeocoder

    Angepasst auf dein Script müsste das so aussehen:


    Rot, das was du nicht mehr brauchst, grün das, was dazu kommt.

    Die XML müsste/könnte dann so aussehen:

    XML
    <?xml version="1.0" encoding="utf-8" ?>
    <markers>
      <marker adresse="Berlin" />
      <marker adresse="Hamburg" />
      <marker adresse="Takatukaland" />
    </markers>

    wpseek.com - Die WordPress-Code-Suchmaschine

  • Hallo Alphawolf!

    Vielen Dank für Deine Antwort. Habe es eben getestet. Nun funktionierts. Vielen Dank nochmal! Die nächsten Schritte werde ich dann erstmal selber versuchen hinzubekommen. Hab ja jetzt schonmal nen guten Ansatz. :-D

    Gruß
    infected

    Einmal editiert, zuletzt von mfitzen (24. Juli 2008 um 11:05)

  • Auf die Gefahr hin, dass ich mich als "unfähig" oute, aber ich komm nicht weiter. Vielleicht sollte ich doch mal die ein oder andere Stunde Javascript lernen. Was ich versuche ist nun, die Daten (Adressen) aus dem XML noch als Links unterhalb der Map (oder auch auf einer anderen Seite meiner Homepage) ausgeben zu lassen. Bei Klick auf den Link einer Adresse soll die Karte auf den Marker springen und ein InfoWindow anzeigen, indem die Adressdaten nochmal ausgegeben werden. Hört sich kompliziert an (und ist es auch für meine Wenigkeit), aber gibt es dafür eine Lösung?

  • Hallo Alphawolf!

    Genau über diese Beispiele bin ich bei meiner langen Suche auch gestolpert. Habe dann natürlich versucht, die dortigen Funktionen irgendwie in meinem Script unterzubringen (hab dann Variablen etc. entsprechend angepasst). Natürlich ohne Erfolg. Ich scheitere auch schon beim InfoWindowHtml(). Das auf einen einfachen Marker anzuwenden bekomme ich hin, aber für jeden einzelnen Punkt aus der XML Datei nicht.

    Was meinst Du denn mit Umstellen um Funktionsaufrufe zu nutzen?

    Nun gut, ich wollte mich morgen nochmal damit beschäftigen. Dann hab ich auch den Firefox mit Firebug etc. zur Verfügung. Das macht die Fehlersuche dann (etwas) einfacher.

  • Guten Morgen!

    Nach etlichen Versuchen am Wochenende bin ich leider keinen Schritt weiter gekommen. Sollte jemand Lust und Zeit haben mir zu helfen, wäre ich sehr dankbar. Ansonsten muss ich mein Vorhaben nochmal überdenken...

  • Also ich habe die Code-Teile mal zwecks Übersicht in jew. eigene Funktionen gepackt, damit man die einzelnen Aufrufe (GeoCoding, InfoFenster öffnen, etc.) jeweils getrennt voneinander aufrufen kann. Der Code sieht nun folgendermaßen aus:


    Im DIV 'adressen' werden dann die Adressen aus der XML geschrieben.

    Wichtig ist, dass du den Code innerhalb des <body>-Bereichs schreibst, da ich die "globale" initialize-Funktion (mitsamt onload) entfernt habe, da ich sie ja in einzelne Funktionen aufgesplittet habe, und der JS-Code nicht aufgerufen werden würde, wenn er im <head>-Bereich liegen würde (ohne onload in <body>-Tag).

    Die XML-Datei bleibt unberührt.

    Hoffe, das hilft dir.

    wpseek.com - Die WordPress-Code-Suchmaschine

  • Wahnsinn! Das hätte ich alleine niemals hinbekommen. :oops: Aber genau so hatte ich mir das vorgestellt. Vielen vielen Dank! Nichtsdestotrotz werde ich wohl nicht drum herum kommen, mir selbst ein bisschen JS anzueignen, damit ich sowas auch mal alleine lösen kann.

    Ich hatte mir bei Google Maps noch dieses Beispiel angesehen und hab versucht es irgendwie auf mein Problem anzuwenden. Auch daran bin ich gescheitert. Klar, ist das wieder was (total) anderes (mit PHP/SQL), aber das Ergebnis kommt meiner Sache schon sehr nahe. Alles ein bisschen "tricky"...

    Ich werde mir Deinen Code heute Abend nochmal genauer unter die Lupe nehmen. Mal sehen ob ich herausfinden kann, wo ich Fehler gemacht habe, bzw. wie Du genau vorgegangen bist.

    Vielen herzlichen Dank für Deine fantastische Hilfe!

  • Guten Morgen!

    Hab mir den Code gestern nochmal angeschaut. Hätte da zwei Fragen zu:
    1) Wozu werden diese Zeilen benötigt? Das leuchtet mir nicht ganz ein...

    Code
    var label = markers[i].getAttribute("adresse");
        var html = markers[i].getAttribute("adresse");


    2)Was hat es mit dieser Zeile auf sich?

    Code
    adressen_html += '<a href="javascript:openMarker(' + i + ')">' + name + '</a><br />';
            document.getElementById("adressen").innerHTML = adressen_html;

    Warum wird der Variable oben kein Wert zugewiesen und was hat dieses + name + für eine Bedeutung?

    Gruß
    infected

  • zu 1.)

    Die Funktkion

    Code
    marker.openInfoWindowHtml([COLOR="Blue"]html[/COLOR]);


    nutzt die Variable [COLOR="Blue"]html[/COLOR], um das InfoWindow mit Inhalten zu füllen, in diesem Fall mit der [COLOR="Green"]Adresse[/COLOR]. Da du aber nur die Adresse dort anzeigen willst, fülle ich die Variable einfach mit der Adresse aus der XML-Datei, also:

    Code
    var html = markers[i].getAttribute("[COLOR="Green"]adresse[/COLOR]");


    Wenn du mehr als die Adresse im InfoFenster aneigen lassen willst, kannst du die Variable auch anders füllen. Du könntest die Zeile z.B. anpassen:

    Code
    var html = markers[i].getAttribute("html");


    und deine XML-Datei anpassen:

    Code
    <marker adresse="Berlin" html="Irgendein weiterer Text" />


    Dann würde im InfoWindow der Wert aus html="Irgendein weiterer Text" genommen werden, anstatt die Adresse aus adresse="Berlin", wie bisher.

    Das Label ist der Linktext zu den Links unter der Karte, die per Klick die InfoFenster in der Map öffnen. Auch hier könntest du die XML-Datei erweitern:

    HTML
    <marker adresse="Berlin" html="Irgendein weiterer Text" linktext="Klick mich" />


    und dann den Code anpassen:

    HTML
    var label = markers[i].getAttribute("linktext");


    Dann würden die Links den Wert aus linktext="Klick mich" haben. Also z.B. <a ...>Klick mich</a>...

    zu 2.)

    Code
    adressen_html += '<a href="javascript:openMarker(' + i + ')">' + name + '</a><br />';


    Da die Funktion in einer Schleife aufgerufen wird, setze ich damit die Adress-Links unter der Map damit zusammen. Bei jedem Schleifendurchlauf wird also ein <a..-Link plus <br/>-Umbruch hinnzugefügt, sodass die Links untereinander stehen.

    Code
    document.getElementById("adressen").innerHTML = adressen_html;


    Und damit "suche" ich das Element mit der id "adressen", also das hier:

    HTML
    <div id="adressen"></div>


    und schreibe die Links dynamisch rein.

    Sieht jetzt alles etwas viel und unübersichtlich aus, ist es aber nicht. :)

    wpseek.com - Die WordPress-Code-Suchmaschine

    Einmal editiert, zuletzt von Alphawolf (29. Juli 2008 um 11:08)

  • Soweit verstanden. ...zumindest den zweiten Teil. Danke für die Erklärung!

    Zur 1. Sache: Mal angenommen ich würde die XML Datei um ein Attribut "telefon" erweitern wollen. Dann kann ich die for-Schleife doch um diesen Code erweitern, oder verstehe ich das falsch?!

    Code
    var nummer = markers[i].getAttribute("telefon");



    Um das dann ins Info Window einzubinden, würde ich den dazugehörigen Code in

    Code
    marker.openInfoWindowHtml('<b>'+ html +'</b><br />' + telefon);

    ändern.
    Leider hat das gerade bei einem Test nicht funktioniert. Wo ist der Denkfehler? Die Sache mit der Erweiterung der XML Datei ist momentan nicht wirklich nötig, aber für die Zukunft auch nicht ganz uninteressant.

  • Du hast vermutlich vergessen, die Variable an die Funktionen zu übergeben, also z.B. so:

    Code
    var label = markers[i].getAttribute("adresse");
    var html = markers[i].getAttribute("adresse");
    var adresse = markers[i].getAttribute("adresse");
    [COLOR="SeaGreen"]var telefon = markers[i].getAttribute("telefon");[/COLOR]
    geoCoding( label, adresse, html, [COLOR="SeaGreen"]telefon[/COLOR] );


    Und dann sowohl in der geoCoding() Funktion als auch in der createMarker() Funktion auch:

    Code
    function geoCoding(name, address, html, [COLOR="SeaGreen"]telefon[/COLOR]) {
    	...
    	var marker = createMarker(point, name, html, [COLOR="SeaGreen"]telefon[/COLOR]);
    	...
    }
    Code
    function createMarker(point,name,html,[COLOR="SeaGreen"]telefon[/COLOR]) {
            ...
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml('<b>'+ html +'</b><br />' + [COLOR="SeaGreen"]telefon[/COLOR]);
            });
            ...
    }

    wpseek.com - Die WordPress-Code-Suchmaschine

  • Deine Vermutung war fast richtig ;) Hatte vergessen die Variable in der createMarker Funktion einzutragen. Danke für den Hinweis, ich hätte mich wieder dumm und dämlich gesucht :mrgreen:.

    Vielleicht noch eine abschließende Frage: Die Links, die unter der Map angezeigt werden, variieren in der Reihenfolge. Das heißt sie werden nicht in der Reihenfolge ausgelesen, wie sie in der XML Datei eingetragen sind. Kann man das ändern? Wenn nicht ist das nicht tragisch...

  • Vielleicht noch eine abschließende Frage: Die Links, die unter der Map angezeigt werden, variieren in der Reihenfolge. Das heißt sie werden nicht in der Reihenfolge ausgelesen, wie sie in der XML Datei eingetragen sind. Kann man das ändern? Wenn nicht ist das nicht tragisch...


    Hmm, das sollten sie eigentlich. :neutral: Die Schleife geht ja vom 0 bis x'ten marker-Tag durch, und zwar von oben nach unten. Muss ich mal testen.

    wpseek.com - Die WordPress-Code-Suchmaschine

  • Zumindest kann ich das im IE7 beaobachten. Wenn ich ein paar Mal F5 drücke, dann werden die Links durcheinandergewürfelt. Manchmal sogar beim ersten Aufruf der Seite.

  • Tja, keine Ahnung, warum der IE das macht. Er nummeriert den Index korrekt durch, also die Link-Ziele lauten openMarker(0), openMarker(1), openMarker(2), etc... nur die Namen würfelt er durch.

    Der Herr Gates hat ja jetzt mehr Zeit. Vielleicht sollte man ihn mal fragen. :-|

    wpseek.com - Die WordPress-Code-Suchmaschine

  • Wie gesagt, es ist nicht sonderlich tragisch. Vielen Dank nochmal für Deine riesen Hilfe! Ich werd mit dem momentanen Stand noch ein wenig rumspielen und mich ggf. bei weiteren Fragen nochmal melden.

    Gruß
    infected

  • Hallo zusammen ...

    Ich habe hierzu noch eine Frage:

    Wie oder wo wird der Ort auf der Karte ermittelt?

    Ich vermute mal hier:



    Ich möchte nicht nur die Stadt, ich möchte auch gerne die Strasse ermitteln. Wo füge ich das hinzu?

    Ich versuche es seit heute Nacht um 2.50 Uhr -mit kleiner Schlafunterbrechung - und komme nicht drauf.

    Noch eine Frage:

    Warum steht hier auf einmal "adress" ?

    Code
    ...
    function geoCoding(name, address, html, preis, strasse, titel) {
    if (geocoder) {
    geocoder.getLatLng(
    address,
    ...

    Einmal editiert, zuletzt von clerencios (16. April 2009 um 12:20)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!