Kategorien
Inspiration Tutorials

PDF-Rechnung mit PHP erzeugen

Wir setzen den Artikel PDF-Dokumente mit PHP erzeugen fort und erstellen die Grundlage einer Rechnung im PDF-Format direkt auf dem Server. Zur Anwendung kommen dabei zwei PHP-Klassen.

Hier geht es um die technische Realisierung der PDF-Erzeugung. Der Rechnungsinhalt ist erst einmal unwichtig und kann später angepasst werden. Auf dem Webserver muss PHP5 verfügbar sein. Falls PHP5 nicht verfügbar ist, lesen Sie bitte den oben genannten Beitrag. Dort wird unter anderem gezeigt, wie man PHP5 umgehen kann.

Folgende Verzeichnisstruktur sollten Sie vorliegen haben:

  • Legen Sie nun eine Datei rechnung.php im Projektverzeichnis an und kopieren den Inhalt folgender Datei dort hinein. rechnung.php kopieren
  • Legen Sie danach eine Datei TwPdfRechnung.php im Verzeichnis twpdf an und kopieren den Inhalt folgender Datei dort hinein. TwPdfRechnung.php kopieren
  • Öffnen Sie die soeben erstellte Datei rechnung.php in Ihrem Browser. Dieser sollte dann schon die generierte PDF-Datei anzeigen (wie in dieser Demo).

Beschreibung der Datei ‚rechnung.php‘

Zuerst wird die FPDF-Klasse und die Klasse TwPdfRechnung eingebunden.

// FPDF-Zeugs und die spezielle TwPdf-Klasse includen
define("FPDF_FONTPATH","fpdf16/font/");
include_once('fpdf16/fpdf.php');
include_once("twpdf/TwPdfRechnung.php");

Danach schreiben wir alles in Variablen, was später auf der Rechnung auftauchen soll. Dies könnten Sie natürlich auch alles in einem Formular abfragen, hier wird dies jedoch fest in den Code geschrieben, um die Komplexität dieses Artikels nicht unnötigerweise aufzublähen.

Wichtig ist dann noch, diese Variablen in eine PHP-Session zu schreiben

// alles in die Session rein
$_SESSION['twArrRechnungsdaten']      = $arrDat;
$_SESSION['twArrRechnungspositionen'] = $arrPos;

und die Klasse TwPdfRechnung aufzurufen.

// pdf erzeugen
$twpdf = new TwPdfRechnung(); 

// pdf ausgeben (im Browser oder in Datei schreiben)
$twpdf->Output();   // Ausgabe (wenn in Datei schreiben, dateiname in Klammer)

Wenn man bei Output() einen Dateiname mit angibt (beispielsweise: Output(„meinedatei.pdf“);), dann wird das erzeugte PDF in eine Datei mit dem angegebenen Name geschrieben. Wir möchten jedoch die PDF-Datei nur im Browser anzeigen und schreiben deshalb Output();.

Wichtig in diesem Zusammenhang ist noch, dass in dieser Datei VOR dem öffnenden <?php und NACH dem schließenden ?> kein einziges Zeichen mehr steht, auch kein Leerzeichen, Zeilenumbruch oder Sonstiges.

Beschreibung der Datei ‚TwPdfRechnung.php‘

Der Code dieser Datei sieht auf dem ersten Blick für Sie eventuell erst einmal sehr kompliziert aus. Aber das ist wie mit jeder neuen Sache, hat man es erstmal begriffen, dann ist es auf einmal ganz einfach.

Also lassen Sie sich bitte nicht von dem vielen Code abschrecken, ein Großteil davon ist jetzt erstmal gar nicht so wichtig. Ganz grob gesagt, sind für Sie zu Beginn diese 4 Funktionen interessant:

__construct()
wird beim Erzeugen eines Objektes dieser Klasse automatisch aufgerufen, lädt die PHP-Session-Variablen, erledigt alle für die PDF-Erzeugung relevanten Dinge
Header()
erstellt die Kopfzeile, wird automatisch aufgerufen, in unserem Falle wird hier auch gleich das Layout der gesamten Seite festgelegt
Footer()
erstellt die Fußzeile, wird automatisch aufgerufen
twShowRechnungspositionen()
stellt die einzelnen Positionen der Rechnung in einer Art Tabelle dar, muss extra aufgerufen werden

Nun diese Datei nochmal im Einzelnen. Am Anfang werden wieder die für diese Klasse relevanten Variablen (-Arrays) deklariert.

  // Variablen und Arrays
  private $twArrRechnungsdaten      = array();
  private $twArrRechnungspositionen = array();
  private $twArrSpaltenbreiten      = array();
  private $twArrSpaltenkoepfe       = array();

die Funktion __construct()

Das Seitenformat, die Maßeinheit und die Seitengröße festlegen.

    // Konstruktor der vererbenden Klasse (FPDF) aufrufen
    parent::__construct('P', 'mm', 'A4'); // L=Querformat(Landscape), P=Hochformat(Portrait)

Unsere in der Datei rechnung.php festgelegten Inhalte der Rechnung aus der PHP-Session laden.

    // Session-Variablen aus dem aufrufenden Skript übernehmen
    $this->twArrRechnungsdaten      = $_SESSION['twArrRechnungsdaten'];
    $this->twArrRechnungspositionen = $_SESSION['twArrRechnungspositionen'];

Noch ein paar grundlegende Anweisungen, wie groß die Seite im Browser angezeigt werden soll, wann ein Seitenumbruch erfolgen soll und (nicht so wichtig) die Gesamtanzahl der Seiten ermitteln.

    // Einstellungen für das PDF
    $this->SetDisplayMode( 100 );         // wie groß wird Seite angezeigt(in %)
    $this->SetAutoPageBreak(true, 50);    // 50mm von unten erfolgt ein Seitenumbruch
    $this->AliasNbPages();                // Anzahl der Seiten berechnen ({nb}-sache)

Die eigentliche Erzeugung des PDF

    // Seite erzeugen
    $this->AddPage();                     // PDF starten (ruft auch Header() und Footer() auf

Und noch zwei Dinge, speziell für unsere PDF-Rechnung. Aufruf unserer Funktion zur Erstellung der Tabelle mit den Rechnungspositionen und einer speziellen Funktion, die unsere Zahlungsbedingungen und den Gesamtbetrag der Rechnung bei mehrseitigen Rechnungen nur auf der letzten Seite anzeigt.

    // zusätzliche Sachen
    $this->twShowRechnungspositionen();   // Tabelle mit allen Rechnungspositionen
    $this->twShowLetzteSeite();           // nur auf der letzten Seite

die Funktion Header()

Hier geht es nun endlich an das eigentliche „Designen“ der Rechnung. Um die einzelnen Anweisungen besser zu verstehen, können sie die Beschreibungen in der offiziellen FPDF-Dokumentation nachlesen. Dort wird in kurzen, verständlichen Sätzen erklärt, worum es bei jeder Anweisung geht. Die Doku kann von dort auch (natürlich als PDF-Datei) heruntergeladen werden.

Die Funktion Header() ist grob in drei Bereiche unterteilt (gilt für mehrseitige Rechnungen):

  • Bereiche, die auf jeder Seite angezeigt werden
  • Bereiche, die nur auf der ersten Seite angezeigt werden
  • Bereiche, die auf allen Seiten, außer auf der Ersten angezeigt werden

Meist kommen in dieser Funktion immer wieder dieselben Anweisungen vor. Das ist das Wesen von FPDF, von oben herunter jedes einzelne Element immer wieder neu erstellen. Der Quellcode in dieser Funktion ist einigermaßen kommentiert, sodass sich vielleicht einige Dinge von selbst erklären. Die wichtigsten Anweisungen sind:

  • SetFont legt die Schriftart fest
  • SetTextColor legt die Textfarbe fest
  • SetFillColor legt die Füllfarbe fest (Hintergrund)
  • SetDrawColor legt die Rahmenfarbe fest
  • SetLineWidth legt die Rahmenstärke fest
  • twRundeckbereich legt die Rundung der Boxen fest (eigene Funktion)
  • SetXY legt Position fest (meist die Startposition einer folgenden Anweisung)
  • Cell zeichnet eine Art Zelle, meist mit enthaltenem Text (mit oder ohne Rahmen und Hintergrund)
  • Image fügt ein Bild ein

Als Bild bietet sich ein Logo an. Speichern Sie das Bild im Verzeichnis ‚twPdf‘ oder passen Sie im Quellcode den Pfad zu Ihrem Logo an.

die Funktion Footer()

Für diese Funktion gilt PDF-mäßig dasselbe wie für die vorherige Header(), nur dass hier halt die Fußzeile erstellt wird.

die Funktion twShowRechnungspositionen()

Das ist die etwas komplizierte Funktion. Sie ist nicht direkt bei FPDF enthalten, sondern selbst programmiert. Hier wird eine Art Tabelle für die einzelnen Rechnungspositionen erzeugt.

Wir geben zuerst die Spaltenbreiten (in mm) und die Beschriftungen der Spaltenköpfe an.

    // Spaltenbreiten und Beschriftung der Spaltenköpfe festlegen
    $this->twSetSpaltenbreiten(array(8, 99, 14, 20, 20));
    $this->twSetSpaltenkoepfe(array('Pos', 'Text', 'Menge', 'Preis', 'Gesamt'));

Nach ein paar Formatanweisungen erzeugt folgender Code die Spaltenköpfe.

    for ($i=0; $i<count($this->twArrSpaltenkoepfe); $i++) {
      $this->Cell($this->twArrSpaltenbreiten[$i], 7, $this->twArrSpaltenkoepfe[$i], 1, 0, 'C', 1);
    }
    $this->ln();

Die einzelnen Zeilen für die Rechnungspositionen werden folgendermaßen erstellt. Die darin für jede Zeile aufgerufene Funktion twShowZeileMitMultiCell ist wieder eine selbst programmierte Funktion.

    foreach ($this->twArrRechnungspositionen as $pos) {
      $i++;
      $this->twShowZeileMitMultiCell(array(
              $i,
              $pos['text'],
              sprintf("%9.2f", $pos['menge']),
              sprintf("%9.2f", $pos['einzelpreis']),
              sprintf("%9.2f", $pos['gesamtpreis'])
              ));
      $this->SetX(27);  // sonst gehts immer ganz links los...
    }
    $this->Cell(array_sum($this->twArrSpaltenbreiten), 0, '', 'T');  //Tabellenlinie unten

sonstige (eigene) Funktionen

In dieser Klasse sind noch weitere Funktionen programmiert, auf die hier nicht näher eingegangen werden soll, um den Umfang dieses Artikels nicht zu sprengen.

Es handelt sich dabei um die Funktion twShowLetzteSeite(), sowie um den Quellcode zwischen

  /* twTabelleMitMultiCell START -------------------------------------------- */
  ...
  ...
  /* twTabelleMitMultiCell END ---------------------------------------------- */

und

  /* twRundeckbereich START ------------------------------------------------- */
  ...
  ...
  /* twRundeckbereich END --------------------------------------------------- */

Schlussbemerkungen

Dieses Rechnungs-Beispiel ist ausbaufähig, stellt aber mit der Klasse TwPdfRechnung eine solide Vorlage dar. Anhand dieser Klasse kann man nach einer gewissen Einarbeitungszeit seine an den eigenen Geschmack angepasste PDF-Rechnung zurechtzimmern. Der Quellcode dieses Beispiels darf frei verwendet werden (siehe twPdf-Rechnung).

Die Anregungen und das Grundverständnis vor allem für die Tabelle mit MultiCell und den abgerundeten Ecken wurden von Add-On’s von FPDF bezogen. Für alle, denen es nicht schnell genug gehen kann, gibt es den Quellcode in einem ZIP-Archiv. ™

Kategorien
Inspiration Programmierung Sonstige Programmiersprachen Tutorials

PDF-Dokumente mit PHP erzeugen

PDF-Dateien zu erstellen, ist schon lange kein Problem mehr. Spätestens seit OpenOffice die Möglichkeit bot, Textdokumente ins PDF-Format zu konvertieren (und möglicherweise aufgrund dessen andere namhafte Anbieter nachzogen), ist es für jedermann leicht möglich, seine Informationen in Form eines PDF-Dokumentes anzubieten. Anders sieht es aus, wenn man mal schnell auf seiner Website aktuelle Inhalte „zur Laufzeit“ dynamisch in einer PDF-Datei anbieten möchte.

Das wäre zum Beispiel nötig, wenn man Benutzereingaben aus Formularen in diese PDF-Datei integrieren muss. Ein mögliches Szenario wäre ein Bestellformular, welches nach erfolgter Bestellung dem Benutzer die Möglichkeit bietet, eine Bestellung als PDF-Datei auszudrucken/herunterzuladen.

Lösungsansatz / Alternativen

Wie immer gibt es mehrere Lösungen. In unserem Fall wird die PDF-Erzeugung durch Verwendung der Klasse FPDF gezeigt. Diese Klasse ist frei erhältlich und darf sowohl für private als auch für kommerzielle Zwecke genutzt werden. Das ist der erste Grund, weshalb wir FPDF hier verwenden, der zweite ist die Stabilität. Die FPDF-Klasse wird seit 2001 entwickelt und kann sich heute auf die Fahne schreiben, eine relativ einfach zu verwendende, erprobte und stabile PHP-Klasse zu sein. Eine Doku zu FPDF gibt es hier.

Als Alternative zu FPDF muss an erster Stelle PDFlib genannt werden. Diese Klasse ist jedoch nicht auf jedem Webserver verfügbar und Einrichtung und Umfang sind nicht trivial.  Wer sich die Sache trotzdem ansehen möchte, kann diese schön geschriebene Anleitung lesen. Eine andere interessante Alternative könnte TCPDF sein. Der Vollständigkeit halber seien „PDFlib Lite“, „CPDF“ und „Zend_Pdf“ für das Zend-Framework erwähnt.

Grundlagen / eigene Klasse

Für unsere Übung sollte auf Ihrem Webserver PHP5 laufen. Falls Sie keine Möglichkeit haben PHP5 zu nutzen, sind ein paar kleine Änderungen am Quellcode notwendig, dass die Skripte auch auf PHP4 lauffähig sind. Dazu am Ende mehr.

Am Besten legen Sie sich für die folgenden Versuche ein neues Verzeichnis an (so können Sie dieses eventuell schnell und problemlos wieder löschen, wenn Ihnen die Sache am Ende nicht gefällt). In dieses Verzeichnis entpacken Sie die FPDF-Klasse, die Sie hier herunterladen. Erstellen Sie ein weiteres Verzeichnis neben dem soeben entpackten fpdf-Verzeichnis und nennen es twpdf. Dies ist nur ein Vorschlag, Sie haben freie Auswahl. Manchmal jedoch ist es vorteilhaft, bei den selbst erstellten Verzeichnis-, Datei-, Funktions- und Variablennamen eine Art Vorzeichen anzuhängen, um im Code immer schnell erkennen zu können, was eigene Tests und was vorgegebene, erprobte Dinge sind. Alles was wir in unseren Übungen „probieren“ erhält die „Vorsilbe“ tw, so beugen wir dem versehentlichen Löschen der FPDF-Klasse vor.

Am Ende sollten Sie jedenfalls eine Verzeichnisstruktur ähnlich der im folgenden Bild vorliegen haben:

Testklasse01

Beginnen wir mit einer kleinen Testklasse um die grundlegenden Dinge kennenzulernen und gleichzeitig eine Art Vorlage für alle späteren Arbeiten zu haben.

// unsere Testklasse erbt von der FPDF-Klasse
class Testklasse01 extends FPDF {

	// hier werden die Variablen für diese Klasse deklariert (also: "bekanntgemacht")
	private $twVariable01 = "";
	private $twVariable02 = ""; 

	// der Konstruktor dieser Klasse
	function __construct() {
		// Konstruktor der vererbenden Klasse aufrufen (also den von FPDF)
		parent::__construct("P", "mm", "A4"); // L=Querformat(Landscape), P=Hochformat(Portrait)

		// hier werden die Variablen dieser Klasse initialisiert (also: "gefüllt")
		$this->twVariable01 = "Hallo, ich bin der Probetext aus Testklasse01";
		$this->twVariable02 = date("d.m.Y");

		// Einstellungen für das zu erstellende PDF-Dokument
		$this->SetDisplayMode(100);      // wie groß wird Seite angezeigt(in %)

		// Seite erzeugen (sozusagen: starten)
		$this->AddPage();
	}	

	// eine Funktion zur Anzeige des Inhalts
	function Header() {
		$this->SetFont("Arial","B","16");                    // Schrift
		$this->SetTextColor(255, 000, 000);                  // Schriftfarbe
		$this->SetXY(20, 50);                                // Position
		$this->Cell(90, 10, $this->twVariable01, 1, 1, "L"); // Box(Textbox)
	}	

	function Footer() {
		// Farben und Schrift allgemein
		$this->SetFont("Courier","I","9");
		$this->SetTextColor(180);
		$this->SetXY(25, 288);
		$this->Cell(170, 5, "dieses Dokument wurde am ". $this->twVariable02. " erstellt", 1, 1, "R");
	}
}
// ACHTUNG: darf kein Zeichen hinter phpend sein (auch kein Leerzeichen) !!!

Testklasse01.php

Diese kleine Testklasse könnte einfacher aufgebaut sein, doch für umfangreichere PDF-Dokumente später ist es ratsam, sich schon jetzt diesen Aufbau mit Variablendeklarationen, Konstruktor, Header uns Footer anzugewöhnen. Der abgebildete Quellcode sollte anhand der eingefügten Kommentare selbsterklärend sein. Trotzdem an dieser Stelle Erläuterungen zu den FPDF-Funktionen:

  • Zeile 12: Ruft den Konstruktor der (vererbenden) FPDF-Klasse auf und setzt dabei das Papierformat, Maßeinheit und Papiergröße.
  • Zeile 19: SetDisplayMode() legt fest, wie das Dokument angezeigt werden soll, also mit welchem Zoomfaktor.
  • Zeile 22: AddPage() Erzeugt eine neue Seite im Dokument (beziehungsweise überhaupt eine Seite).
  • Zeilen 26 bis 32: Header() Erzeugt den Header der Seite. Kann jedoch auch für den gesamten Seiteninhalt verwendet werden.
    • SetFont() Bestimmt Schriftart, Style (B=fett, I=kursiv, U=unterstrichen) und die Schriftgröße. Die geringe Auswahl an Schriftarten ist derzeit das größte Manko von FPDF, aber mal Hand aufs Herz, wieviele verschiedene Schriftarten verwendet man schon in einem Dokument?
    • SetTextColor() Bestimmt die Textfarbe. Angabe bsp. (220, 000, 110) oder nur (220) (steht für (220, 220, 220)).
    • SetXY() Position von linken oberen Seitenrand (x=horizontal, y=vertikal). Bestimmt den Punkt, an dem es weitergeht.
    • Cell() Zeichnet eine neue Zelle (oder halt Box) im Dokument. Diese kann optional Text, einen Rahmen und einen Hintergrund erhalten. Die linke obere Ecke beginnt an dem zuvor mit SetXY() zugewiesenem Punkt. Die Zellenbreite und -höhe wird in den beiden ersten Parametern festgelegt.
  • Zeilen 35 bis 41: Footer() Die Fußzeile sozusagen.

