• Skriptum
• HTML
• HTML-Diverses
• Google Maps

Überblick

Man kann Google Maps entweder als normalen Hyperlink in die Website einfügen oder als "Objekt" einbetten. In beiden Fällen kann man die volle Funktionalität von Google Maps verwenden.

Variante Hyperlink:

Hier gelangen Sie zur Karte mit dem Standort der VHS Floridsdorf.

Ergebnis: Klickt der/die BenutzerIn auf den Hyperlink, öffnet der Browser die entsprechende Seite von Google Maps mit dem entsprechenden Ausschnitt der Landkarte. Der/die BenutzerIn ist dann auf der Google Website und nicht mehr auf eurer. Dafür hat er dort alle Möglichkeiten von Google Maps und der Ausschnitt hat die Größe des Browserfensters und ist somit meistens größer.

Anmerkung: Wie bei jedem Hyperlink kann auch eine Grafik, z.B. ein aussagekräftiges Symbol oder Logo, verwendet werden:

Variante Einbetten:

Größere Kartenansicht 

Ergebnis: Das Karte verbraucht relativ viel Platz, aber der/die BenutzerIn bleibt auf eurer Website. Sie können aber über den standardmäßig bestehenden Hyperlink mit dem Text "Größere Kartenansicht" zur Google Maps Webseite wechseln.

Vorbereitung

Um zu Google Maps zu gelangen, geht man auf die Google-Website (www.google.at) und klickt dort rechts oben auf das Symbol mit dem 3×3 kleinen Quadraten namens "Google-Apps" . Dort könnt ihr dann "Maps" anklicken.

Im Browserfenster wird nun die Landkarte Google Maps angezeigt. Zu Beginn wird Mitteleuropa angezeigt, mit Österreich im Zentrum, oder falls ihr schon öfters mit Google Maps gearbeitet habt, die Region in die ihr immer wieder hineingescrollt habt. Hat man auf einem Computer schon öfters Google Maps benutzt, so kann es sein, dass Google schon mehrere Cookies abgelegt hat und kann so eine "genauere" Position anzeigen.

Kartenausschnitt wählen

Um auf den gewünschten Kartenausschnitt zu gelangen, muss man rein- oder raus-zoomen und den Ausschnitt verschieben. Dies kann man mehrere Arten:

• Mit den Symbolen + und - rechts unten in der Karte, bzw. wenn man mit dem Mauszeiger nur daraufzeigt wird eine Schaltfläche mit dem Text "Schieberegler einblenden" angezeigt.
• Mit der Maus:
  zoomen:
  • Mausrad nach oben zoomt rein, Mausrad nach unten wieder raus.
  • Doppelklick zoomt rein.
  • Kontextmenü: Vergrößern und Verkleinern.
  verschieben:
  • Mit der Maus in der Karte ziehen (Maustaste gedrückt).
  • Kontextmenü: Karte hier zentrieren.
• Mit der Tastatur:
  zommen: + und - Taste.
  verschieben: Pfeiltasten (Mit dem Finger draufbleiben, dann beschleunigt die Geschwindigkeit nach kurzer Zeit.)
• Mit Eingabe eines Ortes, einer Adresse oder einer Koordinate im oberen Suchfeld "In Google Maps suchen".

Zommen und Verschieben kann man jederzeit, auch wenn schon eine Marke oder das Ziel der Routenplanung gesetzt wurde.

Marke setzen

Einfach im oberen Suchfeld die gewünschte Adresse eingeben und Google Maps fügt eine rote Marke an der entsprechenden Postion ein. Gibt es für die gewünschte Position keine genaue Adresse, so klickt man mit der rechten Maustaste an die gewünschte Stelle in der Karte und wählt im Kontextmenü "Route von hier". Allerdings wird die Marke dann in grün dargestellt.

Klickt der/die BenutzerIn später auf diese Marke, erscheint eine "Sprechblase" mit der Adresse und den Optionen: Routenplaner, In der Nähe suchen, Speichern, Mehr.

Routenplaner

Man kann Google Maps auch als Routenplaner einsetzen, mit dem der/die BenutzerIn den besten Weg zum Betreiber der Website einfach finden kann. Dazu muss oben links die Schaltfläche "Routenplaner" anklicken und es erscheint das "seitliche Steuerfeld".

Danach kann man hier das Ziel angeben. Den Abfahrtsort lässt man offen, den können dann die BenuzterInnen eingeben.

Zum Ziel angeben klickt man entweder mit der rechten Maustaste an die gewünschte Stelle in der Karte und wählt im Kontextmenü "Route hierher". Es wird dann dort die rote Marke angezeigt.
Möchte man eine genaue Adresse als Ziel angeben, so gibt man dies in das untere Feld des Routenplaners ein.

Einfügen als Hyperlink

Wenn man Goole Map als Hyperlink einfügt, geht man so vor wie bei jedem anderen Hyperlink. Auf der eigenen Webseite (HTML-Datei) fügt man einen Text oder ein Bild ein, der oder das als Hyperlink dienen soll. Als Ziel (href: hyper reference) dient dann die Internetadresse (URL: Uniform Resource Locator) des vorbereiteten Google Map-Ausschnittes (mit oder ohne Marke bzw. Routenplanterziel) ein.

Wie kommt man zur URL?

In der oberen Navigationsleiste des "seitliche Steuerfelds" klickt man auf die Schaltfläche "Menü" (drei waagrechte Striche untereinander) und klickt dort den Befehl "Karte teilen oder einbetten" an.. Es erscheint ein Dialogfeld mit den Optionen "Link teilen" (ist schon aktiviert) und "Karte einbetten". Im großen Textfeld wird die den Kartenausschnitt angepasste URL angezeigt.

Vorsicht: Die URL ist sehr lange und es ist nur ein Teil davon sichtbar. Am Anfang ist sie komplett markiert und man kann sie daher leicht kopieren. Klickt man aber mit der Maus rein, kann man mit ihr nur mehr den sichtbaren, zu kurzen Teil markieren. Hier einfach die Tastenkombination Strg+A (All) drücken oder zuerst die Pos1-Taste (Home) antippen und danach die Tastenkombination Umschalt+Ende (Shift+End) drücken um die gesamte URL zu markieren.

Es gibt auch eine Kurzfassung der URL für SMS, Twitter und Co. Wollt ihr diese, dann das Kontrollfeld "Kurze URL" aktivieren.

Einfacher die URL aus der Adressleiste des Browser zu kopieren geht hier nicht, da in dieser die Änderungen (Zoom, Marke, Routenplaner) noch nicht enthalten sind.

Einbetten als Karte

Inhalte anderer Websites können mit dem HTML-Element iframe als "eingebetteter Frame" in einer eigenen Webseite angezeigt werden. Dafür sollte man als HTML-Version HTML5 verwenden, denn nur in dieser sind iframes (wieder) erlaubt.

Wie kommt man zum HTML-Code?

In der oberen Navigationsleiste des "seitliche Steuerfelds" klickt man auf die Schaltfläche "Menü" (drei waagrechte Striche untereinander) und klickt dort den Befehl "Karte teilen oder einbetten" an.. Es erscheint ein Dialogfeld mit den Optionen "Link teilen" (ist schon aktiviert) und "Karte einbetten". Zum Einbetten klickt man diese Option an und das Dialogfeld wird vergrößert und ein Kartenausschnitt angezeigt.

Im großen Textfeld wird der den Kartenausschnitt angepasste HTML-Code angezeigt. Diesen kopiert man und kann ihn dann im Webeditor in der Codeansicht (wichtig!) an der gewünschten Stelle einfügen. .

Möche vorher noch die Kartengröße anpassen, klickt man links oben auf das Kombinationsfeld "Mittel". Hier kann man zwischen "Klein", "Mittel" und "Groß" auswählen bzw. mit "Benutzerdefiniert" eine beliebige Größe sogar mit einer anderen Proportion eingeben.

In der Karte selbst kann man noch zommen und den Ausschnitt verschieben. Der entsprechend angepasste HTML-Code wird ganz unten angezeigt.

Anmerkung: Es wird immer ein Hyperlink "Größere Kartenansicht" unter der Karte von Google Maps eingefügt. Möchte man diesen nicht haben, kann man ihn einfach löschen.

Hilfe: Onlinehilfe von YouTube

Kapitel Einbetten einer Karte in eine Website oder einen Blog (klassisches Google Maps)
https://support.google.com/maps/answer/72644

Parameter im Quellcode anpassen

Im Fenster "Eingebettete Karte anpassen und Vorschau anzeigen" lassen sich Zoomfaktor und Position (Verschieben) einstellen. Die Schrittweite ist jedoch unbefriedigend groß. Möchte man genauer arbeiten, dann müsst ihr nach dem Einfügen in die eigene Website dort den HTML-Quellcode bearbeiten.

Hier müsst ihr die Werte der entsprechenden Parameter ändern oder neue Parameter und Werte einfügen. Dies macht man am Ende der URL, die als Wert des Attributs src im eingefügten Quellcode steht, z.B. (im Original ohne Zeilenumbrüche):
src="http://maps.google.at/maps?f=d&source=embed&saddr=
&daddr=Die+Wiener+Volkshochschulen+Gesellschaft+mit+
beschr%C3%A4nkter+Haftung+-+Volkshochschule+Floridsdorf,
+Angerer+Stra%C3%9Fe,+Wien&geocode=Fbxe4AIdkkX6ACGGpIXZlduZ6g
&aq=1&oq=angererstra%C3%9Fe+wie
&sll=48.260099,16.39864&sspn=0.007614,0.019226&vpsrc=0
&hl=de&dirflg=w&mra=mr&ie=UTF8&t=m
&ll=48.260099,16.39864&spn=0.007614,0.019226

Beispiele für Parameter:

Die hier wichtigsten Parameter sind die Position des Ausschnittes (Verschieben) und das Ausmaß der Vergrößerung (Zoom).

ll (latidute, langitude) Position

Die Position des Bildmittelpunkts wird als geografische Breite (Nord-Süd) und geografische Länge (West-Ost) in Grad angegeben. Die geografische Breite kann daher Werte zwischen -90° (Südpol) und 90° (Nordpol) annehmen, die geografische Länge kann daher Werte zwischen -180° (westlich von Greenwich in London) und 180° (östlich von Greenwich in London) annehmen.

Der Parametername ll steht für latitude (Breitengrad, geografische Breite) und longitude (Längengrad, geografische Länge) - und ist nicht die Zahl elf, aus wenn es von der Schrift her manchmal so aussieht.

Beide Werte werden als Dezimalzahlen mit Punkt (!) als Kommazeichen hintereinander geschrieben und durch einen Beistrich (!) getrennt. So wird z.B. die Position des Gebäudes der VHS Floridsdorf, Angerer Straße mit dem Parameter-Wert-Paar ll=48.258657,16.401767 (Breitengrad, Längengrad) angegeben.

Genauere Angaben über die sechste Nachkommastelle werden ignoriert. Was aber ziemlich egal ist, da ein 3 hunderttausendstel Grad (0.000003) ca. 1 Meter entspricht.

Erdumfang (360°) etwa 40.074km
1° ≈ 303km = 303.000m
0.001° ≈ 303m
0.000001°≈ 0,3m

z Zoom

"Karten in Google Maps haben eine ganzzahlige "Zoomstufe", die die Auflösung der aktuellen Ansicht definiert. In der normalen Straßenkartenansicht sind Zoomstufen zwischen 0 (niedrigste Zoomstufe, bei der der Globus vollständig angezeigt wird) und 21+ (höchste Zoomstufe, bei der einzelne Gebäude zu sehen sind) möglich. Von Google Maps wird die Zoomstufe 0 festgelegt, sodass die gesamte Erde in der Ansicht umfasst ist. Mit jeder nachfolgenden Zoomstufe wird die Genauigkeit in horizontaler wie vertikaler Richtung verdoppelt."
Quelle: https://developers.google.com/maps/documentation/staticmaps/?hl=de#Zoomlevels

Da dies aber wie oben erwähnt sehr ungenau ist, kann man für genauere Angaben den Parameter spn verwenden:

spn (span) Bereich, Kartenausdehnung

Ist die ungefähre Ausdehnung (Größe) der Karte, ebenso wie ll in Grad gemessen.

Details fehlen noch!

Marker: https://developers.google.com/maps/documentation/staticmaps/?hl=de-DE#Markers

(http://stackoverflow.com/questions/13023196/what-is-meaning-of-parameter-in-url-google-maps)

Welche Parameter gibt es

Die offizielle Liste der möglichen Parameter findet ihr unter der "Entwickler-Website" von Google:

Static Maps API Version 2 – Entwicklerhandbuch (nicht alle Parameter aufgelistet):
https://developers.google.com/maps/documentation/staticmaps/?hl=de-DE

Formatieren mit CSS

Natürlich kann man die Ansicht der Karte (Position, Rahmen etc.) sowie des Hyperlinks "Größere Kartenansicht" wie bei allen HTML-Elementen mit CSS anpassen.

Je nachden wie die Karte "eingebaut" wurde, kann man den Hyperlink <a>, das Bild <img> oder den eingebetteten Frame <iframe> ansprechen. Wenn ein div um die Karte eingefügt und mit der id, z.B. mit dem Namen "karte" versehen wurde, kann man folgende Selektoren verwenden:
#karte a {…}
#karte a img {…}
#karte iframe {…}
#karte small {…} /* für die Textstelle Größere Kartenansicht */

Weiterführende Informationen

Hilfe für Google Maps: in linken Navigationsbereich in der Fusszeile, ganz rechts auf Hilfe klicken, oder direkt:
https://support.google.com/maps/?hl=de

https://support.google.com/maps/answer/3544418?hl=en

Google Maps for Developers:
https://developers.google.com/maps/?hl=de-DE (Deutsch)
https://developers.google.com/maps/ (Englisch)