Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Gestaltungsgrundlagen für Webdesigner

Karten und andere Dienste

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auch Karten von Google Maps oder anderen Diensten lassen sich per iFrame komfortabel in die Website integrieren – so geht's!
04:05

Transkript

Um Karten in eine Website einzubinden, macht es Sinn, zum Beispiel Google Maps zu verwenden. Das heißt, ich verwende hier zunächst einfach mal die Adresse, ich gebe hier einfach Marburg in Deutschland ein, dort ist dann hinterher der Stichpunkt und ich kann dort natürlich auch die Stadtmitte anpeilen oder kann selbst einen Punkt auswählen. Das heißt, ich zoome einfach rein und damit protokolliert Google Maps auch die Zoomstufe, die ich hier verwende, das heißt, ich will hier zum Beispiel in die Innenstadt rein und sehe, dass die Oberstadt hier sehr kleinteilig ist, wo viele verschiedene Aktionen dann zu Marburg by Night stattfinden würden und wenn ich jetzt hier zum Beispiel an der Untergasse zu Hofstatt einen Punkt setzen wollte, dann muss ich hier fragen: Was ist hier eigentlich überhaupt? Das ist die Untergasse, zum Beispiel, 17 und wenn ich diesen Punkt jetzt wählen wollte, dann kann ich natürlich auch sagen, dieser Punkt soll hinterher als Koordinate verwendet werden. Wie das geht, ist folgendermaßen. Ich gebe zum Beispiel diese Adresse konkret ein, bis ich diesen roten Pin habe, und an dieser Stelle kann ich jetzt sagen, ich möchte meine Informationen teilen. Und wenn ich das teile, so ist zunächst der Link damit gemeint, sodass die Adresse direkt eingegeben werden kann. Bin ich nicht in der Untergasse 17, sondern in der Untergasse 14, so kann ich das ebenfalls hier direkt im Code, in der URL, eingeben oder das Ganze auch verkürzen, zum Beispiel, um es bei Twitter zu verwenden. Die Karte einzubetten, geht natürlich auch, das ist auch ebenfalls ein Iframe ähnlich wie bei YouTube und an dieser Stelle jetzt die Quelle, die also miteinander verlinkt wird, aber auch, was sehr interessant ist, hinterher natürlich auch die Zoomstufe, die dabei verwendet wird und die Größe in welcher Pixelgröße hinterher eine Karte eingebunden wird. Dieser Iframe ist also quasi der Codebaustein, den Sie dann auf Ihrer Website direkt einfügen können in den HTML-Code. Oder wenn Sie ein Content-Management-System verwenden, können Sie diesen Iframe-Code auch in den Text-Editor Ihres Backend-Systems eingeben, zum Beispiel bei Wordpress. Was dabei noch interessant ist, auch die Zoomstufe wird hier mit gespeichert, das heißt, diese Größe in der Darstellung wird tatsächlich so verwendet, auch wenn Sie jetzt umschalten würden auf Satellit, wird natürlich die Satelliten-Darstellung hinterher dargestellt und nicht die normale Straßenkarten-Darstellung. All das gehört also mit dazu. Wenn Sie jetzt sagen, ich will diesen Iframe verwenden oder Sie sagen, ich möchte eine große Fassung verwenden, dann bekommen Sie auch die große Vorgabe und natürlich steht hier hinten auch eine andere Höhe und Breite, nämlich 800 mal 600. Oder Sie sagen, ich habe das benutzerdefiniert, meine Spaltenmaße sind 393 mal 195 oder 200, dann kann ich auch die Vorschau der Kartengröße machen. Das ist nicht besonders groß, reicht aber aus, um damit die Karte hinterher wiederzugeben. Das heißt, hier reicht es einfach aus, ein Screenshot jetzt zu machen, und diesen Screenshot hinterher, im Layout zu platzieren, um die Karte einzubetten, oder Sie definieren hier eine benutzerdefinierte Größe und verwenden dann den Screenshot und den Link im Code. Also ich hoffe, Sie konnten damit einen guten Hinweis kriegen, wie Sie mit Karten arbeiten. Google hat natürlich noch viel mehr Möglichkeiten, unter anderem mit API-Schnittstellen zu arbeiten, aber das ist eher für fortgeschrittene User gedacht, die wissen, wie das Ganze funktioniert und wie man die eigene Website mit Google per API dann hinterher verbinden kann. Nutzen Sie also die Iframe-Lösung, das geht am schnellsten und ist am leichtesten hinterher in der Anwendung.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!