php-Skript, welches das PDF-Dokument ausgibt, indem es die Testklasse01 benutzt

Es folgt der Code für die php-Datei. Erläuterungen folgen im Anschluss.

// ACHTUNG: darf kein einziges Leerzeichen vor phpstart sein, wegen header!

// FPDF-Klasse und das Verzeichnis der FPDF-Schriftarten einbinden
define("FPDF_FONTPATH","fpdf16/font/");
include_once('fpdf16/fpdf.php');

// unsere selbsterstellte Testklasse01 einbinden
include_once("twpdf/Testklasse01.php");

// pdf erzeugen (aus unserer selbsterstellten Testklasse01)
$pdf = new Testklasse01();  

// pdf ausgeben (im Browser oder in Datei schreiben)
$pdf->Output();   // Ausgabe (wenn in Datei schreiben, dateiname in Klammer)

// ACHTUNG: in der aufgerufenen Klasse darf kein Leerzeichen hinter phpende sein!

testseite01.txt

  • Zeile 4 und 5: Hier werden die FPDF-Klasse und die Schriftarten eingebunden.
  • Zeile 8: Hier binden wir unsere selbst erstellte Klasse ein.
  • Zeile 11: Ein Objekt erzeugen von der Testklasse01.
  • Zeile 14: Output() Output gibt das PDF-Dokument aus, beziehungsweise, wenn man als Argument einen Dateiname angibt, dann wird eine PDF-Datei auf dem Server angelegt.

Wenn Sie kein PHP5 auf Ihrem Webserver nutzen können

Wenn Ihnen kein PHP5 zur Verfügung steht, benutzen Sie für dieses Beispiel folgende Dateien.

Der Unterschied dieser beiden Dateien zu den vorgestellten Dateien ist gering. Hier wurden nur die „private/public-Angaben“ umgeändert in „var“ und der Konstruktoraufruf der vererbenden Klasse hat eine andere Syntax. Diese kleinen Unterschiede in den Dateien haben jedoch keinen Einfluss auf unsere Beispiele. Also, falls Sie beim Testen unserer Beispiele eine ähnliche Fehlermeldung wie die folgende erhalten, dann läuft auf Ihrem Webserver kein PHP5.

Ein erstes Beispiel

An dieser Stelle könnte jetzt ein Anwendungsbeispiel erscheinen. Man könnte eine einfache Rechnung zu generieren – so es wie dieses Beispiel zeigt. Aber vielleicht haben Sie ganz andere Ideen…

Kategorien
Webdesign

Google Maps: Quellensammlung

Nachdem an dieser Stelle schon einige grundlegende Techniken in Bezug auf Google Maps vorgestellt wurden, folgt hier eine dicke Portion Links und Quellen für alle, die sich eingehender mit der Materie beschäftigen möchten.

An erster Stelle stehen die direkt von Google angebotenen Schnittstellen und Anleitungen. Es folgen Beispiele und Anleitungen für zusätzliche Features. Und schließlich gibt es Links zu Communities und sonstigen Tutorials.

Schnittstellen und Anleitungen direkt von Google

  • Google Maps
    Die offizielle Website von Google Maps (de). Hier kann man seine Suchanfragen starten, eigene Karten erstellen, Routen berechnen, Standorte festlegen, und und und.
  • Google Maps Hilfe
    Eine deutsche Hilfeanleitung. Der erste Anlaufpunkt für alle, die sich mit Google Maps selbst beschäftigen möchten.
  • Google Maps Tour
    Video-Tutorials, derzeit aktuell zu Driving Directions, Transit, Street View, Add a Place, Maps on Androit, Edit the Map, Explore a Place, Create a Map, Add Content, Find Business, Getting started und Profiles. Das Ganze in Englisch.
  • Google Maps Meine Karten
    Eigene Karten direkt bei Google verwalten.
  • Google Maps Street View
    Das bekannte (oder berüchtigte) Street View von Google. Direkt auf Straßen in den verschiedensten Städten sehen.
  • Lokales Branchencenter
    Hier kann man seine eigene Firma eintragen oder halt einfach eine Firmensuche in der gewünschten Umgebung, unterteilt nach Branchen, vornehmen.
  • Google Maps Mobile
    Wie der Name schon sagt, Google Maps fürs Handy.
  • Google Maps Enterprise
    Google Maps für Unternehmen. Ermöglicht eine leistungsstärkere Benutzeroberfläche, beispielsweise zum Aufzeichnen von Kundenstandorten, Sendungsverfolgung, Gebäudeverwaltung und dergleichen mehr.
  • Google Maps API
    Das „Quasi-Muss“ für jeden Google Maps Entwickler. Stellt alle Schnittstellen für die Google Maps zur Verfügung (englisch).
  • Google Maps API Dokumentation
    Die Dokumentation zur vorgenannten Google Maps API.
  • Google Maps Mapplets API
    Schnittstelle für Mapplets (eine Art Google Maps Plugins), die in Google Maps verwendet werden können.

Beispiele und Anleitungen für zusätzliche Features

  • ausblendbare Sidebar
    Hier wird beschrieben, wie man eine weg- und zuklickbare Sidebar zu einer Google Map erstellen kann.
  • Sidebar mit sortierbarer Liste
    Mit diesem Beispiel kann man eine Sidebar erstellen, in der die Einträge per Drag & Drop verschiebbar sind.
  • Marker-Daten aus einer Text-Datei laden
  • Sidebar und Marker in Kategorien
    Bei vielen Markern bietet sich eine Unterteilung in verschiedene Kategorien an. Wie man dann die Marker und Sidebareinträge der verschiedenen Kategorien optisch voneinander unterscheiden kann, zeigt dieser Link.
  • Strecke mit einem „Auto“ abfahren
    Eine niedliche Animation. Man gibt Start- und Zielpunkt ein, klickt auf Start, und schon rast ein kleines Auto-Icon die Strecke entlang. Spielerei, aber schön anzusehen.

    Dasselbe noch einmal, hier wird jedoch die Strecke beim Fahren gekennzeichnet: hier
  • Infofenster mit Tabs
    Eine schöne Möglichkeit, recht viele Informationen in einem Infofenster übersichtlich darzustellen ist die Verwendung von Tabs. Das heißt, jedes Tab zeigt einen anderen Inhalt an. Dadurch lassen sich die verschiedensten Inhalte schön trennen.
  • Google Earth Icons verwenden
    Man kann natürlich die verschiedensten Icons auf seiner Google Map verwenden, selbstgemachte oder vorgefertigte. Nichts spricht dagegen, die von Google bereitgestellten Icons zu verwenden.
  • Zoom-Map neben der Map
    Wie im folgenden Screenshot ersichtlich, ist es möglich, neben der eigentlichen Google Map eine kleine „gezoomte“ Map anzuzeigen. Darin ist dann ein viel größerer Kartenausschnitt sichtbar und man kann so leicht auf weit entfernte Positionen gelangen, die dann auch in der eigentlichen Google Map angezeigt werden.

    Die Beschreibung gibt es hier.
  • Eigene Marker-Icons verwenden.
    Das Einbinden eigener Icons für die Marker ist nicht schwer. Eine Anleitung gibts hier.
  • z-index bei vielen Markern
    Ein Problem der Google Maps ist nicht wegzureden, wenn viele Marker innerhalb eines kleinen Areals abgebildet werden, dann ist es gar nicht so leicht, den „hintersten“ Marker anzuklicken, wenn sich die Marker überlagern. Wie man die hinteren Marker nach vorn holen kann zeigt diese Anleitung.

Sonstiges

  • Gmapper
    Eine PHP-Klasse für den Einsatz von Google Maps in Websites. Bietet erweiterte Funktionen wie Polylines, Zoom to bounds, XML Support, Fahrtrichtungen und vieles andere mehr.
  • Phoogle Maps
    Eine weitere PHP-Klasse zum Erstellen von Google Maps.
  • Geo-Koordinate ermitteln nach Ortsangabe oder hier
  • Geo-Koordinaten ermitteln nach Kartenauswahl oder hier
  • Geo-Koordinaten bekannter Orte
    Diese frei verfügbare Datenbank enthält Geo-Daten bekannter Orte weltweit, sortiert nach Kontinent und Land.
  • KML-Dateien erstellen mit PHP & Mysql
  • Adressen geocoden mit Php & Mysql
  • Google Street View, Stadtrundfahrt am Bildschirm
  • 3D-Modelle erstellen mit Google SketchUp
    Ein Beispiel der Stadt Frankfurt können Sie hier ansehen.
  • KML-Dateien verwenden für Google Maps

Community und Tutorials

Kategorien
Webdesign

Google Maps mit eigenem Infofenster

Zum vierten Mal basteln mit Google-Maps. Beim Klick auf einen Marker einer jeden Google Map erscheint stets ein von Google generiertes Infofenster mit dem von Ihnen eingefügten Inhalt. Das geht schicker. Bauen Sie doch einfach Ihr eigenes Infofenster.

Live-Demo

In einem unserer vorangegangenen Artikel Google Maps API benutzen wurde bereits beschrieben, wie eine Google Map mit einem ganz einfachem Info-Fenster erstellt werden kann. Dabei verwendeten wir google-eigene Funktionen zur Erstellung von Info-Fenstern. Dies ist auch nach wie vor die einfachste, schnellste und sicherste Methode überhaupt, um Info-Fenster zu erstellen.

Leider sind uns bei dieser Art der Erstellung einige (kleine) Grenzen gesetzt. Wer also alles selbst in der Hand haben will, der lese jetzt einfach weiter. Wir erstellen eigene Info-Fenster wie beispielsweise folgende:


Google Map mit selbst erzeugten Info-Fenstern

Design-Vorlage

Als Erstes erstellen wir uns ein Bild (oder gleich mehrere), das dann unser Info-Fenster darstellt, hier in Form einer Sprechblase. Dies kann man recht leicht mit verschiedenen Bildbearbeitungsprogrammen bewerkstelligen. Wer beispielsweise Photoshop benutzt, findet einige vorgefertigte Sprechblasen unter Eigene-Form-Werkzeug. Falls dort noch keine angezeigt werden, muss man erst bei Form das kleine Dreieck anklicken und Sprechblasen anfügen auswählen (das kann zwischen verschiedenen Programm-Versionen etwas variieren).


Sprechblase mit einem Bildbearbeitungsprogramm erstellen

Natürlich kann man auch irgendwelche Bilder benutzen, wenn sie nur irgendwie eine Fensterform darstellen. Da es in diesem Artikel nicht um designerische Schönheiten geht, sondern vielmehr um die technische Realisierung eigener Info-Fenster, sollen hier diese zwei Vorlagen genügen.


Javascript

Um eigene Info-Fenster mit Javascript zu realisieren, erstellen wir eine Klasse, von der dann die verschiedensten Info-Fenster abgeleitet werden können. Man kann natürlich auch das Rad neu erfinden…, wir verwenden hier jedoch eine vorgefertigte Klasse. Sie steht unter der Creative Commons Licence und kann daher frei verwendet werden. Diese Klasse wurde von Mike Williams erstellt und von Thomas Weise in seinem Google Map Tutorial ins Deutsche übersetzt und angepasst.

twGmapInfofenster.js

Wir binden diese Klasse wieder in ‚altbekannter Manier‘ in den head-Bereich der html-Datei ein. Genauso wie unsere schon aus den vorangegangenen Übungen bekannte ‚twGmap.js‘.

Kommen wir nun zu den Anpassungen in der Javascript-Datei ‚twGmap.js‘.

function setTwMarkers(map) {
  var marker01 = machTwMarker01();
  var marker02 = machTwMarker02();
  map.addOverlay(marker01);
  map.addOverlay(marker02);

  // (map, bild, bildgröße, Größe innere Area im Bild, links-oben innere Area, ankerpunkt-marker, [true-nicht wegklickbar])
  twGmapInfofenster01 = new EBubble(map, "infofenster01.png", new GSize(400,400), new GSize(340,270), new GPoint(30,30), new GPoint(120,356));
  twGmapInfofenster02 = new EBubble(map, "infofenster02.png", new GSize(297, 243), new GSize(224, 126), new GPoint(36, 28), new GPoint(175,238));  

  return map;
}

Sie kennen aus den vorangegangenen Artikeln noch die Funktion ’setTwMarkers()‘, in dieser wurden die verschiedenen Marker (durch Aufruf interner Funktionen) erstellt und der Google Map bekannt gemacht. Genau hier erstellen wir nun unser neues Info-Fenster (besser gesagt: unsere zwei neuen Info-Fenster), in den Zeilen, die mit ‚twGmapInfofenster…‘ beginnen.

In diesen Zeilen wird jeweils ein Info-Fenster durch den Aufruf von ’new EBubble()‘ erzeugt. Dabei werden folgende Argumente mit übergeben:

  1. ‚map‘ – unsere Google Map
  2. ‚infofenster01.png‘ – die URL für das Hintergrundbild (also für unsere am Anfang erstellte Sprechblase)
  3. ’new GSize(400,400)‘ – die Größe dieses Hintergrundbildes (Breite, Höhe)
  4. ’new GSize(340,270)‘ – Größe der inneren Area, für den Fensterinhalt (praktisch in etwa der verfügbare Platz ohne die Rundungen)
  5. ’new GPoint(30,30)‘ – die linke obere Ecke dieser inneren Area
  6. ’new GPoint(120,356)‘ – Ankerpunkt (die Spitze die auf den Marker zeigt)
  7. Zusätzlich kann man noch ‚true‘ als letztes Argument übergeben. Das bedeutet, dass dieses Info-Fenster nicht bei einem Klick auf sich selbst geschlossen wird. Diese Angabe ist jedoch optional.

So, unsere Info-Fenster sind schonmal erzeugt. Aber sie sind erstens noch leer und zweitens weiß unsere Google Map (beziehungsweise die Marker) noch gar nicht, dass sie eben diese neuen Info-Fenster beim Klick auf die Marker auch öffnen soll. Dies erledigen wir in den einzelnen Marker-Erstellungs-Funktionen wie beispielsweise ‚machTwMarker01()‘.

function machTwMarker01() {
  var point = new GPoint(13.748, 51.041);
  var marker = new GMarker(point);
  var html = '';
  html += '<div class="twGmapInfo">';
  html += ' <p class="headline">Das ist das Info-Fenster von Marker 01</p>';
  html += ' <p class="text">Dieses Info-Fenster ist nicht das Standard-Info-Fenster von Google sondern wurde mit Javascript selbst erstellt.</p>';
  html += '</div>';

  // hier das eigene Infofenster öffnen (anstatt das 'normale' von google)
  GEvent.addListener(marker, "click", function() {twGmapInfofenster01.openOnMarker(marker, html);});

  return marker;
}

Die Zeilen mit ‚html…‘ machen nur den Inhalt des Info-Fensters. Die Zeile mit ‚GEvent…‘ sorgt nun endlich dafür, dass bei einem Klick auf diesen Marker unser neues Info-Fenster angezeigt wird.

Das war es schon mit dieser Art eigenes Info-Fenster. Es gibt natürlich noch viele andere Wege oder Herangehensweisen. ™

Live-Demo und Quelltexte

Kategorien
Webdesign

Google Maps mit Straßenverbindungen

Auf Firmen-Websites macht es sich immer gut, den Standort mit Hilfe einer attraktiven Landkarte abzubilden. Google-Maps ermöglicht Ihren Website-Besuchern eine schnelle, unkomplizierte Methode, verschiedene Anfahrtsstrecken selbst zu generieren.

Straßenverbindung mit Angabe des Start- oder Zielpunktes

Diese Version eignet sich für die einfache Firmen-Website, in der eigentlich nur der Standort der Firma mit einem Marker auf einer Google Map dargestellt und dem Website-Besucher eine einfache Möglichkeit geboten werden soll, einen Anfahrtsplan zu diesem Standort zu erzeugen.

Dies erfolgt für den Besucher in zwei Schritten – Live-Demo

  1. Marker anklicken und im sich öffnenden Fenster angeben, ob man den (Marker-) Punkt als Start oder als Ziel für den Anfahrtsplan verwenden möchte (beispielsweise auf ‚diesen Punkt als Zielpunkt verwenden‘ klicken).
    Infofenster zur Auswahl, ob dies Start oder Ziel sein soll
    Infofenster zur Auswahl, ob dies Start oder Ziel sein soll
  2. Wenn bei der vorherigen Auswahl der Marker beispielsweise ‚diesen Punkt als Zielpunkt benutzen‘ ausgewählt wurde, dann muss nun noch der Startpunkt angegeben werden. Dafür genügt es meist, Ortsname und Straße einzugeben. Man kann hier auch direkt die Geo-Koordinaten eingeben oder Firmennamen und sonstige Suchbegriffe. Je nachdem, was Google kennt, wird es dann angezeigt.
    (auf ‚Straßenverbindung anzeigen‘ klicken nicht vergessen)

    Infofenster zur Eingabe des Start- oder Ziel-Punktes
    Infofenster zur Eingabe des Start- oder Ziel-Punktes

Die Anzeige der erzeugten Straßenverbindung erfolgt nun in einem neuen Browserfenster (oder in einem neuen Tab, je nach Browsereinstellung des Benutzers) und sieht beispielsweise so aus:

generierte Straßenverbindung (Landkarte)
generierte Straßenverbindung (Landkarte)

Auch in Textform wird die Anfahrt ähnlich wie bei einem Routenplaner generiert, was dann beispielsweise so aussehen könnte:

generierte Straßenverbindung (Text)
generierte Straßenverbindung (Text)


Anleitung zum Einbau in die eigene Website

Wir verwenden wieder unsere drei Dateien (‚index.html‘, ‚twGmap.js‘ und ‚twGmap.css‘) aus den vorangegangenen Artikeln. Diesmal müssen wir nur die ‚twGmap.js‘ bearbeiten.

Gleich oben erzeugen wir ein paar Variablen, teilweise sind diese für spätere Erweiterungen schon mal mit vorgesehen.

var directionMarkers   = [];
var directionHtmls     = [];
var directionHtmlsNach = [];
var directionHtmlsVon  = [];

var directionCount     = 0;

Dann ändern wir die Marker-Funktion (‚machTwMarker01()‘) folgendermaßen ab

function machTwMarker01() {
  var point = new GPoint(13.748, 51.041);
  var adresse = "Rudolf Harbig Stadion";
  var marker = new GMarker(point);
  var html = machTwHtmlInfofenster(marker, adresse);
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html)});	

  return marker;
}

Darin wird nun eine Funktion ‚machTwHtmlInfofenster()‘ aufgerufen, welche wir erst noch erstellen müssen. Aufgrund ihres Umfanges, soll diese hier nicht abgebildet werden. Nur soviel, darin wird der html-Code für die verschiedenen Infofenster erzeugt und in die Variablen ‚directionHtmls‘, ‚directionHtmlsVon‘ und ‚directionHtmlsNach‘ geschrieben.

function machHtmlInfofenster(marker, adresse) {
  ...
  directionHtmls[directionCount] = htmlDefault;
  ...
  directionHtmlsVon[directionCount] = htmlVon;
  ...
  directionHtmlsNach[directionCount] = htmlNach;
  ...
}

Das war’s schon. ™

Live-Demo und Quelltexte

Kategorien
Webdesign

Google Maps mit Sidebar

Google Maps werden umso informativer, je mehr verschiedene Dinge darauf abgebildet sind. Um den Überblick bei sehr vielen Markern zu behalten, ist es günstig, diese zusätzlich in einer Sidebar neben der Google Map noch einmal zusammenzufassen. Dort kann man diese auch gleich noch nach Themen ordnen. Die Benutzer können dann viel besser ihr gesuchtes Ziel finden, ohne erst jeden einzelnen Marker anklicken zu müssen.

Diesmal geht es um die programmiertechnischen Grundlagen, eine Sidebar an eine Google Map anzufügen. Diese Sidebar enthält Verweise auf die verschiedenen Marker der Google Map. Während auf der Map die örtliche Darstellung erfolgt, kann man in der Sidebar eine thematische Anzeige besser bewerkstelligen. So kann man beispielsweise von einem Gebiet alle Tankstellen, alle Gaststätten und dergleichen mehr anzeigen.

Version 1 (einfach)

Dieses Beispiel zeigt die Grundlagen, wie eine solche Sidebar an eine Google Map gekoppelt werden kann. Beim Erzeugen eines neuen Markers für die Google Map reicht dann später eine einzige Zeile Code, um diesen in der Sidebar mit aufzuzählen.

Schauen wir uns die Google Map direkt bei maps.google.de an, dann sehen wir links von der Landkarte eine Sidebar, in der verschiedene Dinge aufgelistet werden. Diese Sidebar bietet natürlich mächtigere Funktionen, als die in unserem Beispiel gezeigten, aber es soll uns hier auch nur um die Grundlagen gehen.


Google Map mit Sidebar auf maps.google.de

Wir werden jetzt unser Beispiel aus Google Maps – Teil 1 erweitern und ebenfalls eine Sidebar einbauen.

Zuerst legen wir in der html-Datei einen div-Bereich mit der id=“twGmapSidebar“ für die Sidebar an

und definieren das dazugehörige Stylesheet in der css-Datei.

#twGmap {
  float: left;
  width: 490px;
  height: 470px;
}
#twGmapSidebar {
  float: left;
  width: 160px;
  margin: 4px;
  padding: 4px;
  background-color: #00ffff;
}

In der Javascript-Datei deklarieren wir zuerst einmal 4 neue globale Variablen. ’sidebarId‘ ist selbsterklärend, in ’sidebarHtml‘ kommt später der ganze Html-Code für die Sidebar rein. ’sidebarMarkers‘ ist ein Array für alle Marker, uns ’sidebarCount‘ zählt intern nochmal die Einträge in der Sidebar.

var sidebarId      = "twGmapSidebar"
var sidebarHtml    = "";
var sidebarMarkers = [];
var sidebarCount   = 0;

Nun schreiben wir zwei neue Funktionen. Die erste heißt ‚machZeileInTwGmapSidebar(text, marker)‘. Darin soll dann praktisch der jeweilige Eintrag in der Sidebar erzeugt werden (‚text‘ ist der Text, der dann in der Sidebar angezeigt wird, und ‚marker‘ ist der Marker, der beim Klick angezeigt wird).

function machZeileInTwGmapSidebar(text, marker) {
  sidebarMarkers[sidebarCount] = marker;
  sidebarHtml += '' + text + '';
  sidebarCount ++;
}

Die zweite neue Funktion heißt ‚twGmapSidebarIsClicked()‘. Sie wird aufgerufen, wenn der Benutzer auf einen Sidebar-Eintrag klickt.

function twGmapSidebarIsClicked(i) {
  GEvent.trigger(sidebarMarkers[i], "click");
}

In der uns aus dem ersten Teil schon bekannten Funktion ‚twGmapLoad()‘ fügen wir am Ende folgenden Code ein. Dort wird nach einer Kontrollabfrage der fertige Html-Code in die Seite eingefügt, also die Sidebar angezeigt.

if (!document.getElementById(sidebarId)) {
  alert("Fehler: die Sidebar mit der id "+ sidebarId+ " konnte nicht auf dieser Webseite gefunden werden!");
  return false;
} else {
  document.getElementById(sidebarId).innerHTML = sidebarHtml;
}

Wenn Sie dieses alles in Ihren Code eingebunden haben, ist der größte Teil schon getan. Nun müssen Sie nur noch beim Erstellen eines jeden Markers, der auch in der Sidebar abgebildet werden soll, eine einzige Zeile einfügen (und dabei den jeweiligen Text und Marker mit übergeben).

machZeileInTwGmapSidebar("Marker 1", marker);

(die Funktionen für das Erstellen eines Markers sind die ‚machTwMarkerXX-Methoden, beispielsweise ‚machTwMarker01()‘)

So ähnlich sollte unsere Google Map mit Sidebar dann aussehen:


einfache Sidebar, enthält Verweise auf die Marker der Google Maps

Live-Demo und Quelltexte

Version 2 – mit Buchstaben-Icons in Marker und Sidebar

Für einen Marker kann man auch andere Icons verwenden, als die standardmäßig verwendete ‚rote Blubberblase‘. Sinn macht es jedoch trotzdem, eben diesen Standard-Marker zu verwenden, da sich schlicht und einfach die Nutzer eben schon daran gewöhnt haben. Es ist aber auch möglich, diese Marker auch zu nummerieren oder halt mit Buchstaben zu versehen, wie im folgenden Beispiel.


Fortlaufende Buchstaben in Markern und Sidebar der Google Map

Die Marker und die Verweise in der Sidebar erhalten automatisch fortlaufende Buchstaben, es sollten deshalb mit diesem Beispiel erstmal nicht mehr als 26 Marker verwendet werden. Ändern Sie nun den Code in Ihrer Javascript-Datei folgendermaßen ab. Zuerst benötigen wir eine globale Variable ’sidebarZeichen‘ für den fortlaufenden Buchstaben.

var sidebarZeichen = String.fromCharCode("A".charCodeAt(0) - 1);

Als Nächstes eine Funktion, die uns uns das Icon mit dem fortlaufenden Buchstabe liefert.

function machTwIconBuchstabeFortlaufend() {
  sidebarZeichen     = String.fromCharCode(sidebarZeichen.charCodeAt(0) + 1);
  var icon           = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + sidebarZeichen + ".png");
  icon.printImage    = "http://maps.google.com/mapfiles/marker"+sidebarZeichen+"ie.gif"
  icon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+sidebarZeichen+"ff.gif"

  return icon;
}

Wenn Sie dies haben, müssen Sie nur noch in den Funktionen, die die einzelnen Marker erstellen (beispielsweise ‚machTwMarker01()‘) den Code etwas abändern. Suchen Sie die Zeile, in der der Marker deklariert wird (‚var marker = …‘). Anstatt dieser Zeile fügen Sie die zwei folgenden Zeilen dort ein. Das erstellt dann schon mal den Marker auf der Google Map.

function machTwMarker03() {
  var point = new GPoint(13.750, 51.049);
  var icon = machTwIconBuchstabeFortlaufend();
  var marker = new GMarker(point, {icon:icon});
  var html   = "Das ist das Info-Fenster von Marker 03";
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html)});

  machZeileInTwGmapSidebar("Marker 3", marker);

  return marker;
}

Um in der Sidebar vor jedem Verweis (also in jeder Zeile) diesen Buchstabe ebenfalls abzubilden, bedarf es nur einer Zeile Code in der Funktion ‚machZeileInTwGmapSidebar()‘. Fügen Sie vor der Zeile, die mit ’sidebarHtml += ‚<a href= …‘ beginnt, folgende Zeile ein.

  sidebarHtml += ''+ sidebarZeichen+ '';

