 Montag, den 15. Januar 2007 |
Google-Maps: Marker und Fenster
Es wird Zeit, daß ich mein kleines Tutorial über die Google Maps API fortsetze, schließlich hat schon jemand in meinen Kommentaren danach gefragt: Wie kommen die »Bömmel« in die Karte?
Die »Bömmel« heißen im Google-Jargon »Marker« und das Einbinden ist eigentlich ganz einfach. Wir wollen aber auch noch zeigen, wie man es anstellt, daß sich beim Klick auf einen der Marker ein Fenster öffnet und wir werden außerdem zeigen, daß sich so ziemlich jeder Multimedia-Inhalt — sofern er im Netz verfügbar ist — in diesen Fenstern darstellen läßt:
Einen Marker bindet man mit folgenden drei Zeilen Code in eine Google Maps ein:
var point1 = new GPoint(13.43907737074769,
52.4905041220139);
var beck = new GMarker(point1);
map.addOverlay(beck);
Diese drei Zeilen werden einfach an das Ende des JavaScripts des zweiten Tutorials angehängt, außerdem habe ich den Mittelpunkt der Karte in das Zentrum des Görlitzer Parks gelegt (die Koordinaten habe ich mir händisch aus Google Earth besorgt):
map.setCenter(new GLatLng(52.4965283851647,
13.4378287541526), 13, G_HYBRID_MAP);
Um dann aber auch noch ein Info-Window aufgehen zu lassen, müssen wir noch einen Eventlistener hinzufügen (GEvent.addListener()), der den Klick auf den Marker abfängt und diesen an die Funktion openInfoWindowHtml() binden. Der Code für den ersten Marker (der unterste in der Karte) sieht dann also so aus:
var point1 = new GPoint(13.43907737074769,
52.4905041220139);
var html1 = "<h5>Drei-Bezirks-Eck</h5>
<p>Hier stoßen Kreuzberg, Treptow und
Neukölln zusammen.</p>"
var beck = new GMarker(point1);
GEvent.addListener(beck, "click", function()
{beck.openInfoWindowHtml(html1)});
map.addOverlay(beck);
Wie wir sehen, beherrscht das Info-Fenster HTML. Sogar die Stylesheets der Seite werden mit angewandt, bei mir hat ein <h5> eine ockerfarbige Unterstreichung und die wird auch in dem Info-Fenster angezeigt:
Und OK, mein wunderbares Webwerkzeug setzt die Umlaute auch in Scripten automatisch in Entities um, wenn Ihr also in den folgenden Code-Beispielen Umlaute seht, denkt daran, daß Ihr sie unter Umständen noch in HTML-Entities umwandeln müßt. Und außerdem habe ich den Code zwecks Lesbarkeit an einigen Stellen wüst umgebrochen, im Zweifelsfalle schaut daher einfach in den Quellcode dieser Webseite.
Und wenn so ein Fenster — wie der Name schon sagt — ein HTML-Fenster ist, dann müßten doch auch Bilder gehen, oder? Auch wenn sie zum Beispiel direkt aus flickr importiert werden:
var point2 = new GPoint(13.4507877505395,
52.49732892528733);
var html2 = "<h5>Der Freischwimmer</h5><p>
<a href='http://www.flickr.com/photos/schockwellenreiter/
280108093/' title='Klickr Flickr'><img
src='http://farm1.static.flickr.com/
105/280108093_44ceefe246_t.jpg'
width='100' height='75' border='0' align='left'
hspace='8' vspace='4'
alt='Der »Freischwimmer« am Lohmühlengraben' />
</a> Kreuzbergs beliebter<br /> schwimmender Biergarten
<br />direkt am Lohmühlengraben.</p>"
var freischwimmer = new GMarker(point2);
GEvent.addListener(freischwimmer, "click", function()
{freischwimmer.openInfoWindowHtml(html2)});
map.addOverlay(freischwimmer);
Das einzige, was sich gegenüber dem ersten Marker geändert hat, ist der ellenlange HTML-Code für das Einbinden des Photos, hierbei ist zu beachten, daß die Attribute entweder nur durch einfache Hochkommata geklammert sind oder daß die doppelten Hochkommata ausmaskiert werden. Dann funktioniert es:
Der HTML-Code für das Fenster enthält ein paar Linebreaks, da sich die Browser bezüglich des Umbruchs irgendwie unterschiedlich verhalten. Alternativ könnte man vermutlich auch ein Stylesheet mit Breite und Höhe einsetzen, das habe ich aber (noch) nicht ausprobiert.
Und auch der Backlink hinter dem Bild zu flickr funktioniert. Probiert es aus...
Und jetzt werden wir ganz mutig und probieren es auch mit einem Filmchen. Sevenload bietet von Hause aus an, Filme in unterschiedlichen Größen einzubinden, also holen wir uns den HTML-Code für eine 200 Pixel breite Fassung von dort und binden ihn in unsere Seite ein:
var point3 = new GPoint(13.44458286586912,
52.50095929814412);
var html3 = "<h5>An der Oberbaumbrücke</h5>
<p><object width='200' height='178'><param name='movie'
value='http://de.sevenload.com/pl/sj3b0xi/200x178/swf' />
<embed src='http://de.sevenload.com/pl/sj3b0xi/200x178/swf'
type='application/x-shockwave-flash'
width='200' height='178'></embed></object></p>
<p>Die U-Bahn fährt hier als Hochbahn.</p>"
var oberbaum = new GMarker(point3);
GEvent.addListener(oberbaum, "click", function()
{oberbaum.openInfoWindowHtml(html3)});
map.addOverlay(oberbaum);
Und siehe da, es funktioniert...
Unschön ist allerdings, daß Google Maps das Fenster, da es zu groß ist, oberhalb seiner eigenen Umgebung aufbaut und erst dann die Lage der Karte korrigiert. Der Safari erneuert die darunterliegenden Teile nicht (der Firefox wohl), daher gibt es dort weiße Flecken, wo eigentlich Text stehen müßte. Aber wenn man den Text dann einmal mit der Maus markiert hat, ist er auch wieder da...
Ich hoffe, ich habe Euch mit diesem kleinen Tutorial zu neuen Experimenten angeregt...
(Da ich seinerzeit leider meinen GoogleMaps-API-Key etwas ungeschickt gewählt habe, funktioniert die Karte leider nur in diesem Verzeichnis. Ich sollte mir einen neuen API-Key besorgen. 
)
Technorati-Tags: Google GoogleMaps Tutorial
Posted by Jörg Kantel | Permalink | | | Mapping
Google Mail im Filesystem
FUSE für MacOS X: Google hat das von Linux stammende File System in Userspace, kurz FUSE, auf MacOS X portiert. Nutzer können damit über spezielle Module Dateisysteme einbinden, die der MacOS-X-Kernel an sich nicht unterstützt. Module existieren beispielsweise für den Zugriff auf NTFS-Datenträger, aber auch Google-Mail-Konten lassen sich so direkt in das Dateisystem einbinden. [Golem.de]
Posted by Jörg Kantel | Permalink | |
Let's Twist Again
Twisted 2.5.0 released, »now with epoll, asynchronous messaging, better Jabber and Python 2.5 support.« [Anarchaia]
Technorati-Tags: Python Twisted
Posted by Jörg Kantel | Permalink | | | Webworking
Operation Mikado: Generalverdacht gegen alle Kreditkartenbesitzer
Ein Gespräch mit dem Anwalt Udo Vetter, der einen Antrag auf richterliche Entscheidung der massenhaften Kreditkartenprüfung im Rahmen der Suche nach Kunden einer Website mit kinderpornographischem Material gestellt hat. [Telepolis News]
Technorati-Tags: Privacy Datenschutz
Posted by Jörg Kantel | Permalink | | | Privacy
Trockenlegung des Phrasensumpfes
Blogging lange vor dem Zeitalter des Web - das war Die Fackel von Karl Kraus, deren 37 Jahrgänge jetzt online zugänglich sind (wir berichteten). [Telepolis News]
Posted by Jörg Kantel | Permalink | | | Medien
Auf dem Weg in die Barbarei
Alle Appelle waren vergebens: Im Morgengrauen sind im Irak Saddam Husseins Halbbruder Barsan al-Tikriti und der frühere Richter Awad al-Bandar gehängt worden. Das Weiße Haus begrüßte die Exekutionen. [Spiegel Online]
Posted by Jörg Kantel | Permalink | |
Feinkost, Süßwaren, Flaschenbier
Aus unserer beliebten Reihe »Angesagte Neuköllner Locations«:
Heute: Neuköllner Grundversorgung. [Photo: Gabi]
Posted by Jörg Kantel | Permalink | |
Turn Your Radio On
Freie Software für Radios; Campcaster ist eine freie Software für den Betrieb von Radio-Stationen auf einem Computer. Aber bitte keinen weiteren Dudelfunk-Sender. Davon haben wir schon mehr als genug. netzpolitik.org]
Technorati-Tags: Radio
Posted by Jörg Kantel | Permalink | | | Medien
Sozialreform oder Revolution?
Wer das sozialistische Ziel aufgibt, beseitigt auch die Lebensbedingung der bürgerlichen Demokratie, meinte Rosa Luxemburg 1898: »Der Ausweg aus diesem Kreise ist ein sehr einfacher: Aus der Tatsache, daß der bürgerliche Liberalismus vor Schreck vor der aufstrebenden Arbeiterbewegung und ihren Endzielen seine Seele ausgehaucht hat, folgt nur, daß die sozialistische Arbeiterbewegung eben heute die einzige Stütze der Demokratie ist und sein kann und daß nicht die Schicksale der sozialistischen Bewegung an die bürgerliche Demokratie, sondern umgekehrt die Schicksale der demokratischen Entwicklung an die sozialistische Bewegung gebunden sind; daß die Demokratie nicht in dem Maße lebensfähig wird, wie die Arbeiterklasse ihren Emanzipationskampf aufgibt, sondern umgekehrt in dem Maße, wie die sozialistische Bewegung stark genug wird, gegen die reaktionären Folgen der Weltpolitik und der bürgerlichen Fahnenflucht anzukämpfen; daß, wer die Stärkung der Demokratie wünscht, auch Stärkung und nicht Schwächung der sozialistischen Bewegung wünschen muß und daß mit dem Aufgeben der sozialistischen Bestrebungen ebenso die Arbeiterbewegung wie die Demokratie aufgegeben wird.« [Junge Welt]
Auszug aus: Rosa Luxemburg, Sozialreform oder Revoution? In: Rosa Luxemburg, Band 1 1893 bis 1905 Erster Halbband, Dietz Verlag Berlin 1970, Seite 425 bis 428
Technorati-Tags: Kapitalismuskritik
Posted by Jörg Kantel | Permalink | |
Manche Montage lohnen das Aufstehen nicht
Und um den frühen Ärger komplett zu machen, sind auch noch der Server meines Werbeparnters Bannervista seit gestern abgeraucht, so daß sich das Laden des Schockwellenreiters verzögert. Ich entschuldige mich bei allen meinen Lesern für diese Unannehmlichkeit und hoffe, daß sie bei Bannervista bald aufwachen...
Technorati-Tags: Bannervista
Posted by Jörg Kantel | Permalink | |
Numerologie
Wie ich es befürchtet hatte macht die Umstellung auf 13-stellige ISBN-Nummern Probleme bei den Amazon-Partner Links. Mein bisheriges Skriptchen, das einfach eine ISBN in eine ASIN umwandelte, funktioniert nicht mehr. Das einfache Streichen der ersten drei Ziffern (»978«) reicht nämlich nicht: Das unten besprochene Buch zum Beispiel hat laut der Webseite des Verlags die ISBN »978-3-89721-458-3«, die ASIN ist aber »389721458X«.
Das Auffinden der ASINs wird dadurch entweder reichlich kompliziert oder ziemlich umständlich. Amazon selber hat dazu eine halbe Doktorarbeit geschrieben. Ich finde so etwas ärgerlich, weil — wie auch schon bei den Postleitzahlen — vor lauter Maschinenlesbarkeit der Mensch völlig außen vor gelassen wird.
Technorati-Tags: Amazon ASIN ISBN
Posted by Jörg Kantel | Permalink | |
Keine Handbreit den Faschisten...
weder im RL noch im Virtuellen: Demo gegen Le Pen in »Second Life«: Im Online-Spiel Second Life haben einige Spieler mit Plakaten vor der virtuellen Niederlassung der rechtsextremen französischen Partei Front National und gegen deren Parteichef Jean-Marie Le Pen demonstriert. [futurezone.ORF.at]
Technorati-Tags: SecondLife
Posted by Jörg Kantel | Permalink | |
Und noch ein »Haben wollen!«
Weblogs, Podcasting & Online-Journalismus von Moritz »mo.« Sauer: »Im Web brodelt es: Noch nie war es so einfach, Texte, Audiobeiträge, Bilder und Musik zu produzieren und übers Web unter die Leute zu bringen. Immer mehr Blogger und Podcaster melden sich zu Wort, so daß das Schlagwort vom Citizen Journalism (
) inzwischen die Runde macht.«
Der Autor »erklärt in diesem Buch, wie man Weblogs mit dem Open Source-CMS WordPress aufsetzt und so gestaltet, daß sie ansprechend und leicht im Web zu finden sind. Anschließend beschäftigt er sich mit der Produktion von Podcasts und bespricht, worauf man bei der Erstellung und Verbreitung der Audio-Files besonders achten sollte. Hilfreiche journalistische Tipps und Techniken erleichtern es Ihnen, Ihren Beiträgen den letzten Schliff zu verleihen.« Juristische Tips von Laura Dierking runden das Buch ab.
Und wie (fast) immer gibt es bei O'Reilly ein Probekapitel: Bloggen mit WordPress (
, 1,8 MB). Damit Ihr die Katze nicht im Sack kaufen müßt.
Technorati-Tags: Podcast WordPress Bloggen
Posted by Jörg Kantel | Permalink | | | Medien
Barrierefreies Webdesign
Stefan Münz und Tiffany Wyatt haben ein Buch darüber geschrieben, das im März erscheinen soll. Der Klappentext klingt überzeugend: »Barrierefreies Webdesign heißt, Webseiten so zu gestalten, daß jeder sie nutzen kann. Um diese schlicht klingende Forderung zu erfüllen, ist eine ganze Menge Wissen nötig. Denn die allgemein üblichen Techniken der Webseitengestaltung können an vielen Stellen Zugangshindernisse bilden; nicht nur für Menschen, die an körperlichen Einschränkungen leiden. [...] Dieses Buch beantwortet nicht nur die grundlegenden Fragen, sondern gibt auch ganz konkrete Anleitung zur Umsetzung in (X)HTML, CSS, JavaScript und AJAX.« Klingt doch nach einem »Haben wollen!«, oder? [Galileo Press]
Technorati-Tags: Accessibility
Posted by Jörg Kantel | Permalink | | | Webworking
Wie lange noch ...?
Landeanflug an der Oderstraße. [Photo: Gabriele Kantel]
Der Flughafen Tempelhof ist auch der heutige »Google des Tages«.
Posted by Jörg Kantel | Permalink | |
Bücher kaufen
