Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 11: Karten einbinden

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Das Einbinden von Karten ist ganz einfach - Sie müssen lediglich ein wenig Quellcode einfügen.

Vergewissern Sie sich zuerst, wieviel Platz Sie in der Breite zur Verfügung haben. Dieser Inhalt, den Sie gerade lesen, ist maximal 395 Pixel breit. Die Karte darf also nicht breiter sein, sonst "sprengt" es die Seite.

Surfen Sie anschliessend zur Seite, von der Sie eine Karte einbinden wollen. Sie finden bei Google Maps rechts oben die Angaben "Drucken, Senden, Link" - genau das brauchen Sie:

Unter "HTML-Code zum Einbetten in eine Website" ist der Code, den Sie benötigen. Allerdings sehen Sie als Profi schon, dass hier width="425" steht - für unsere Zwecke wäre das zu breit.

Klicken Sie auf den Link direkt darunter, "Eingebettete Karte anpassen und Vorschau anzeigen". Es erscheint ein Fenster, in dem Sie alles anpassen können - bei "benutzerdefiniert" können Sie Breite und Höhe selbst bestimmen:

Unter "Kopieren Sie..." zuunterst ist der Code, den Sie im Dreamweaver einfügen müssen. Aber Achtung - in der Code-Ansicht!

Wechseln Sie also nun zum Dreamweaver und wählen Sie mit dem Cursor dahin, wo Ihre Karte hin soll. Machen Sie z.B. einen neuen Abschnitt und schreiben Sie XXXXXXXX hin. Markieren Sie diese Zeichen. Diese Zeichenfolge erkennen Sie in der Codeansicht nun problemlos!

Ersetzen Sie die XXXXXX-Zeichenfolge mit dem inzwischen kopierten Code aus Google Maps. In der Browservorschau sollten Sie nun die Karte sehen.

Beachten Sie bitte, dass es sich bei dieser Einbettung um ein "iframe" handelt, quasi also um eine "Website in einer Website". Dies bringt gewisse Nachteile mit sich, wird aber heute von den meisten Browsern problemlos verarbeitet.

Dasselbe gibt es auch auf map.search.ch mit noch ein paar schweizspezifischen Details angereichert - klicken Sie auf "Karte einbinden". Hier wird ein kleiner Javascript-Code eingebunden:

Das Einfügen in Dreamweaver geschieht wie oben beschrieben in der Quellcode-Ansicht.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.