Maschinendenk

Gmapper 0.5 - strukturelle Änderungen

24 Kommentare

Problem entdeckt
Dank verschiedener Kommentare stellte sich heraus, das es ein grosses Problem im Internet Explorer gibt.
Der IE brach das Laden der Seite einfach ab, wenn die Karte in andere Elemente verschachtelt wurde.

Das Problem:
Internet Exlorer hat ein Problem mit der Darstellung von JS Manipulierten Elementen bevor die Seite komplett geladen ist.

Die Lösung
Daher ist es notwendig, das gesamte Javascript im Seitenbody an das ENDE des Seitenbody zu verschieben, nach alle anderen Elemente.

Die bisherigen Versionen der Klassen erlauben eine solche Struktur leider nicht.
Daher habe ich eine neue Version der Klasse veröffentlicht, die eine bessere Strukturierung der JS Scripte erlaubt.

Allerdings ist die Erstellung von Karten nun mit 2 zusätzlichen Funktionsaufrufen, um die Karte zu platzieren und Marker zu generieren verbunden.

Ich habe das Tutorial und die Demoseite aktualisiert, um diesem Fall Rechnung zu tragen.

Links:
Tutorial: http://www.ajax-info.de/google-maps-api-klasse-in-php
Demo: http://philipp.gothic-singles.de/demo.php
Dokumentation: http://philipp.gothic-singles.de/gmap.html
Download: http://philipp.gothic-singles.de/classgmapper05.zip


Geschrieben von Philipp

2. Januar 2007 um 11:00

Veröffentlicht in Bibliotheken, Code

« Gmapper 0.4 veröffentlicht - Map Marker
Gmapper 0.6 - beliebige Markergrafiken »

24 Kommentare zu 'Gmapper 0.5 - strukturelle Änderungen'

Kommentare abonnieren mit RSS

  1. Fürchte es ist noch ein Fehler im Script. Es fehlt ein -tag relativ weit am Ende. Der bewirkt jedoch nur die Ausgabe der Script-Zeilen, ohne die Karte dazustellen übrigens in beiden Browsern, kann aber eigentlich keine große Sache sein. Habs nur noch nicht gefunden.

    Dirk Hermanns

    3 Jan 07 um 8:33

  2. Du musst bestehende Scripte für die neue Version umschreiben.
    Sonst wird nur der JS Code für die Marker ausgegeben.

    Kurze Erklärung
    Du musst VOR dem ersten Marker die Funktion markstart() aufrufen, und NACH dem letzten Marker die Funktion markend() .

    Zusätzlich musst Du zur Positionierung der Karte die Funktion mapdiv(höhe,breite) verwenden.
    Ausserdem entfallen bei der Funktion map() die beiden ersten Parameter (höhe und breite :-) )

    Schau dir mal die aktualisierte demo.php im Downloadarchiv der Version 0.5 an.
    Auch das Tutorial wurde auf die neue Struktur aktualisiert.
    Das sollte es klar stellen.

    Sorry
    Sorry für die Umstände. Es handelt sich bei der Releaseversion um eine “stripped down version” einer Klasse die ich im Produktiveinsatz habe.
    Diese Version war / ist besonders auf “einfach” getrimmt.
    Dabei sind mir beim Testen wohl ein paar Sachen entgangen, die so in meiner Produktivversion eh nicht passieren. *schäm*
    Die jetzt durchgeführten Änderungen sollten aber den flexiblen Einsatz der Klasse erheblich erleichtern, strukturelle Probleme beheben und die Entwicklung für die Zukunft sichern. :)

    Philipp

    3 Jan 07 um 10:18

  3. Noch eine Kleinigkeit, im Tutorial leitest du die Marker mit markerstart ein, allerdings ist in der php-datei nur von einer markstart die rede. Hinzu kommt die Schwierigkeit, dass der Schlüssen von Google scheinbar nicht mehr funktioniert (wie auch bei deiner Demo).

    Dirk Hermanns

    3 Jan 07 um 12:44

  4. Danke für den Hinweis, da hab ich mich im Eifer des Gefechts vertippt.
    Tutorial ist aktualisiert.

    Was den Key angeht:

    Du musst der Funktion headjs() DEINEN Key den du für DEINE Domain erstellt hast übergeben. Ich habe in demo.php diesen Parameter absichtlich leer geassen.

    Wie du einen Key erzeugst, erklärt das Tutorial.

    Philipp

    3 Jan 07 um 4:03

  5. Hmm, hab ich schon begriffen mit dem Key. Problem bleibt trotzdem bestehen. Und in der 0.3-Version hat ja auch im FF alles funktioniert, inkl. des Keys. Komisch, komisch.

    Dirk Hermanns

    3 Jan 07 um 5:57

  6. Hallo,

    klappt fast alles super, aber:

    Die Polyline (aus einer XML Datei) wird im FF nur angezeigt, wenn ich die Karte mit “hybrid” initiallisiert habe. Im IE7 klappt das auch mit den anderen Optionen.

    Gruß Karl

    Karl

    3 Jan 07 um 6:53

  7. Dirk: Gib doch mal einen Link zu einer Seite wo du Probleme mit dem Key hast. Dann schaue ich mal rein.

    Philipp

    3 Jan 07 um 9:07

  8. Hallo Philipp, hier der Link:
    http://www.braeutigam-hanses.com/front_content.php?idcat=10

    Scheint im FF wieder zu funzen, im IE allerdings bleibt alles wie gehabt.

    Dirk Hermanns

    4 Jan 07 um 11:08

  9. Dies ist ein Problem des IE.
    Das Problem ist:
    IE bricht das Laden ab, wenn Du das JS für die Karte in HTML Elementen verschachtelst.

    Bei dir sieht das so aus:

    ...