Live-Demo und Quelltexte

Version 3 – angeklickten Marker in der Sidebar optisch hervorheben

Benutzerfreundlicher wird die ganze Sache noch, wenn der derzeitig angeklickte Marker auch in der Sidebar optisch hervorgehoben wird. Der Gestaltung sind dabei keine Grenzen gesetzt. Hier soll es aber nur um ‚das Technische‘ gehen, deshalb wird im Beispiel nur der Hintergrund gelb dargestellt.


angeklickten Marker in der Sidebar optisch hervorgehoben

Nehmen Sie dafür folgende Veränderungen im Quellcode der Javascript-Datei vor. Als Erstes brauchen wir wieder eine globale Variable ’sidebarLastLinkid‘.

var sidebarLastLinkid;

In der Funktion ‚machTwGmap()‘ fügen Sie folgenden Code ein, der für das Zurücksetzen der Hintergrundfarbe verantwortlich ist (wenn das Info-Fenster des Markers wieder geschlossen wurde).

  GEvent.addListener(map,"infowindowclose", function() {
    document.getElementById(sidebarLastLinkid).style.background="#fdf9ec";
  });

Danach in jeder Marker-Erstellungs-Funktion (beispielsweise ‚machTwMarker03()‘) folgenden Code einfügen (beziehungsweise alte Code-Fragmente damit ersetzen).

function machTwMarker03() {
  var point = new GPoint(13.750, 51.049);
  var icon = machTwIconBuchstabeFortlaufend();
  var marker = new GMarker(point, {icon:icon});
  var html   = "Das ist das Info-Fenster von Marker 03";
  var linkid = "link" + sidebarCount;

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    document.getElementById(linkid).style.background="yellow";
    sidebarLastLinkid=linkid;
  });

  machZeileInTwGmapSidebar("Marker 3", marker, linkid);           

  return marker;
}

Nun noch die Funktion ‚machZeileInTwGmapSidebar‘ folgendermaßen abändern

function machZeileInTwGmapSidebar(text, marker, linkid) {
  sidebarMarkers[sidebarCount] = marker;
  sidebarHtml += '
'; sidebarHtml += '' + sidebarZeichen + ''; sidebarHtml += '' + text + ''; sidebarHtml += '
'; sidebarCount ++; }

Live-Demo und Quelltexte

Version 4 – viele Einträge auf engem Raum darstellen

Die einfachste Methode, sehr viele Einträge in der Sidebar anzuzeigen, dabei aber wenig Platz zu verschwenden: Setzen Sie im Stylesheet die Sidebar auf ‚overflow: auto;‘ und verpassen Sie ihr eine Höhe, beispielsweise ‚height: 100px;‘. ™

#twGmapSidebar {
  float: left;
  width: 160px;
  height: 100px;
  overflow: auto;
  margin-right: 4px;
  padding: 4px;
  background-color: #fdf9ec;
  border: 1px dotted #ffbb60;
}


viele Einträge der Sidebar in einer Art Selektbox

Live-Demo und Quelltexte

Kategorien
Webdesign

Google Maps API benutzen

Eine Karte von Google Maps generieren lassen und auf der eigenen Website einzubinden, ist kinderleicht. Eine Google Map jedoch nach eigenen Ansprüchen mit Hilfe der Google-Maps-API zu erstellen, ist weitaus eleganter und ermöglicht die Verwendung zusätzlicher Features.

Was Sie benötigen

  • Einen Account bei Google
  • Einen Google Maps API-Key. Kopieren Sie sich den erhaltenen Key irgendwo hin, Sie benötigen ihn dann später. Dieser 86-stellige Key ist nur für die eine angegebene Website(Domain) gültig.
  • Um eine Google Map von einem bestimmten Gebiet (beispielsweise Ihres Wohnortes) zu erstellen, müssen Sie noch dessen geografischen Koordinaten bestimmen. Eine Möglichkeit, dies zu tun, finden Sie beispielsweise hier. (Suchen Sie auf der sich öffnenden Website Ihr gewünschtes Gebiet aus und klicken auf einen Punkt, der in Ihrer neuen Google Map der Mittelpunkt sein soll. Unterhalb werden dann dort die Werte für Latitude und Longitude angezeigt.) Speichern Sie sich auch diese zwei Werte irgendwo hin. Dieser Punkt wird dann der Mittelpunkt Ihrer neuenGoogle Map.


Einfache Google Map mit Zoom und Typauswahl

Haben Sie, wie oben beschrieben, Ihren API-Key und Ihre Koordinaten? Dann kann es losgehen.

Screenshot
Einfache Google Map mit Zoom und Typauswahl

Die HTML-Datei
Google Maps werden auf Webseiten mit Javascript eingebunden. Fügen Sie deshalb in Ihrer html-Datei folgenden Code in den head-Bereich ein und tragen anstelle von ‚IHR-API-KEY-VON-GOOGLE‘ Ihren 86-stelligen API-Key ein. Damit prüft Google bei jedem Aufruf dieser Seite, ob der API-Key gültig ist.

   <script
src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de"
type="text/javascript"></script> 

Das Aussehen und die Funktion Ihrer Google Map kann nun auf verschiedene Weise angepasst werden. Wir empfehlen, dies in separaten Dateien zu tun. Eine CSS-Datei für die Darstellung/Aussehen und eine Javascript-Datei für die Funktion der Google Map. In unserem Beispiel haben wir diese Dateien ‚twGmap.css‘ und ‚twGmap.js‘ genannt. Zum Einbinden dieser Dateien fügen Sie bitte folgende zwei Zeilen in den head-Bereich

        <link rel="stylesheet" type="text/css" href="twGmap.css" />
 <script type="text/javascript"
src="twGmap.js"></script> 

und diese eine Zeile in body ein:

       <body onload="twGmapLoad();" onunload="GUnload();"> 

Zu guter Letzt muss nun noch ein Bereich angelegt werden, in dem die Google Map angezeigt wird. Vorzugsweise benutzen wir dafür einen div-Bereich. Dieser bekommt eine id verpasst, damit wir ihn im Javascript ansprechen können (in unserem Beispiel ist die id ‚twGmap‘).

        <div id="twGmap"> </div> 

Die ganze html-Datei nochmal zusammengefasst:

       <head>
 <title>Google Maps - Demo 02 - Marker und
Infofenster</title>
 <meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
 <link rel="stylesheet" type="text/css" href="twGmap.css" />
 <script type="text/javascript"
src="twGmap.js"></script>
 <script
src="http://maps.google.com/maps?file=api&v=2&key=IHR-API-KEY-VON-GOOGLE&h1=de"
type="text/javascript"></script>
</head>

<body onload="twGmapLoad();" onunload="GUnload();">
 <h2>Google Map mit Marker und Infofenster (beim Klick auf
den Marker)</h2>
 <div id="twGmap"> </div>
</body>
</html>

Die Javascript-Datei
Die Javascript-Datei ist weitgehend kommentiert und sollte einigermaßen selbsterklärend sein. Gleich zu Beginn werden Variablen definiert für die id, die Position und die Zoomstufe.

Die darin befindliche Funktion twGmapLoad() wird beim Seitenstart automatisch aufgerufen. Sie führt ein paar Prüfabfragen durch und ruft schließlich die Funktion machTwGmap() auf, in welcher die Google Map dann erstellt wird. Dies mag im Moment etwas umständlich erscheinen, erleichtert uns jedoch spätere Anpassungen und das Einbinden zusätzlicher Features. Außerdem ist es anzuraten, bei der Vergabe der Namen für die Funktionen und für die ‚id‘ nicht solche Bezeichnungen wie ‚load()‘ oder ‚map‘ oder ‚gmap‘ zu benutzen, weil es dadurch schnell zu Verwechslungen kommen kann, sobald man mit mehreren Maps hantiert.

Öffnen Sie nun die Javascript-Datei und Sie sehen oben die (derzeit) 4 Variablen. Für den ersten Test sind diese schon mit Werten gefüllt. Für Ihre eigene Google Map können Sie hier die ‚id‘ des (html-)Elements, die Geo-Koordinaten und die Zoomstufe anpassen.

      var elementId = "twGmap";
var lat = "51.041";
var lon = "13.748";
var zoom = 14; 

Wichtig sind dann eigentlich nur folgende Zeilen:

      var map = new GMap2(document.getElementById(id)); 
      map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl()); 
      map.setCenter(new GLatLng(lat, lon), zoom, G_HYBRID_MAP); 

Die erste Zeile erstellt die Google Map mit der angegebenen id. Zeile 2 erstellt das Zoom-Control (links oben auf der Google Map. Zeile 3 erstellt das Control zur Auswahl des Anzeigetyps (Karte, Satellit oder Hybrid). Zeile 4 setzt die Position (Mittelpunkt) der angegebenen Geo-Koordinaten. Für ‚G_HYBRID_MAP‘ kann dort auch ‚G_SATELLITE_MAP‘ oder ‚G_NORMAL_MAP‘ eingesetzt werden.

Die CSS-Datei
In der CSS-Datei wird die Darstellung, beziehungsweise das Aussehen der Google Map festgelegt. In diesem ersten bescheidenen Beispiel handelt es sich dabei vorerst nur um die Breite und Höhe der gesamten Google Map.

       #twGmap {
width: 600px;
height: 450px;
} 

