space picture
That's me, folks

Werbung

Test und Preisvergleich
Preisvergleich und Testberichte zu Notebooks, Handys Digitalkameras
sowie MP3 Player.



Kredit online finden - durch Vergleich! CLH Webartikel sind online - cherche la Catalogue Regional pour la france -unser Klassiker prolinks online Ferienhäuser buchen für den Urlaub Ferienhaus nächsten Sommer

Kostenloser Pressedienst
Plastikkarten
Telefonbuch

space picture space picture

Daily Link Icon 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:

A picture named tut3_3.jpg

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&ouml;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:

A picture named tut3_1.jpg

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:

A picture named tut3_2.jpg

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. Grins)

Technorati-Tags:

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]

Technorati-Tags:

Posted by Jörg Kantel | Permalink | |

Let's Twist Again

Book Cover Twisted 2.5.0 released, »now with epoll, asynchronous messaging, better Jabber and Python 2.5 support.« [Anarchaia]

Technorati-Tags:

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:

Posted by Jörg Kantel | Permalink | | |

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]

Technorati-Tags:

Posted by Jörg Kantel | Permalink | | |

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«:

Neuköllner Grundversorgung, Photo: Gabriele Kantel

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:

Posted by Jörg Kantel | Permalink | | |

Sozialreform oder Revolution?

Rosa Luxemburg 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:

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...

Frust!

Technorati-Tags:

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:

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:

Posted by Jörg Kantel | Permalink | |

Und noch ein »Haben wollen!«

Book Cover 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 (Icon Icon Icon) 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 (PDF Icon, 1,8 MB). Damit Ihr die Katze nicht im Sack kaufen müßt.

Technorati-Tags:

Posted by Jörg Kantel | Permalink | | |

Barrierefreies Webdesign

Book Cover 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:

Posted by Jörg Kantel | Permalink | | | Webworking

Wie lange noch ...?

Der Flughafen Tempelhof wird 2007 2008 2009 2010 2011 ... geschlossen (Zutreffendes bitte ankreuzen).

Landeanflug an der Oderstraße, Photo: Gabriele Kantel

Landeanflug an der Oderstraße. [Photo: Gabriele Kantel]

Der Flughafen Tempelhof ist auch der heutige »Google des Tages«.

Smile Teeth

Posted by Jörg Kantel | Permalink | |

space picture space picture space picture space picture

Werbung
Monatskalender
Januar 2007
So
Mo
Di
Mi
Do
Fr
Sa
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
Interne Links
Archiv
Kategorien