<script type="text/javascript">
var point = new GLatLng("51.1303","8.3746");
var marker = createMarker(point, '');
var to = point;map.addOverlay(marker);

</script></p>
</div>
        </div>

        
         <div class="footer">
...

    Du gibst also nach den Scripten für die Karte noch weitere HTML Elemente aus. Das ist genau das Problem mit dem IE, das zum Release der neuen Version führte.
    Die neue Version “behebt” dieses Problem nicht automatisch, sie ermöglicht es aber den JS Code so zu platzieren das IE das lesen kann.
    Du musst den JS Code (Die Funktione map(), bodyjs() und die marker) also an das ENDE des Seitenbody setzen.
    Es dürfen danach KEINE weitere Blockelemente vorkommen.

    Also NACH das letzte Blockelement (/div) und VOR /body

    Es müsste also in etwa so aussehen:

    <!-- hCard ENDE -->

           </div>

</div>
KARTENSCRIPTE HIER
</body>

    Schau dir mal den HTML Code von: http://www.visional-dreams.de/new_woerlitz/gardens.php?gardenmode=gardens&mode=ueberblick&title=6 an

    Dort siehst Du wie es strukturell sein muss, damit es mit dem IE klappt.

    Philipp

    4 Jan 07 um 12:08

  10. Hallo Philipp,

    gibt es für das oben von mir angesprochene Problem (Marker im Firefox nur bei Hybrid Initialisierung der Karte) eine Lösung? Oder ist das etwa nur bei mir so? Die Hybrid Darstellung ist oft sehr unübersichtlich, deshalb würde ich gerne auch mit den anderen Einstellungen starten können.

    Gruß Karl

    Karl

    6 Jan 07 um 10:43

  11. Lösung:

    Die Funktion bodyjs() VOR der Funktion map() aufrufen.
    Also einfach beispielsweise:

    $karte->bodyjs();
$karte->map(6,'49.980067','10.8731',"normal",1,14);

    Nicht

    $karte->map(6,'49.980067','10.8731',"normal",1,14);
