Google Maps, panTo() und openInfoWindowHtml()

Hi,

heute bin ich mal wieder über ein Problem beim arbeiten mit der Google Maps API gestoßen.

Will man den Kartenausschnitt auf einen Marker zentrieren, genauer gesagt mittels panTo() mit einer Animation, und danach das Info-Fenster des Markers anzeigen, funktioniert das Zentrieren der Karte nicht, da das Erscheinen des Info-Fensters die Animation beendet.

Hier ein Workaround für das Problem. Ich konnte keine „schönere“ Lösung finden. Auch der onOpenFn Callback-Parameter der openInfoWindowHtml() Funktion hat nicht funktioniert.

var p = new GLatLng(48.891041,11.185246);
var m = new GMarker(p);

var evt = GEvent.addListener(map,'moveend',function(){
	m.openInfoWindowHtml('Inhalt des Info-Fensters');
	GEvent.removeListener(evt);	
});

map.panTo(p);

Vielleicht hilfts ja dem ein oder anderen.

gzip komprimierte Javascript- und CSS-Dateien

Hi,

im letzten Post habe ich über eine komprimierte Variante der neuesten Prototype-Version geschrieben. Wie versprochen werde ich in diesem Post erklären, wie man so eine mit gzip-komprimierte Datei möglichst elegant und flexibel in seine Seite einbindet.

Dazu legt man einfach eine .htaccess-Datei mit folgendem Inhalt an:

RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteCond %{REQUEST_FILENAME} ^.+\.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+) $1.gz [QSA,L]
RemoveType .gz
AddEncoding x-gzip .gz

Wichtig: der Apache muss mod_rewrite aktiviert haben!

Jetzt muss man nur noch für alle Dateien, die man komprimiert ausliefern will eine entsprechende Variante mit dem Suffix .gz im gleichen Verzeichnis in dem das Original liegt anlegen.

Ist eine solche gzip Datei vorhanden wird diese anstatt der unkomprimierten Variante übertragen, ansonsten ändert sich nichts.

Hinweis: folgende Zeile war bei mir zwingend nötig um die globale Einstellung vom Apache zu überschreiben. Keine der Lösungen, die im Netz gefunden habe, weist darauf hin!

RemoveType .gz

Unterstützt ein Browser keine Komprimierung (sowas gibts hoffentlich nicht mehr, selbst der IE4 kann das) werden die Regeln einfach ignoriert.

Das wars auch schon. Mit dieser kleinen, aber feinen Lösung verkürzt man die Ladezeit seiner Seite erheblich.

Prototype 1.6.1 RC3 compressed/packed

Tach,

endlich mal wieder ein neuer Eintrag hier :)

Ich benutze für meine Projekte ja immer prototype und die aktuelle stabile Version (1.6.0.3) ist leider nicht kompatibel zum IE8. Da der aktuelle Release Candidate sehr stabil aussieht und bei meinen Tests alles funktioniert hat, wollte ich die neue Version auch produktiv einsetzen.

Ich habe bisher immer eine komprimierte Version (protopacked) von prototype benutzt, das mit shrinkVars und co auf unter 50kb komprimiert wurde.

Leider steht diese minimierte Version nicht für den aktuellen RC zur Verfügung, es gibt lediglich protoaculous, was eine Kombination aus Prototype und script.aculo.us ist. Da ich zweiteres aber so gut wie nie brauche, sind mir die zusätzlichen Bytes zu viel.

Ich habe daher meine eigene Variante erzeugt. Dazu habe ich mehrere JavaScript Komprimier-Tools probiert und nur zwei davon funktionierten mit der neuen Prototype Version.

YUI Compressor
http://developer.yahoo.com/yui/compressor/

java -jar yuicompressor-2.4.2.jar -o yui.js prototype.js

yui.js (80kb)
yui.js.gz (24kb)

ShrinkSafe
http://dojotoolkit.org/docs/shrinksafe

java -jar shrinksafe.jar prototype.js > shrink.js

shrink.js (96kb)
shrink.js.gz (27kb)

Original Prototype
http://www.prototypejs.org

prototype.js (137kb)
prototype.js.gz (31kb)

Man sieht, dass man durch gzip Komprimierung jede Menge rausholen kann.
Die Optimierung des JS-Codes kann man sich auch sparen, aber ein paar KB sind doch rauszuholen.

Wie man gzip-komprimierte JS-Dateien nun in eine Seite einbindet, erklär ich im nächsten Post.

GoogleMaps: Route anpassen

Tach,

heute mal wieder was zu GoogleMaps.
Es soll darum gehen Routen, welche mit GDirections erzeugt werden im Nachhinein anzupassen, d.h. z.B. Farbe, Transparenz und Dicke der Linie, aber auch um z.B. die Symbole der einzelnen Marker auszutauschen.

Zunächst mal die Berechnung der Route selbst:

d = new GDirections();
d.color = "#FF0000";
d.loadFromWaypoints(
  ["40.000,40.000","41.000,41.000"],
  {locale: "de", getPolyline: true}
);

GEvent.addListener(d,'load',replacePolyline);

Dieser Code erzeugt ein neues GDirections-Objekt und berechnet die Route anhand von 2 Wegpunkten.
Dadurch, dass wir dem Konstruktor keine Parameter übergeben wird die Route allerdings noch nicht an die Karte gebunden, d.h. das Overlay wird nich eingeblendet und die Karte wird auch nicht gezoomt oder verschoben.
Wir registrieren uns außerdem einen Event-Handler, der anspringt, sobald unser GDirections-Objekt alle erforderlichen Berechnungen durchgeführt hat.
Ist dies der Fall, wird unsere Funktion „replacePolyLine“ aufgerufen.

function replacePolyline() {
	
        // Original Polyline verstecken
	this.getPolyline().hide();

	var points = [];
	var poly = this.getPolyline();
	for (var i = 0; i < poly.getVertexCount(); i++) {
		points[i] = poly.getVertex(i);
	}

	var p = new GPolyline(points, this.color, 5, 0.5);
	zoomAndMove(p.getBounds());
	map.addOverlay(p);

}

Diese Funktion versteckt nun die originale Polyline unseres GDirections-Objekts und erzeugt stattdessen eine eigene, der wir nun ein beliebiges Aussehen verpassen können.
Danach wird die Karte mittels der Funktion „zoomAndMove“ noch auf die richtige Ansicht gebracht.

function zoomAndMove(b){

	var clat = (b.getNorthEast().lat() + b.getSouthWest().lat()) /2;
	var clng = (b.getNorthEast().lng() + b.getSouthWest().lng()) /2;
	map.setCenter(new GLatLng(clat,clng),map.getBoundsZoomLevel(b));

}

Das wars auch schon. Eigentlich gar nicht so kompliziert.

object doesn’t support this property or method

Hi,

bin grad mal wieder über ein total dämliches Problem mit dem Internet Explorer gestolpert.

element = document.getElementById('element');

Das wird einen Fehler werfen, sobald ihr auf element zugreifen wollt.
Warum? Tja, eigentl eine gute Frage. Die Antwort ist umso schockierender.

Der Internet Explorer scheint sich intern für jedes Element mit einer eindeutigen ID bereits eine Variable zu reservieren. Ergo, der Versuch diese zu überschreiben schlägt fehl und somit auch alle späteren Versuche darauf zuzugreifen.

Abhilfe schafft hier einfach das Wählen eines anderen Variablennamens.

Firefox Erweiterung – Timestamps in phpMyAdmin umwandeln

Hallo allerseits,

heute habe ich etwas ganz besonderes. Meine erste Firefox-Erweiterung, die ich veröffentliche.
Ich habe zwar in der Vergangenheit schon die eine oder andere geschrieben, aber eher für meinen persönlichen Gebrauch.

Was macht die Erweiterung?

  • Blendet bei allen phpMyAdmin-Installationen links oben eine kleine Box ein, die es ermöglicht schnell UNIX-Timestamps in ein lesbares Format umzuwandeln und umgekehrt
  • Erkennt mögliche Timestamps auf der Seite und hebt diese farblich hervor
  • Bei einem Klick auf einen erkannten Timestamp wird dieser in der Box im lesbaren Format angezeigt
  • Wenn man die Maus über einen erkannten Timestamp bewegt wird das lesbare Format sofort im Titel angezeigt

Wer braucht diese Erweiterung?
Ich. Und evtl. ja noch jemand… ;)

Hier ein kleiner Screenshot, wie das ganze aussieht:

pmatimestamp.png

Download

Hier gibts pmaTimestamp zum Download.

Diese Erweiterung ist unter der GPL veröffentlich.

Feedback
Über Feedback würde ich mich sehr freuen. Ihr habt bestimmt noch die ein oder andere Idee, wie man das Teil noch verbessern kann.

Google Maps und der Internet Explorer

Guten Abend,

Gerade hatte ich ein kleines Problem beim Zusammenspiel von Google Maps und dem Internet Explorer.
Beim Aufruf meiner Seite, in die ich eine Karte eingebunden habe, flog mir folgende Fehlermeldung um die Ohren:

Die Seite „blabla“ enthält Fehler. Der Vorgang wurde abgebrochen

Des Rätels Lösung ist eigentlich ganz einfach.
Ich hatte meinen JavaScript-Code, der die API von Google Maps ansteuert direkt im HTML-Code stehen.
Das mag der IE anscheinend nicht.

Lösung:

Die JavaScript Anweisungen in eine Funktion packen, hier „googleStuff()“ und dann den body-Tag ergänzen:

<body onload="googleStuff()" onunload="GUnload()">
</body>

So klappts bei mir wunderbar!