Dokumentation: wi://googlemaps - mosel.de · Damit der Nutzer nicht jedes Mal den Mittelpunkt und Zoom der GoogleMap Karte neu bestimmen muss, wenn ein neuer Marker eingebaut wird

weiss://inter.media

1 Dokumentation: wi://googlemaps

Dokumentation: wi://googlemaps zur Einbindung von eigenen GoogleMaps Karten

im TYPO3 Backend

weiss://inter.media


Inhalt Einrichtung des Plugins ........................................................................................................................... 3

Schritt 1: Frontend Plugin anlegen ...................................................................................................... 3

Schritt 2: Speicherort der Datensätze wählen .................................................................................... 3

Schritt 3: Datensätze anlegen ............................................................................................................. 4

Einrichtung einer simplen GoogleMaps Karte ......................................................................................... 5

Einstellmöglichkeiten der Karte: ......................................................................................................... 6

Marker einbinden .................................................................................................................................... 8

Einfacher Marker mit Infofenster ........................................................................................................ 8

Eigene Marker-Bilder ........................................................................................................................... 9

Anlegen mehrerer Marker und spezielle Eigenschaften ................................................................... 11

KML Dateien einbinden ......................................................................................................................... 13

GPX Dateien einbinden ......................................................................................................................... 15

Eigene GPX-Marker-Bilder ................................................................................................................. 19

GoogleMap Karte anpassen .................................................................................................................. 22

Kartenstyle ändern ............................................................................................................................ 22

Karten Kontrolleinstellungen ............................................................................................................ 24

weiss://inter.media


Einrichtung des Plugins

Schritt 1: Frontend Plugin anlegen Zu Beginn muss ein Frontend Plugin vom Typ „wi://googlemaps“ auf der gewünschten Seite, Spalte und Position erstellt werden.

Schritt 2: Speicherort der Datensätze wählen Dieses Frontend Plugin besitzt keine eigenen Einstellungen, außer dem Speicherort für die Datensätze der GoogleMap Karte. Dieser wird im Tab „Verhalten“ gewählt.

Hier wurde dieselbe Seite für den Speicherort der GoogleMap Datensätze gewählt, da in diesem Beispiel die Datensätze nicht extern auslagert werden.

Wichtig: Wenn kein Speicherort gewählt ist, wird keine GoogleMaps Karte im Frontend ausgegeben.

weiss://inter.media


Schritt 3: Datensätze anlegen Im nächsten Schritt werden die GoogleMap Datensätze im festgelegten Speicherort angelegt. Dafür muss nun das Listenmodul ausgewählt werden. Anschließend muss das „neuen Datensatz erstellen“ Icon in der rechten Spalte angeklickt werden.

Nun erhält man eine Auflistung aller möglichen Datensatztypen im TYPO3 System. Hier ist jetzt der Datensatztyp „Google Map“ zu wählen, da eine GoogleMap Karte erstellt werden soll. Alle weiteren Datensatztypen des Plugins, wie z.B. Marker oder KML, werden bei der Einrichtung der Kartendaten automatisch erstellt und können ignoriert werden.

weiss://inter.media


Einrichtung einer simplen GoogleMaps Karte In den Einstellungen des GoogleMap Datensatzes erhält man folgende Ansicht:

Für die Anzeige einer simplen Karte ist lediglich die Breite und Höhe, sowie Startposition und Zoom zu wählen. Die entsprechenden Werte sind der unteren Tabelle zu entnehmen. Alle weiteren Einstellungen können fürs Erste übersprungen werden.

weiss://inter.media


Einstellmöglichkeiten der Karte: Feld Beschreibung Mögliche Werte Title Überschrift der Karte als <h1> Tag Width Breite der Karte Relative Breiten (z.B. „100%“) oder

absolute Breiten (z.B. „500px“)

Height Höhe der Karte Absolute Höhen (z.B. „400px“) Startposition Zentrierung der Karten bei Initialisierung Geographische Koordinaten im

Dezimalformat (z.B. „50.5418388, 6.5625303“ für Kall)

Zoom Zoomstufe der Karte bei Initialisierung Ganze Zahlen von 1 bis X (abhängig von Position)

Types Available Auswahl der Kartentypen (z.B. Satellit) hybrid, roadmap, satellite, terrain, styledMap

Type Active Aktiver Kartentyp bei Initialisierung hybrid, roadmap, satellite, terrain, styledMap