$karte->bodyjs();

    Ich habe den Beispielcode bereits angepasst (->nächstes Release / http://philipp.gothic-singles.de/demoxml.php) und das Tutorial aktualisiert.
    Mir ist noch nicht ganz klar, woran dieses Verhalten liegt.
    Werde das weiter untersuchen, und hoffentlich in der nächsten Version bereits beheben können :)

    Philipp

    7 Jan 07 um 1:20

  12. Super!

    Danke und Gruß
    Karl

    Karl

    7 Jan 07 um 12:10

  13. Hallo !

    Die Sache mit der Klasse für Google Maps gefällt mir.
    Leider vermisse ich ein Forum zu diesem Gebiet.
    Wäre das nicht eine Idee um noch unkomplizierter Informationen auszutauschen ?

    M.f.G.

    Stephan Krauß

    Stephan Krauß

    14 Jan 07 um 3:16

  14. Um das Layout nicht völlig wegem dem IE Fehler zu zerstören kann man die Karte auch via IFrame einbinden (um sie nicht kurz vor dem /body einfügen zu müssen).

    Wie kann man eigentlich festlegen, dass für eine “Flagge” eine andere Grafik (z. B. roter Tropfen) verwendet wird?

    Gast

    15 Jan 07 um 9:23

  15. Hallo !

    Ich habe mir das Demobeispiel der Version 0.5 im Firefox 1.5.0.x angeschaut.
    In der Methode MapMarker wird eine Detailkarte im Infofenster erzeugt.
    Es ist der Polygon und das Icon zu sehen. Des weiteren wird ein nicht vorhandenes Image angezeigt. Soll das ‘Shadow’ sein ?
    Dieser Effekt taucht nur im FF auf.

    Gruß Stephan

    Stephan

    18 Jan 07 um 4:57

  16. Hallo !

    Mir ist der Browser zum wiederholten mal abgestürzt.
    Ich wollte ausgehend vom Demo - Beispiel eine XML - Datei einbinden.
    Siehe Beispiel:

    —————————-

    $karte->map(12,’50.579857570491875′,’12.622947692871093′,”hybrid”,1,14);
    $karte->bodyjs();

    // Ich füge eine XML hinzu
    $karte->markstart();
    $points = $karte->parseGxml(”koordinate1.txt”);
    $karte->markend();
    ____________________________________

    Was mache ich verkehrt ?

    Gruß Stephan

    Stephan

    18 Jan 07 um 5:11

  17. Du fügst keine Marker hinzu.

    Der Code den du eingefügt hast, parsed lediglich deine XML Datei und speichert die Koordinaten in $points (als array) ab.

    Um nun beispielsweise alle Koordinaten aus der XML Datei auf der Karte auszugeben kannst Du zb so vorgehen:

    <?php