Demo und Download (für ‚Einfache Google Map mit Zoom und Typauswahl‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


Marker und Infofenster

Screenshot

Google Map mit Marker und Infofenster

Das Hinzufügen von Markern und Info-Fenstern geschieht nun ausschließlich in der Javascript-Datei. Das Aussehen des Infofensters wird in der CSS-Datei geregelt. Der Übersichtlichkeit halber lagern wir das Erstellen der Marker und der dazugehörigen Infofenster in der Javascript-Datei wieder in eine eigene Funktion aus (im Beispiel setTwMarkers(). Diese wird folgendermaßen aufgerufen:

       map = setTwMarkers(map); 

und enthält unter anderem folgende Zeilen:

       var point = new GPoint(13.748, 51.041); 
       var marker = new GMarker(point); 
       var html = "HIER DEN HTML-CODE DES INFO-FENSTERS REIN"; 
       GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml(html)}); 
       map.addOverlay(marker); 

In Zeile 1 wird der Geo-Punkt erzeugt mit Angabe der Breiten- und Längengrade (Achtung: Zuerst den Längengrad angeben, dann den Breitengrad). Mit diesem Punkt erzeugen wir in Zeile 2 den Marker. In der Zeile 3 wird das Infofenster erzeugt. Diese Zeile ist dann bei einem anspruchsvollerem Infofenster natürlich etwas länger. Zeile 4 sorgt dafür, dass sich das Infofenster bei einem Klick auf den Marker öffnet. Hier werden unsere soeben erzeugten Marker und Infofenster verwendet. In Zeile 5 wird alles auf unsere Google Map ‚projiziert‘.