Controls Available

Anzeige von einzelnen Kartenwerkzeugen mapType, pan, rotate, scale, streetview, zoom

Scrollwheel Einfangen des Mausrades beim Hovern der Karte für Zoom

ja/nein

Styles Eigener Karten Style (Hinweis: Option „styledMap“ muss unter „Types Available“ gewählt sein)

GoogleMaps Kartenstyle JSON Objekt

Hinweis: Geokoordinaten können mit dem kostenlosen Tool mapcoordinates.net gefunden werden (auch nach Adresse) http://www.mapcoordinates.net/

http://www.mapcoordinates.net/

weiss://inter.media


Das obige Beispiel erzeugt folgende Kartenansicht im Frontend:

weiss://inter.media


Marker einbinden Zu einer GoogleMap Karte können beliebig viele Marker hinzugefügt werden. Jeder Marker enthält verschiedene Einstellungsmöglichkeiten.

Einfacher Marker mit Infofenster

Der eingetragene Titel ist lediglich beim Hovern des Markers mit dem Cursor sichtbar. Für die Position ist wie auch bei der Karte eine Geokoordinate im Dezimalformat einzutragen. Die Beschreibung des Markers kann beliebig formatiert werden, wird allerdings erst mit einem Klick auf den Marker in einem Infofenster sichtbar.

weiss://inter.media


Obiges Beispiel liefert folgendes Ergebnis:

Eigene Marker-Bilder Ein eigenes Marker-Bild kann ebenfalls eingebaut werden. Dabei ist zu beachten, dass das Bild im PNG Format gespeichert ist und einen transparenten Hintergrund besitzt, da der Marker sonst als Rechteck mit weißem Hintergrund angezeigt wird.

weiss://inter.media


Zu einem eigenen Marker-Bild muss ein sogenannter Anker-Punkt gewählt werden. Dieser entspricht dem Pixel im Bild (von oben-links gesehen), welches auf die exakte Koordinate in der Karte zeigen soll. In diesem Beispiel hat das Marker-Bild eine Auflösung von 39x60 Pixeln und der Anker-Punkt wurde auf „20, 60“ gesetzt. Das bedeutet, dass der Punkt, mit dem der Marker auf der Karte „befestigt“ ist, das horizontal mittlere und vertikal unterste Pixel ist.

(Tipp: Auflösung des Bildes am besten immer mit in den Dateinamen schreiben, damit diese Information nicht nachgesehen werden muss)

Der eigene Marker zeigt nun also mit der Spitze auf die gewählte Koordinate:

weiss://inter.media


Anlegen mehrerer Marker und spezielle Eigenschaften Jede GoogleMaps Karte kann beliebig viele Marker beinhalten.

Damit der Nutzer nicht jedes Mal den Mittelpunkt und Zoom der GoogleMap Karte neu bestimmen muss, wenn ein neuer Marker eingebaut wird und auf der Karte zu sehen sein soll, kann einem Marker die Eigenschaft „Fitbounds“ gegeben werden. Dies bewirkt, dass alle Marker mit dieser gesetzten Eigenschaft bei Initialisierung der Karte automatisch ins Sichtfeld dieser gebracht werden. Der Mittelpunkt und Zoom wird also automatisch bestimmt.

Hinweis: Für einen einzelnen Marker ist dies jedoch nicht zu empfehlen, da hierbei zu stark gezoomt wird.

Zudem kann zu jedem Marker noch ein „Bounce“ Effekt hinzugefügt werden. Die entsprechenden Marker „hüpfen“ nun bei Erstellung der Karte.

weiss://inter.media


weiss://inter.media


KML Dateien einbinden Zu jeder GoogleMaps Karte können beliebig viele KML Dateien hinzugefügt werden. Diese können z.B. mit GoogleEarth erstellt werden und beinhalten grafische Oberflächen, Marker, Linien, Formen, die auf Koordinaten gelegt werden.

Diese generierten KML-Ebenen besitzen ebenfalls die Eigenschaft „Fitbounds“. Diese werden dann, wie die Marker, mit zur Berechnung des Kartenmittelpunkts und Zoom in Betracht gezogen.

Da standardmäßig KML-Ebenen ein Infofenster bei einem Klick anzeigen, kann dieses manuell deaktiviert werden. Die Informationen in diesem Infofenster sind in der KML Datei selbst zu erstellen, falls dies gewünscht ist.