$karte->bodyjs();
$karte->map(6,'49.980067','10.8731',"satellit",1,14);
$points = $karte->parseGxml("data.xml");
$karte->markstart();
//Wir durchlaufen die Punkte und erzeugen für jeden Punkt einen Marker.
foreach($points as $point)
{
$karte->marker($point[0],$point[1] );
}
$karte->markend();

    Ich habe mir das Demobeispiel der Version 0.5 im Firefox 1.5.0.x angeschaut.

    Danke für den Hinweis.
    Ich habe nur mit Firefox 2.0 getestet. Werde es mir mal ansehen.

    Philipp

    19 Jan 07 um 2:05

  18. Um das Layout nicht völlig wegem dem IE Fehler zu zerstören kann man die Karte auch via IFrame einbinden (um sie nicht kurz vor dem /body einfügen zu müssen).

    Da hast Du etwas falsch verstanden.
    Du kannst die Karte platzieren wo Du möchtest.

    Die Platzierung der Karte legst Du mit der Methode mapdiv(höhe,breite); fest.
    Diese Methode kannst Du an einer beliebigen Stelle im HTML Code aufrufen.

    Lediglich die Scriptanteile (bodyjs(),map(),marker…) müssen direkt vor den /body Tag.

    Philipp

    19 Jan 07 um 2:11

  19. Hallo, erstmal danke für deine Anstrenguungen und die schöne PHP-Klasse. Hab allerdings ein kleines Problem mit dem IE. Habe meine Ausgabe direkt vor das Ende des Bodys gestellt. Allerdings hat er Probleme beim Darstellen von Polylines. Wenn ich nur einen Marker setze funktioniert die Map einwandfrei.

    Hier die Fehlermeldung des IE wenn ich Polylines anzeigen will:

    Zeile: 30
    Zeichen: 18

    Fehler: Unerwarteter Aufruf oder Zugriff.

    Grüße
    duderino

    duderino

    25 Jan 07 um 9:00

  20. Hast Du den diesbezüglichen Hinweis im Tutorial beachtet ?

    Du musst deinen HTML Tag modifizieren, damit IE die Polylines korrekt darstellt
    also statt

    <html>

    einfach

    <html xmlns:v="urn:schemas-microsoft-com:vml">

    Weitere Hinweise im Tutorial

    Ansonsten: Hast Du mal einen Link zu der Seite mit dem Problem ?

    Philipp

    25 Jan 07 um 9:05

  21. Hallo zusammen,

    Ersteinmal Kompliment an den Herren Programmierer für den guten Ansatz alles in einer Klasse zu bündeln.

    Ich habe einige Anregungen, was die Erweiterung angeht. Um nicht immer im Quellcode der Klasse Änderungen vornehmen zu müssen habe ich zum Beispiel den Aufruf der map um einige Parameter erweitert:

    *@param string $mapcontrol Typ der Kartennavi (large,small,FALSE)
    *@param bool $maptypecontrol Umschalter Karte,Satelit,Hyprid
    *@param bool $mapscalecontrol Scala / Mastabsanzeige
    *@param bool $mapview Übersichtsfenster
    *@return bool

    [..],$mapcontrol=”large”,$maptypecontrol=TRUE,$mapscalecontrol=FALSE,$mapview=FALSE)

    Das ganze dann so eingebunden:
    if ($mapcontrol == “large”) echo “map.addControl(new GLargeMapControl());\n”;
    elseif ($mapcontrol == “small”) echo “map.addControl(new GSmallMapControl());\n”;

    if ($maptypecontrol) echo “map.addControl(new GMapTypeControl());\n”;
    if ($mapscalecontrol) echo “map.addControl(new GScaleControl());\n”;
    if ($mapview) echo “map.addControl(new GOverviewMapControl());\n”;

    Ich habe noch viele Ideen, wie man es verbessern könnte. Zum Beispiel die Anzeige von Markern mit Reitern (Tabs).
    Außerdem wäre es gut, wenn man z.B. die Bilder in Konfigurationsfiles auslagern könnte.
    Ein Forum für diese Klasse wäre eine gute Idee :-)

    Gruß Michael

    Michael Stahmann

    25 Jan 07 um 1:37

  22. $mapcontrol wird in der nächsten version als methode eingebunden sein
    mapcontrol(large/small/etc);

    Auch Marker mit Tabs werden eingebunden sein.

    Schau dir mal die Demoseite an, und klick auf den blauen Marker ausserhalb der Polyline ;-)

    Danke für dein Interesse :) Ich werde mit der nächsten Version von Gmapper eine eigene Projektseite einrichten - wo dann auch ein Forum zur Diskussion zur Verfügung steht.

    Was die Grafiken angeht:
    Ich plane derzeit einfach den Markermethoden Grafikdateien übergeben zu können
    marker(laenge,breite,’marker.png’);

    Das sollte die Flexibilität maximieren.

    Bitte noch ein paar Tage Geduld :)

    Philipp

    25 Jan 07 um 5:35

  23. Hallo, ich habe noch ein paar Probleme mit Markern (otherMarker) im IE. Und zwar bekomme ich folgende Meldung beim Aufrufen der Seite:

    Zeile 9
    Zeichen 32
    Ungültiges Argument
    Code 0

    Mein JS Code steht ganz unten an der Seite, direkt vor dem Body. Ich habe auch den HTML-Tag (siehe 2 Beiträge weiter oben) richtig angepasst. Ist das ein allgemeines Problem oder habe noch etwas vergessen anzupassen. Die Seite ist im Moment nur auf meinem lokalen Webserver gehostet.

    Grüße
    duderino

    duderino

    1 Feb 07 um 3:47

  24. Hab das Problem immernoch. Wenn mir jemand einen Tip geben könnte wäre ich sehr dankbar.

    Grüße
    duderino

    duderino

    6 Feb 07 um 9:13

Kommentar schreiben

Sie müssen eingeloggt sein um einen Kommentar zu verfassen.