Demo und Download (für ‚Marker und Infofenster‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


mit Übersichts-Ausschnitt

Screenshot

Google Map mit Übersichtsausschnitt

Sie können auch eine kleine Übersichtskarte anzeigen lassen, in der man den sichtbaren Bereich der Google Map mit einem kleinen Sichtfenster mit der Maus verschieben kann. Dafür bedarf es nur der Änderung einer Zeile im Javascript. Suchen Sie in der Javascript-Datei folgende Zeile

       map.addControl(new GMapTypeControl()); 

und ändern Sie diese Zeile folgendermaßen ab

       map.addControl(new GOverviewMapControl()); 

Demo und Download (für ‚mit Übersichts-Ausschnitt‘)

  • Demo ansehen
  • Quelltexte ansehen: twGmap.js twGmap.css
  • gesamtes Beispiel herunterladen


Verschiedene Controls

Screenshot

verschiedene Zoom-Controls

Um eines der drei links zu sehenden Zoom-Controls auf Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

 map.addControl(new GSmallMapControl()); 

und ändern Sie diese Zeile folgendermaßen ab

 map.addControl(new GLargeMapControl()); 

oder

 map.addControl(new GSmallZoomControl()); 
Screenshot

das Entfernungs-Control

Zusätzlich ist es auch möglich eine Scale-Control für die Anzeige einer Entfernungs-Skala einzubinden. Diese wird dann unten links angezeigt und ist standardmäßig im Satelliten- bzw. im Hybrid-Modus recht unauffällig. Um diese Entfernungs-Control in Ihrer Google Map anzeigen zu lassen, suchen Sie in der Javascript-Datei folgende Zeile

               map.addControl(new GSmallMapControl()); 

und fügen davor folgende zwei Zeilen ein (die erste Zeile bewirkt die Anzeige in Kilometer/Meter)

               _mPreferMetric = true;
map.addControl(new GScaleControl()); 

Demo und Download (für ‚Verschiedene Controls‘)



Erstveröffentlichung 16.09.2008

Kategorien
Webdesign

Diashows und Bildergalerien im Handumdrehen mit JAlbum

JAlbum ist eine Freeware, mit der ganz einfach verschiedenste Bildergalerien erstellt, verwaltet und als statische HTML-Seiten im Web veröffentlicht werden können. Das Aussehen kann aus einem unerschöpflichen Pool an Vorlagen ausgewählt werden.

Diashow, Slideshow, Bildergalerie, Web-Fotoalbum, alles Bezeichnungen für ein Interface, das eine Sammlung von Bildern in übersichtlicher Form darstellt. Die Betonung liegt auf Übersicht und genau dort sind der Gestaltung keine Grenzen gesetzt. Jeder Webmaster kennt das, mal schnell eine Bildergalerie erstellen, und dabei auf die speziellsten Kundenwünsche bei der Gestaltung eingehen zu müssen. Javascript, CSS & Co ist dann in der Praxis meist doch nicht so schnell zusammengewurstelt. Abhilfe kann hier die Freeware „JAlbum“ schaffen.

Dieses Tool ist in Java geschrieben und ist daher auf Windows, Linux, MacOS und jedem weiteren Betriebssystem lauffähig, auf dem eine Java VM läuft. JAlbum für Windows kann  hier herunter geladen werden (13,7 MB). Wenn Sie sich auf der Downloadseite nicht registrieren möchten, klicken Sie einfach auf ‚Skip this step‘ im Registrierungsformular unten. In der angebotenen Installationsdatei ist eine Java VM schon enthalten und wird bei der Installation auf PC’s ohne vorhandene Java VM mitinstalliert. JAlbum-Versionen für andere Betriebssysteme können Sie hier herunter laden.

Die Installation gestaltet sich einfach. Nach dem Start öffnet sich die sich weitgehend selbst erklärende Programmoberfläche. Über ‚Tools -> Optionen‘ kann man neben der Sprache und dem Aussehen der Programmoberfläche noch einige Einstellungen vornehmen, was jedoch in den meisten Fällen nicht nötig sein sollte, weil die Default-Einstellungen schon optimal sind.

Als Erstes wählt man durch ‚Hinzufügen‘ die zu veröffentlichenden Bilder aus oder man zieht sie einfach per Drag&Drop von irgendwo her auf die Programmoberfläche. Auch ganze Verzeichnisse kann man so verwenden. JAlbum importiert die Bilder und zeigt sie als Vorschaubilder an. Die einzelnen Bilder können nun mit Kommentaren versehen, angeordnet oder in Unterordner einfügt werden.

Screenshot
JAlbum mit ausgewählten Bildern

Wenn man oben rechts bei Viewing Mode das mittlere Icon anwählt (vorher ein Bild markieren), wird ein interner Editor angezeigt, der grundlegende Funktionen zum Bearbeiten von Bildern bietet. Schnelle Änderungen müssen so nicht mehr mit einer externen Bildbearbeitung vorgenommen werden.

Screenshot
Kleinere Bildbearbeitungen gleich hier machen

Als Nächstes wählt man Skin und Style aus, das heißt, man wählt das Design der zu erstellenden Bildergalerie.

Screenshot
Auswahl von Skin und Style

Genau das ist die große Stärke, denn neben einigen vorgegebenen Skins stellt die Community von JAlbum Hunderte Skins zur Verfügung, die einfach herunter geladen und in das Programm eingebunden werden können.

Screenshot
Auswahl von Skin und Style

Über Einstellungen kann man unter anderem noch den Ausgabeordner festlegen, ehe man auf ‚Album erstellen‘ klickt, um die Bildergalerie zu generieren. Je nach Anzahl der Bilder und Rechnerleistung werkelt das Programm nun ein paar Sekunden, aber es geht insgesamt recht flott und die Bildergalerie ist fertig.

Screenshot
Generierung der Bildergalerie

Über ‚Vorschau‘ kann die soeben erzeugte Bildergalerie nun in einem Browser begutachtet werden. Das Ergebnis ist, je nach gewähltem Skin, verblüffend. Zumindest der „gestresste Webdesigner“ wird die Zeitersparnis zu schätzen wissen. Technisch gesehen ist das Produkt auch kein Platzfresser, sondern besteht in der Hauptsache nur aus den Thumbnails, aus herunterskalierten Vorschaubildern, ein paar zum jeweiligem Skin gehörenden Grafiken und eben der startbaren ‚index.html‘.

Zu guter Letzt kann man seine soeben erzeugte Bildergalerie auch gleich noch mit dem integrierten FTP-Client auf den Webserver laden, sofern man Zugang zu einem solchen hat. Zu diesem Zweck, klickt man auf Veröffentlichen, gibt die Zugangsdaten ein und bestätigt mit Ok.

Screenshot
Hier entweder den eigenen Webserver oder einen JAlbum-Account angeben

Screenshot
Dieses Fenster erscheint bei Auswahl eines eigenen Webservers

Beim Upload ist auswählbar, ob man das gesamte Album oder nur bestehende Änderungen hochladen möchte. Wer keinen Zugang zu einem eigenen Webserver hat, kann seine Bildergalerien auch bei JAlbum hosten. Angeboten wird dort neben kostenpflichtigen auch ein kostenloser Account, der 30MB Speicherplatz und 2GB Bandbreite/Monat bietet. Das sollte fürs Erste reichen, falls man nichts Größeres vor hat. So kann man seine Bildergalerien auf einfache Art im Internet präsentieren, ähnlich wie Flickr. Eine große Auswahl an veröffentlichten JAlbum-Bildergalerien könnte Sie vielleicht zu eigenen Ideen inspirieren.

Auch für Entwickler ist JAlbum interessant. Ohne großen Aufwand ist es möglich seine eigenen Skins zu erstellen. Sehen Sie sich dazu die umfangreiche Anleitung an. Es ist auch möglich eigene Filter oder Bildbearbeitungs-Plugins zu schreiben, die dann beim Erstellen des Albums auf alle Bilder angewendet werden können. ™

Erstveröffentlichung 08.09.2008

Kategorien
(Kostenlose) Services Essentials

IE-Tester – alle Versionen des Internet Explorer in einem Werkzeug

Webseiten in den verschiedenen Versionen des Internet Explorer zu testen, wird mit dem IE-Tester zum Kinderspiel. Man kann Webseiten mit den Versionen 5.5 bis 8 des Internet Explorer testen und dabei mit nur einem Klick zwischen den Versionen umherspringen.

Jeder Webmaster kennt es und viele hassen es, die erstellte Website sieht in jedem Browser und dann auch noch in jeder Version eines Browsers anders aus. Die meisten Unterschiede treten wohl in den verschiedenen Versionen des Internet Explorer (kurz IE genannt) auf. Auch, wenn man noch so viel Erfahrung hat, um eines kommt man nicht herum, das Testen. Nun kann man aber mit einfachen Mitteln nicht eben mal schnell mehrere Versionen des IE auf seinem System nebeneinander installieren, weil sich der IE so tief in das System verwurzelt und sich die Versionen untereinander nicht vertragen.

Eine Lösung wäre es, einen alten Rechner flottzumachen und dort eine andere Version des IE zu installieren, um sein Werk testen zu können. Das ist natürlich schon etwas umständlich und würde ja auch wieder nur eine Version des IE zugänglich machen.

Eine andere Lösung wäre es, sich mehrere VM’s (Virtuelle Maschinen) auf seinem System zu installieren. In jeder VM kann man dann eine Version des IE installieren und damit dann seine Webseiten testen. Das funktioniert gut, bedeutet aber doch schon einen erheblichen Aufwand bei der Einrichtung.

Da dies alles keine befriedigenden Lösungen sind, ist es umso besser, dass es nun seit Mai dieses Jahres den IE-Tester in der Version 0.2.2 gibt. Der IE-Tester ist ein kostenloses Werkzeug für Webentwickler, mit dem Skripte und Webseiten ganz unkompliziert in den verschiedenen Versionen des IE getestet werden können. Das Umschalten zwischen den IE-Versionen erfolgt dabei mit nur einem Klick. Er beherrscht die Rendering- und Javascript-Engine von IE 5.5, 6.0, 7 und 8beta1 und ist auf Vista und XP Betriebssystemen lauffähig. Ein installierter IE7 wird empfohlen. Unterstützt werden auch Conditional Comments, bis auf IE 8, als einzige Ausnahme.

Sie können den IE-Tester auf der Projekt-Website downloaden. Trotz seines Alpha-Stadiums läuft das Programm recht stabil. Wenn Probleme auftreten, können Sie im englischsprachigem Forum nachfragen. Eine vom Hersteller aufgezeigte Einschränkung: Im IE6-Modus ist das Abspielen von Flash nicht möglich und Java-Applets funktionieren noch nicht ordnungsgemäß.

Installation und Verwendung: Nachdem Sie die etwa 24MB-große Installationsdatei herunter geladen und auf Ihrem System installiert haben, starten Sie den IE-Tester. Das Aussehen erinnert an das Ribbon (Multifunktionsleisten statt Menü in Office 2007) und kann über Anzeige angepasst werden. Die verschiedenen Versionen des IE werden in Tabs angezeigt, aber erst, nachdem man sie ausgewählt hat. Klicken Sie deshalb auf Neue Tab und wählen Sie im sich öffnenden Auswahlmenü eine Version aus.

Screenshot
Der „leere“ IE-Tester nach Installation und Start

Auf diese Art können Sie derzeitig nun die IE-Versionen 5.5, 6.0, 7 und 8beta1 in jeweils separaten Tabs öffnen. Das sollte für die meisten Zwecke genügen. Die Adresszeile des Browsers befindet sich direkt unter den Tabs. Auf diese Art kann man ein und dieselbe Internetseite in diesen vier IE-Versionen betrachten und mit nur einem Klick jeweils zur nächsten Version springen.

Screenshot
Jedes Tab eine eigene Version des IE

Unter Options kann man zum Testen sogar die Eigenschaften des Internet Explorers verändern. Ansonsten sind die Programmoptionen spartanisch. Doch das, wofür der IE-Tester konzipiert wurde, tut er ohne zu mucken. Alles in allem stellt der IE-Tester eine sinnvolle Bereicherung des Werzeugkastens eines Webentwicklers dar. ™

Alternativen:

  • Multiple_IE (verschiedene Versionen des IE auf einem System nebeneinander installieren)
  • IE NetRenderer (online versch. IE-Versionen testen)
  • Browserpool (29,99€/Monat, kostenloser Testaccount, benötigt eine Installation)
  • Browsershots (online, zeigt nur Screenshots zur eingegebenen Webseite von fast allen Browsern)

Andere Browser:

  • Firefox und Opera – Einfach beim Installieren der unterschiedlichen Firefox-Versionen verschiedene Verzeichnisse wählen (vor Allem auch für das Firefox-Profil)
  • Firefox im MAC – MultiFirefox
  • Safari – Multi-Safari
  • Lynx – auch mal ganz gut, die Standard-Konformität mit einem einfachen Textbrowser zu testen, gleich online mit LynxView

Erstveröffentlichung 26.08.2008

Kategorien
Design HTML/CSS

100% Hintergrundbild im Browser

Unabhängig von der Fenstergröße des Browsers wird mit diesem Trick das Hintergrundbild immer in voller Größe angezeigt – egal, wie groß das Bild in Wirklichkeit ist. Es wird nichts abgeschnitten oder dazugesetzt.

Eine der vielen Fragen eines Webdesigners: Für welche Bildschirmauflösung oder besser gesagt, für welche im Browser sichtbare Fläche optimiere ich meine Website? Eine zufriedenstellende Antwort gibt es leider nicht, weil die Palette von riesigen Monitoren bis hin zum Handy reicht. Also, was solls? Man nimmt einfach eben nur eine Hintergrundfarbe oder einen Farbverlauf und wählt ein flexibles Layout. Das klappt.

Was aber, wenn der Auftrag lautet: „Ein Bild soll den Hintergrund der Seite ausfüllen und nix soll dabei abgeschnitten werden, egal wie groß die sichtbare Fläche des Browserfensters gerade eben ist“… Einen möglichen Weg beschreibt Stu Nicolls.

In einer html-Datei werden drei „div’s“ erstellt. Eins für den gesamten Hintergrund. Eins für den festen Bereich links. Und eins für den scrollbaren Bereich rechts (dieser enthält dann noch ein div mit der id=“inhalt“. Als Hintergrundbild dient hier fridolin.jpg (1280×1024 groß, im gleichen Verzeichnis). Anstelle von fridolin.jpg können Sie dann Ihr gewünschtes Hintergrundbild platzieren.

<div> <img id="hintergrund" src="fridolin.jpg" alt="" title=""
/> </div>
<div id="fest"> <p>Diese linke Spalte hier ist fest
(fixed)</p>
</div>
<div id="scrollbar"> <div id="inhalt"> <p>Das ist der
scrollbare Bereich rechts.</p> </div>
</div> 

Erklärung: Wie man hier wohl schon erkennen kann, liegt der Trick darin, dass das „Hintergrundbild“ in Wirklichkeit gar kein Hintergrundbild ist, sondern in einem div-Bereich nur als normale Grafik eingebunden ist. Dies ermöglicht erst die Skalierung des „Hintergrundbildes“. Im Stylesheet wird dann dafür Sorge getragen, dass dieses Bild auch nicht von dem nachfolgenden Inhalt verdeckt wird (mit z-index) und so wirklich wie ein Hintergrundbild wirkt.

Das Stylesheet ist folgendermaßen festgelegt.

html, body {margin:0; padding:0; width:100%; height:100%;
overflow:hidden;}
#hintergrund {position:absolute; z-index:1; width:100%; height:100%;}
#fest {position:absolute; top:25px; left:10px; width:150px; z-index:10;
border:1px solid #000; padding:10px;}
#scrollbar {position:absolute; width:100%; height:100%; top:0; left:0;
overflow:auto; z-index:2;}
#inhalt {padding:5px 300px 20px 200px;} 

Erklärung: Hier wird für body UND html die Breite und die Höhe auf 100% gesetzt. z-index regelt die Sichtbarkeit.

Live-Demo zum Testen im neuen Fenster

Öffnen Sie die Demo und verändern Sie die Größe Ihres Browserfensters. Das Hintergrundbild sollte sich dann automatisch an die Größe Ihres Browserfensters anpassen. Demo herunterladen. Entpacken Sie die heruntergeladene demo.zip und starten im entpackten Verzeichnis die Datei demo.html. ™

Das Ganze wurde getestet in:

  • Internet Explorer 5.5 bis 8.0beta1
  • Firefox 2 und 3
  • Opera 9.26
  • Safari 3.1.1 (Windows-Version)

Erstveröffentlichung 22.07.2008