weiss://inter.media


Obiges Beispiel liefert eine KML-Ebene mit den Grenzen des Kreises Euskirchen:

weiss://inter.media


GPX Dateien einbinden Zu jeder GoogleMaps Karte kann eine GPX-Datei hinzugefügt werden.

Ein GPX-Track kann, wie auch die Marker oder KML-Ebenen, die Eigenschaft „Fitbounds“ bekommen (siehe oben). Die Farbe des Tracks und des Höhenprofils muss im Hexadezimalen Farbformat angegeben werden, ist allerdings optional zu setzten.

weiss://inter.media


Zu einem GPX-Track kann ein interaktives Höhenprofil angezeigt werden. Falls diese Option gewählt wird muss zwingend ein GPX-Marker hinzugefügt werden, da ein Marker beim Hovern des Diagramms über den Track wandert. Der Name dieses Markers muss „_marker“ lauten, damit er als dieser erkannt wird. Alle weiteren Einstellungen entsprechen denen eines normalen Markers.

weiss://inter.media


Mit obigem Beispiel wird folgende Karte erzeugt:

weiss://inter.media


Eingetragene Waypoints in GPX-Dateien werden automatisch in Marker umgewandelt. Diese können ebenfalls Infofenster erhalten, wenn die Informationen in der GPX-Datei mitgeliefert wurden.

weiss://inter.media


Eigene GPX-Marker-Bilder Da verschiedene Waypoints in einer GPX-Datei unterschiedliche Points-of-Interrests markieren, können diesen eigene Marker-Bilder zugeteilt werden.

In der GPX-Datei ist deshalb zunächst das Marker-Bild (Symbol) den entsprechenden Waypoints zuzuteilen. In diesem Beispiel soll der Waypoint für den Start der Etappe das Symbol „flaggreen“ und der Waypoint für das Ende der Etappe das Symbol „flagred“ erhalten.

weiss://inter.media


Im TYPO3 Plugin muss diese Information dem Namen des GPX-Markers zugeteilt werden.

Hinweis: Es genügt einen Marker nur einmal anzugeben, falls dieser für mehrere Waypoints benutzt werden soll.

weiss://inter.media


weiss://inter.media


GoogleMap Karte anpassen

Kartenstyle ändern Um die Farben der Elemente der Karte zu ändern, muss ein sogenanntes GoogleMaps Kartenstyle JSON Objekt in das Textfeld der Option „Styles“ eingefügt werden.

Dieses Objekt kann beispielsweise mit dem kostenlosen Tool „Styled Maps Wizard“ erstellt werden. http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Ein Objekt für eine Karte im Style der NeT Farben hat z.B. folgen Aufbau:

[ { "elementType": "geometry", "stylers": [ { "hue": "#91ff00" }, { "saturation": -30 } ] },{ "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#0069B4" } ] },{ "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "featureType": "administrative.country", "elementType": "geometry", "stylers": [ { "color": "#932826" }, { "weight": 1.5 } ] },{ "featureType": "administrative.province", "elementType": "geometry", "stylers": [ { "color": "#932826" }, { "weight": 1 } ] },{ "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "color": "#1079C4" } ] } ]

Damit der eigene Kartenstyle gewählt werden kann, muss „styledMap“ in der GoogleMap Eigenschaft „Types Available“ hinzugefügt werden. Um diesen Style initial zu setzten, muss „styledMap“ zusätzlich für „Type Active“ gesetzt sein.

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

weiss://inter.media


weiss://inter.media


Karten Kontrolleinstellungen Es können einzelne Kontrollsteuerungen aktiviert werden, falls dies gewünscht ist. So kann z.B. nur die Auswahl des Kartentyps und Zoomsteuerung angezeigt werden. Diese sind kommagetrennt aufzulisten. Dabei kann zwischen folgenden Kontrollsteuerungen gewählt werden: mapType, pan, rotate, scale, streetview, zoom

Alle anderen Kontrollsteuerungen sind dabei deaktiviert. Falls jedoch alle angezeigt werden sollen, kann das Feld leer gelassen werden.

Documents

Dokumentation: wi://googlemaps - mosel.de · Damit der Nutzer nicht jedes Mal den Mittelpunkt und Zoom der GoogleMap Karte neu bestimmen muss, wenn ein neuer Marker eingebaut wird