Montag, 24. September 2007

Lückenbüßervideo III

Da der nächste Teil der Google Map Hacks doch was umfangreicher wird. Gibt es noch ein Lückenbüßer Video. Diesmal möchte ich eine meiner aktuellen musikalischen Neuentdeckungen vorstellen. die Britische Funk, Hip Hop, Alternative Rock, Cheer Leader Band The Go! Team. Es bleibt aber in Tradition meiner Lückenbüßervideos sowohl Tanzbar sowie Tanzsehbar. Gute Laune Party Musik für Menschen mit Swing im Arsch:

Google Map Hacks III

Nach den ersten Grundlagen in den Teilen I.und II. geht es nun in die dritte Runde der Google Map Hacks. Thema sind dieses mal die Möglichkeiten rund um die Marker.

Bevor es zum eigentlichen Thema kommt. Es hat sich ein Problem mit der Kartendarstellung in einem Blog ergeben. Sobald sich auf der Dargestellten Webseite nicht die Division für die in der load() Funktion definierten Karten finden lässt, wird die Funktion abgebrochen und keine weiteren folgenden Kartendefinitionen ausgeführt. Auf die Schnelle ist mir noch keine Lösung eingefallen. Ich arbeite aber daran. Der mehr schlechte als rechte Workaround ist jetzt erst einmal auf die älteren zwei Karten im Block zu verzichten.

Die erste Möglichkeit Marker zu platzieren ist, die im Teil II gezeigte direke Erzeugung der Marker im Javascript. Daneben gibt es auch die Möglichkeiten die Markerinformationen per lokaler oder verlinkter Datei zu importieren. Als Dateiformat sind beispielsweise XML oder der Google eigenen KML möglich. Diese Dateien können natürlich auch dynamisch etwa mit PHP oder Perl Skripten erzeugt werden.

Ein wichtiges Feature der zur Informationsvermittlung mit den Markern sind die Infofenster. Sie können mit html/css gestaltet werden und neben Text auch Bilder und Videomedien enthalten. Die Infofenster können als einfaches Fenster aber auch als Tabbare Fenster gestaltet werden. Zur Verfendung der Infofenster wird ein Eventhandler benötigt hört sich kompliziet an - ist es aber auf Grundlage der zurückliegenden Tutorials nicht.


function load() {
if (GBrowserIsCompatible()) {

var map3 = new GMap2(document.getElementById("map3"));
map3.addControl(new GSmallMapControl());
map3.addControl(new GMapTypeControl());
map3.setCenter(new GLatLng(48.2086,16.3619), 14);

marker = new GMarker(new GLatLng(48.2086,16.3719));

GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml('Hallo Welt!');
});

map3.addOverlay(marker);
}
}


Im wesentlichen ist jetzt nur der Eventhanlder GEvent.addListener() dazugekommen. Das erste Argument marker verweißt auf das Objekt, daß der Eventhandler beobachtet, das zweite Argument 'click' auf welche Aktion er reagieren soll - in diesem Fall einen Mausklick und als letztes Argument wird ihm eine Funktion auf den Weg gegeben, die er im Falle der Aktion ausführen soll.

Der Google Evenhandler kennt außer click Aktionen wie dblclick, move und einige mehr. Mir ist leider bisher noch keine vollständige Zusammenstllung der möglichen Ereigenisse bekannt.

Die Funktion für den Event öffnet in diesem Fall eine Inforamtionsgfenster, dessen Argument ein Html-Text ist. In dieser Text kann auch Links, Bilder oder etwas youtube Videoobjekte enthalten. Die Funktion kann natürlich auch außerhalb des GEvent-Aufrufes implementiert werden. So könnte man zB in einem Reiseblog die mehr oder weniger wichtigen touristischen Highlight präsentieren. Der setzt einen Marker am Ort des Wiener Stephansdom und beinhlatet ein Infofenster mit Bild des Domes sowie ein Link auf seinen Wikipediaartikel:


var map3 = new GMap2(document.getElementById("map3"));
map3.addControl(new GSmallMapControl());
map3.addControl(new GMapTypeControl());
map3.setCenter(new GLatLng(48.2086,16.3719), 14);
marker = new GMarker(map3.getCenter());

var infotext = "Der Wiener <a href=\"http://de.wikipedia.org/wiki/Stephansdom_(Wien)\" "+
"title=\"Wiener Stephansdom\">Stephansdom</a> überragt<br /> die Wiener Altstadt:<br /> "+
"<img src=\"BILDQUELLE\"alt=\"Wiener Stephansdom\" height=\"200\" />
<br style=\"clear: both\" />";

GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(infotext);
});

map3.addOverlay(marker);


Nebem der einfachen Infobox ist auch eine Infobox mit verschiedenen Reitern (getabbed oder wie auch immer das azf Denglisch heißt) möglich:
tabmarker = new GMarker(new GLatLng(48.21083,16.35694));
var tab1="Wiener Rathaus";
var tab2="moch mehr Infos";
var infotabs = [
new GInfoWindowTab("Tab 1",tab1),
new GInfoWindowTab("Nummer 2",tab2)
];
GEvent.addListener(tabmarker,'click', function() {
tabmarker.openInfoWindowTabsHtml(infotabs);
});
map3.addOverlay(tabmarker);


Die verschiedenen Infoboxseiten werden in einem Vektor (Array) als GInfoWindowTab abgelegt. Das GInfoWindowTab-Objekt erhält als erstes Argument den Namen des Reiters und als zweites den Informationstext, der wieder auch Html-Code zulässt. Im Eventhandler besteht der einzige Unterschied, daß die openInfoWindowHtml Methode durch die openInfoWindowTabsHtml Methode ersetzt wird, das als Argument das Infotabs Array mit auf den Weg bekommt. Beide verschiedenen Infoboxen sind auf folgender Karte zu sehen. Die Infoboxen öffnen sich durch einen Mausklick auf die jeweiligen Marker:



Im nächsten Teil wird gezeigt, wie Adressdaten in geographische Koordinaten umgewandelt werden. Eventuel ist mir bis dahin auch schon eine Lösung für mehrere Karten eingefallen. Um die Problematik noch einmal zu erläutern: Es ist kein Problem mehrere Karten auf einer Seite darzustellen. Falls aber etwas eine in der load()-Funktion implementierte Karte nicht auf der dargestellten Seite zu finden ist, bricht das Javascript Programm ab.

Montag, 17. September 2007

Lückenbüßervideo II

Leider hab ich keine Zeit, es gäb ja soviwel zu schreiben über den Papst in Wien, kreationistische Bildungsminister und natürlich über weitere Google Späße. Kommt demnächst dann auch alles wieder. Für die Wartezeit eine kleine Riot-grrrl Einlage aus meiner Musikgeschmacktruhe und ein zweiter Tanzlehrgang für Euch. Die Seite wird noch richtig sportlich ... I proudly present - le tigre

Dienstag, 11. September 2007

Ich und Mehmet Scholl

Was haben wohl Mehmet Scholl und ich gemeinsam? Also die Sportskanone war ich sicherlich nie. Ich bin auch nicht mit Spiegel Comic Zeichner Jamiri verwandt. Zumindest haben wir beide eine zeittlang in München gewohnt. Aber darauf will ich gar nicht heraus.

Mehmet Scholl und ich haben zur zeit die gleiche Lieblingsband - die kanadische Band Hidden Cameras. Hobby DJ Scholl würde mich mit seinem in einem FAZ Interview offenbarten Musikgeschmack auch nicht so schnell von einer Party verjagen. So verdient Mehmet Scholl wohl das Prädikat des Deutschen Proifußballers mit dem besten Musikgeschmack, der sich sympathischerweise auch mal für deutsche Stadionmusik ordentlich schämt.


Aber zurück zu den Cameras. Die Hidden Cameras sind natürlich nicht nur erwähnenswert, da sie zur Zeit meine und Mehmets Lieblingsgruppe sind. Nein. Scholl hat sie auch noch zu seinem Abschiedsspiel gegen Barcelona in das Münchner Fußballheiligtum geholt. Das hört sich erst einmal unspektakulär an - ist es aber nicht. Zumindest nicht für die Portion Bayernvorurteile die man so als Restdeutscher in der Sporttasche hat. Die Hidden Cameras spielen nämlich nicht nur sau gut - die Band hat nämlich auch eindeutig homosexuelle Agenda - um den konservativen Kampfbegriff zu nennen. Das Band Kollektiv bezeichnet ihre Musik selber als Gay Church Folk Musik und spielt mit verschiedenen Besetzungen. Live gehören mehr oder weniger bekleidete Go-Go Tänzer zum Pflichtprogram. So ganz kompatibel mit der bayrischen Agenda dürfte die Band mit ihren Themen vom Heiratsban bis hin zu Natursektspielen auch nicht sein. Und wenn jetzt alles funktioniert hat, kann man sich sogar den Titel High Upon the Church Grounds anhören und ich kann mich beim nächsten Musikartikel mehr um einen vernünftigen Text bemühen: